• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

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

Top work Calorie,
It works brilliantly when I don't insert thumbnails and XF auto-thumbs them, however when you insert the thumbnail into a post it isn't working.
 
I reckon this is the fix for highslide on inserted thumbnails. It is working for me, but I'd appreciate it if someone can check the fix.

Edit: bb_code_tag_attach
Replace two occurrences of
Code: 
<a href="{xen:link attachments, $attachment}" target="_blank"><img src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}" class="bbCodeImage" /></a>

with

Code: 
<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>
 
Thanks for all the 'likes' and thanks. BamaStangGuy and Moses, you're correct, this only applies to thumbnails in the attachments area at the bottom of posts, not when the images are placed inline. To get the inline thumbnails to Highslide looks to be an edit of the XF bb_code_tag_attach template.

Untested, too tired ATM, but if you are willing, try this. In the XF bb_code_tag_attach template find:
Code: 
<xen:else />
    <a href="{xen:link attachments, $attachment}" target="_blank"><img src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}" class="bbCodeImage" /></a>
</xen:if>

And replace with:
Code: 
<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>

Again that's untested but it might do the trick.
 
ArnyVee said:
Yes, with Kier taking a peek at this thread, I would imagine he'd like to bring something like this to xF :D
Click to expand...

I'm fairly sure this was mentioned someone where a while ago that it was intended, but not the highest of priorities.
 
Moses said:
I reckon this is the fix for highslide on inserted thumbnails. It is working for me, but I'd appreciate it if someone can check the fix.

Edit: bb_code_tag_attach
Replace two occurrences of

<snipped>
Click to expand...

Close but do as in post 26 instead. You only want to alter the last occurrence. If you alter the first occurrence, where the person does not have permission to view the full size, then the person will see a forever-spinning loading indicator instead of a no permission message when trying to view the full size.
 
calorie said:
Step 4 of 6: Add the following to the end of the XF page_container_js_head template:
Step 5 of 6: Edit the XF attached_files template in two spots. First find this:
Click to expand...
Where the files are placed? Please provide full path from the root of XenForo.

Thanx
 
kde said:
Where the files are placed? Please provide full path from the root of XenForo.

Thanx
Click to expand...
The specified files should be placed inside of a directory at:
xenRoot/js/highslide.

The two spots you mentioned are all done via the ACP: They are templates.
 
  • Like
Reactions: kde
calorie said:
Thanks for all the 'likes' and thanks. BamaStangGuy and Moses, you're correct, this only applies to thumbnails in the attachments area at the bottom of posts, not when the images are placed inline. To get the inline thumbnails to Highslide looks to be an edit of the XF bb_code_tag_attach template.

Untested, too tired ATM, but if you are willing, try this. In the XF bb_code_tag_attach template find:
Code: 
<xen:else />
    <a href="{xen:link attachments, $attachment}" target="_blank"><img src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}" class="bbCodeImage" /></a>
</xen:if>

And replace with:
Code: 
<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>

Again that's untested but it might do the trick.
Click to expand...

Worked great. Only change I made was change <div> to <span> so that it didn't create a new line for each attachment.
 
calorie said:
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:

View attachment 3614


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

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

Code: 
    <ul class="attachmentList">

And replace with this:

Code: 
    <ul class="attachmentList highslide-gallery">

Second find this:

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

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

View attachment 3625

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.
Click to expand...


thank you sir installed...now waiting for the famous photoplog ;)
 
I haven't yet tested xenforo, but I just want to tell you that I'm very happy to see you here ! :)

Thank you Calorie !
 
You must log in or register to reply here.

Similar threads

Coop1979
  • Question Question
XF 1.4 Attachment Uploader Shows Pop-Up Instead Of Flash Uploader
Replies
4
Views
512
Paul B
Paul B
TheBigK
  • Question Question
XF 1.1 Attachment Uploader Shows Pop - Up Instead Of Flash Uploader
Replies
4
Views
762
TheBigK
TheBigK
Top Bottom