Support » Plugin: JSJ Gallery Slideshow » Gallery images clickable?

  • Resolved jbhale


    I really like the plugin, I’m just looking for a little guidance on how to mod it a little. I want the viewer to be able to click the image and get a full size lightbox image to see all the detail in the picture. I added the code to wrap the img in the proper link, but it totally breaks the gallery-pager thumbnails and navigation. I’m more of a PHP guy than Javascript, I wonder if you might know how to fix those two items?

    You can see the page I’m working on at:

    oasis dot julianhale dot com/services/decks/

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Jorge Silva-Jetter



    I’m not surprised that it breaks. It probably has something to do with jQuery Cycle and Fancybox interacting together. Fancybox is probably overwriting Cycle in some way.

    The solution is not an easy one. It probably involves writing fancybox manuallly. What I would do it NOT to wrap the content in tags. Instead bind the images to a jQuery event and on click, bring up fancybox manually.

    Reference: see #6. Instead of

    ‘<h2>Hi!</h2>’… you would put your image tag.

    So it would l look something like this:

    (This code won’t work as is)

    $('.jsj-gallery-sli... img').click(function(){
    		'<img src="' + $(this).attr('src') + '>"',
            		'autoDimensions'	: false,
    			'width'         		: 350,
    			'height'        		: 'auto',
    			'transitionIn'		: 'none',
    			'transitionOut'		: 'none'

    If you’re not a JS guy, then this might be a bit hard, but it’s certainly possible. I

    Let me know if that works.

    OK, great, thanks, I’ll see what I can do with that. That’s probably within the realm of possibility for me.

    Plugin Author Jorge Silva-Jetter


    Excellent. Let me know if you can make it happen.

    Incidentally, it’s not Fancybox that breaks the thumbnails and navigation, it’s wrapping the slides in A tags. I’ll just use jQuery to wrap the slide after the navigation and thumbnails have been set up.


    Plugin Author Jorge Silva-Jetter


    Yeah, I’m not surprised that it’s the wrapping that breaks it.

    Let me know if you figure it out. Maybe this feature could make it to future versions of the plugin.


    OK, I eventually got it working. I don’t know if this is the most effective way of doing it, but it works. Just in case you or someone else wants to use this at some point in the future, here is what I did.

    In jsj-gallery-slideshow.php inside gallery_shortcode(), after $gallery_style = $gallery_div = ”;, I added:
    if ($attr['link']=='file')
    $click = 'clickable';
    $click = '';

    At the end of $gallery_div I added $click

    In my footer, I added the following Javascript code:
    <script type='text/javascript'>
    jQuery(window).load(function() {
    jQuery('.clickable img').each(function(){
    var ImgSrc = (jQuery(this).attr('src'));
    ImgSrc = ImgSrc.slice(0,-12) + '.jpg'; //use full size img
    jQuery(this).wrap(jQuery('').attr('href', ImgSrc));
    jQuery("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").fancybox(); //re-apply fancybox to image links

    Plugin Author Jorge Silva-Jetter


    If it work!

    Cool. It’s good to leave around here for all future googlers.

    Marking as resolved. If you like the plugin, go ahead and review it!


    Well, it’s imperfect, the a wrap doesn’t happen until after the all the images load, so it can take a while for everything to load. But if I use (document).ready instead of (window).load, it still breaks the thumbnails. What appears to be the best place to put the code is at the end of jsj-gallery-slideshow.js, after createJSJGallerySlideshow()

    Thanks for steering me down the right path, I don’t know that it would have occurred to me.

    Plugin Author Jorge Silva-Jetter


    Nice to hear it works!

    Hey, I saw that you wrote that the plugin could use more features ( thanks for the review, btw) and was wondering if there were any features you might like to see. I want to extend the plugin, but don’t want to add any unnecessary features.

    Something I was thinking about was creating different visual themes (maybe some of them would be premium) so that people could have the same plugin and setting, but have different looks on it.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Gallery images clickable?’ is closed to new replies.