WordPress.org

Ready to get started?Download WordPress

Forums

JSJ Gallery Slideshow
[resolved] Gallery images clickable? (10 posts)

  1. jbhale
    Member
    Posted 6 months ago #

    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/

    http://wordpress.org/plugins/jsj-gallery-slideshow/

  2. Jorge Silva-Jetter
    Member
    Plugin Author

    Posted 6 months ago #

    Hi,

    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 http://fancybox.net/blog #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(){
        $.fancybox(
    		'<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.

  3. jbhale
    Member
    Posted 6 months ago #

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

  4. Jorge Silva-Jetter
    Member
    Plugin Author

    Posted 6 months ago #

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

  5. jbhale
    Member
    Posted 6 months ago #

    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.

    Thanks.

  6. Jorge Silva-Jetter
    Member
    Plugin Author

    Posted 6 months ago #

    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.

    J.

  7. jbhale
    Member
    Posted 6 months ago #

    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';
    else
    $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
    });
    </script>

  8. Jorge Silva-Jetter
    Member
    Plugin Author

    Posted 6 months ago #

    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!

    J.

  9. jbhale
    Member
    Posted 6 months ago #

    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.

  10. Jorge Silva-Jetter
    Member
    Plugin Author

    Posted 6 months ago #

    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.

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.