Gallery images clickable?

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 https://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.

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

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.

Thanks.

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.

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>

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.

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.

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.