How-to: Highslide image attachments (pop-up instead of new window)

[calorie]

So you want image attachments to pop-up instead of open in a new window, eh? Let's Highslide them.


Step 1 of 6: Go to http://highslide.com/download.php and download Highslide (free for non-commercial purposes).


Step 2 of 6: Save Highslide to your PC, unzip it, and find the /highslide sub-directory.


Step 3 of 6: Create a new /your_forum/js/highslide directory on your server, and into this new directory FTP the following from the /highslide sub-directory on your PC:

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

When you are done, it should look like this:




Step 4 of 6: Add the following to the end of the XF page_container_js_head template:

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

<script type="text/javascript">
hs.graphicsDir = 'js/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>

Step 5 of 6: Edit the XF attached_files template in two spots. First find this:

    <ul class="attachmentList">

And replace with this:

    <ul class="attachmentList highslide-gallery">

Second find this:

                    <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>

And replace with this:

                    <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>

Step 6 of 6: Go attach some pictures to a post and then click on one of the attachments. It should look like this:



Attached GIF, JPG, and PNG images in posts on a page get Highslide and non-image attachments open in a new window as happens by default.

Tested in IE and FF, and currently without known problems, but no guarantees. Please see http://www.highslide.com/tutorial for Highslide help.


Note: This add-on applies Highslide to thumbnails in the attachment area of posts. If you want to Highslide thumbnails that are inline, then see post 26 for directions. In post 26 you can replace the DIV with SPAN if you don't want an extra line introduced around the inline thumbnails.

 

[Paul B]

Nice work calorie.

I would however say this is more like an add-on than a simple tip or trick.
If you like I can move it to that forum?

 

[calorie]

Thanks, moving it to wherever you think it fits best is fine with me.

 

[Eric J.]

Wow, nice job calorie. Thanks!

 

[GofD]

Nice to see you active so early here, calorie! Thanks for the add-on!

 

[Booth]

Nice work. I think something like this is going to be in the gold release.

 

[lazer]

Thank you - this looks great.

 

[Paul B]

This is on my shortlist to install

 

[Kier]

Great work, Carrie

 

[Kim]

Nice one Thank you! I have been missing this.

 

[Lawrence]

Very Nice! Thanks,

 

[iCafe]

Nice work calorie.

 

[Ranger375]

This should be default

 

[MrBrian]

Great work, Carrie.

 

[DavidB]

Awesome. Thanks Calorie!

 

[Sir nick]

Installed for sure :thumbs up:

 

[bogus]

Thank u so much. I was looking for that

 

[Anthony Parsons]

Nice.... XF should use something like this by default... ie. a lightbox type setup so you can just shift through images like a album when viewing multiple images attached to a post.

 

[bogus]

Kier saw it, xf is beta.. All we need is a bit more Time

 

[Floris]

Calorie for the win! Nicely done