1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. 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)

Discussion in 'Add-on Releases [Archive]' started by calorie, Oct 6, 2010.

  1. calorie

    calorie Active Member

    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:

    ftp_highslide.gif


    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_highslide.jpg

    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.
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    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?
     
    D37 likes this.
  3. calorie

    calorie Active Member

    Thanks, moving it to wherever you think it fits best is fine with me. :cool:
     
    D37 likes this.
  4. Eric J.

    Eric J. Well-Known Member

    Wow, nice job calorie. Thanks!
     
    D37 likes this.
  5. GofD

    GofD Well-Known Member

    Nice to see you active so early here, calorie! Thanks for the add-on!
     
    D37 likes this.
  6. Booth

    Booth Well-Known Member

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

    lazer Well-Known Member

    Thank you - this looks great.
     
    D37 likes this.
  8. Brogan

    Brogan XenForo Moderator Staff Member

    This is on my shortlist to install :)
     
    D37 likes this.
  9. Kier

    Kier XenForo Developer Staff Member

    Great work, Carrie :)
     
    D37 likes this.
  10. Kim

    Kim Well-Known Member

    Nice one :D Thank you! I have been missing this.
     
  11. Lawrence

    Lawrence Well-Known Member

    Very Nice! Thanks, :)
     
  12. iCafe

    iCafe Member

    Nice work calorie. ;)
     
  13. Ranger375

    Ranger375 Well-Known Member

    This should be default :D
     
    Nick likes this.
  14. MrBrian

    MrBrian Active Member

    Great work, Carrie. :)
     
  15. DavidB

    DavidB Member

    Awesome. Thanks Calorie!
     
  16. Sir nick

    Sir nick Well-Known Member

    Installed for sure :thumbs up:
     
  17. bogus

    bogus Guest

    Thank u so much. I was looking for that ;)
     
  18. Anthony Parsons

    Anthony Parsons Well-Known Member

    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.
     
    Shelley likes this.
  19. bogus

    bogus Guest

    Kier saw it, xf is beta.. All we need is a bit more Time ;)
     
    Nick likes this.
  20. Floris

    Floris Guest

    Calorie for the win! Nicely done :)
     

Share This Page