WordPress.org

Ready to get started?Download WordPress

Forums

Super Zoom Gallery
[resolved] Lightbox in Super Zoom Gallery (8 posts)

  1. fefo1983
    Member
    Posted 1 year 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
    Member
    Plugin Author

    Posted 1 year 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 1 year 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
    Member
    Plugin Author

    Posted 1 year ago #

  5. Niels
    Member
    Plugin Author

    Posted 1 year 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 1 year 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
    Member
    Plugin Author

    Posted 1 year 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

  8. pxlray
    Member
    Posted 11 months ago #

    Hello :)

    I'm new to javascript. I created an external .js file (lightbox-viewer.js) with your suggested code in it.

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

    I know I can import the file using this:

    <script src="lightbox-viewer.js"></script>

    I'm just not sure where in the file to place that line. It seems to hide the szg-main-photo if I put it anywhere.

    Sorry I'm a newb. :/

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic