WordPress.org

1. fefo1983
   Member
   Posted 2 months ago #
   

   Hi there,

   your plugin is just perfect for me but the owner of the website I'm crafting wants absolutely to have a lightbox effect when somebody clicks on the main image (the one enclosed in the "szg-main-photo" class).

   Do you see an easy way to do that?

   Thanks a lott and keep up the great work!

   http://wordpress.org/extend/plugins/super-zoom-gallery/

2. Niels Doorn
   Member
   Plugin Author
   Posted 2 months ago #
   

   Hi Fefo,

   Well, I haven't tried it but you could with some JavaScript perform an action when the user clicks on the szg-main-photo element and then show a div with the photo as a lightbox effect.

   Maybe something like this:

   $(function() {
   $('.szg-main-photo').click(function() {
   $(this).parent().append('<div class="lightbox"><img src="'+$(this).attr('src')+'" /></div>');
   $(this).css({"opacity": "0.1"});
   });
   });

   Tested it in cssdeck: here

   And then style the lightbox class the way you want it.

   Good luck!

   Kind regards,

   Niels

3. fefo1983
   Member
   Posted 2 months ago #
   

   Hi Niels,

   thanks a lot for the response. I'm not very expert in Javascript. Any idea on how to prepend something like:

   <a href="full-image-url.jpg">

   and to append the closing </a>?

   Any idea?

4. Niels Doorn
   Member
   Plugin Author
   Posted 2 months ago #
   

   Well, if you want to surround it with elements without javascript, you must edit the .php file. But I would not recommend it since with every plugin update you will loose that change.

5. Niels Doorn
   Member
   Plugin Author
   Posted 2 months ago #
   

   I mean:

   Well, if you want to surround it with <a> elements without javascript, you must edit the .php file. But I would not recommend it since with every plugin update you will loose that change.

   Better, IMHO is to use JavaScript and enqueue a javascript file from your theme containing the code I mentioned before. Then you have full control in your CSS for the look and feel and if the plugin updates, you don't loose the changes.

   Kind regards,

   Niels

6. snap-shot
   Member
   Posted 2 months ago #
   

   Hi Niels,
   please can you have a look why my facnybox doesn't close? It seems because it is triggered via AJAX and overrides the default behaviour, but i tried to manually add a jquery function to close the overlay on Click event:

   
$('.fancybox-overlay').click($.fancybox.close()


   But nope!
   Here is it: http://tinyurl.com/cxdx7w7

7. Niels Doorn
   Member
   Plugin Author
   Posted 2 months ago #
   

   Hi Snap-shot,

   Nice website! There is an error in the JavaScript of the fancybox part on your page.

   <script>
   	jQuery(document).ready(function(){
   		jQuery('#etalage').etalage();
   	});
   
   	// Invoke the Fancybox plugin when an image is clicked
   	function etalage_click_callback(image_anchor, instance_id){
   		jQuery.fancybox({
   			href: image_anchor
   		});
   	}
   
   });

   remove this last line (it is generated in your theme somewhere I think)

   Hope this helps,

   Kind regards,

   Niels

Reply

You must log in to post.