Immagini allegate in finestra popup e non in una nuova scheda

[najaru]

Traduzione delle istruzioni che si trovano si questo topic del forum ufficiale, scritto da calorie
Lo scopo di questa procedura è quello di fare aprire le immagini in finestre di popup sopra la board, e non in una nuova scheda o finestra del browser.


Passo 1 di 6: Scaricare questo http://highslide.com/download.php


Passo 2 di 6: scompattarlo ed aprire la directory /highslide

Passo 3 di 6: Creare una nuova dyrectory sul proprio server /your_forum/JavaScript/highslide e caricare all'interno i seguenti files:

• /graphics and its contents
• highslide-ie6.css
• highslide-with-gallery.JavaScript
• highslide.css

Passo 4 di 6: aprire il template page_container_js_heade aggiungere in fondo :

<script type="text/JavaScript"  src="JavaScript/highslide/highslide-with-gallery.JavaScript"></script>
<link rel="stylesheet" type="text/css"  href="JavaScript/highslide/highslide.css" />
<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css"  href="JavaScript/highslide/highslide-ie6.css" />
<![endif]-->

<script type="text/JavaScript">
hs.graphicsDir = 'JavaScript/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.dimmingOpacity = 0.8;
hs.outlineType = 'rounded-white';
hs.captionEval = 'this.thumb.alt';
hs.marginBottom = 105; // make room for the thumbstrip and the  controls
hs.numberPosition = 'caption';

// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
    //slideshowGroup: 'group1',
    interval: 5000,
    repeat: false,
    useControls: true,
    overlayOptions: {
        className: 'text-controls',
        position: 'bottom center',
        relativeTo: 'viewport',
        offsetY: -60
    },
    thumbstrip: {
        position: 'bottom center',
        mode: 'horizontal',
        relativeTo: 'viewport'
    }
});
</script>

Passo 5 di 6: modificare il template attached_files :
Trovare

    <ul class="attachmentList">

E sostituire con:

    <ul class="attachmentList highslide-gallery">

Trovare:

                    <div class="thumbnail">
                        <a href="{xen:link attachments,  $attachment}" target="_blank">
                            <img src="{xen:if  $attachment.thumbnailUrl, $attachment.thumbnailUrl,  '@imagePath/xenforo/widgets/page.png'}" alt="{$attachment.filename}"  />
                        </a>
                    </div>

E sostituire con:

                    <div class="thumbnail">
                        <xen:if is="{$attachment.thumbnailUrl} AND  {$visitor.permissions.forum.viewAttachment}">
                            <a class="highslide" href="{xen:link  attachments, $attachment}" onclick="return hs.expand(this)">
                                <img src="{xen:if  $attachment.thumbnailUrl, $attachment.thumbnailUrl,  '@imagePath/xenforo/widgets/page.png'}" alt="{$attachment.filename}"  />
                            </a>
                        <xen:else />
                            <a href="{xen:link attachments,  $attachment}" target="_blank">
                                <img src="{xen:if  $attachment.thumbnailUrl, $attachment.thumbnailUrl,  '@imagePath/xenforo/widgets/page.png'}" alt="{$attachment.filename}"  />
                            </a>
                        </xen:if>
                    </div>

Passo 6 of 6: Provare il funzionamento. Funzionerà ovviamente solo con le immagini.Il tutto funzionerà solo sulle immagini in allegato.

Se volete farlo funzionare anche per le immagini miniaturizzate nel topic è necessario fare:
Nel template bb_code_tag_attach trovare:

<xen:else />
    <a href="{xen:link attachments, $attachment}"  target="_blank"><img src="{$attachment.thumbnailUrl}"  alt="{$attachment.filename}" class="bbCodeImage" /></a>
</xen:if>

e sostituirlo con:

<xen:else />
    <xen:if is="{$canView}">
        <div class="highslide-gallery">
            <a class="highslide" href="{xen:link attachments,  $attachment}" onclick="return hs.expand(this)"><img  src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}"  class="bbCodeImage" /></a>
        </div>
    <xen:else />
        <a href="{xen:link attachments, $attachment}"  target="_blank"><img src="{$attachment.thumbnailUrl}"  alt="{$attachment.filename}" class="bbCodeImage" /></a>
    </xen:if>
</xen:if>