WordPress.org

Support

Support » Plugins and Hacks » Super Zoom Gallery » [Resolved] Lightbox in Super Zoom Gallery

[Resolved] Lightbox in Super Zoom Gallery

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Niels

    @ndoorn

    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

    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?

    Plugin Author Niels

    @ndoorn

    Plugin Author Niels

    @ndoorn

    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

    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

    Plugin Author Niels

    @ndoorn

    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

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Resolved] Lightbox in Super Zoom Gallery’ is closed to new replies.
Skip to toolbar