CODEWITHSUNDEEP
javascriptjqueryhtmllightbox
Kicker
Kicker

Reputation: 606

jquery gallery wont load lightbox

I am using VisualLightBox Gallery on my site on portfolio: http://www.kamenarstvo-kliestik.sk/en/portfolio.htm but when you open e.g. Kitchen portfolio and whatever picture its open directly, not in lightbox. but when you refresh page on Kitchen portfolio or open this link http://www.kamenarstvo-kliestik.sk/en/portfolio/kitchen.htm, images will be opened correctly. Scripts are linkend correctly too.

Here is my portfolio.htm source http://pastebin.com/wNNPw820 and here is my portfolio/kitchen.htm source http://pastebin.com/Eyz086dt

Upvotes: 2

Views: 226

Answers (2)

Sahistaja
Sahistaja

Reputation: 34

Seems, like the VisualLightBox gets initialized on page load. Your links are AJAX requests, so the DOM content is uploaded once the category data has been loaded. VisualLightBox does not know about the new elements that got loaded, so it does not work on them. You should run the VisualLightBox again, after the category data request has completed: 

jQuery(document).ready(function(){ window.Lightbox = new jQuery().visualLightbox({borderSize:10,classNames:'vlightbox1',descSliding:true,enableRightClick:true,enableSlideshow:false,prefix:'vlb1',resizeSpeed:9,slideTime:8,startZoom:true}) });

Or modidy the current vlbdata1.js script to:

// function to load the lightbox
function init_visuallightbox() {
  window.Lightbox = new jQuery().visualLightbox({ borderSize:10, classNames:'vlightbox1', descSliding:true, enableRightClick:true, enableSlideshow:false, prefix:'vlb1', resizeSpeed:9, slideTime:8, startZoom:true})
}

// tells browser to load lightbox on page change or load
jQuery(document).on('ready page:change', function() { 
  init_visuallightbox();
});

// tells browser to load lightbox after all ajax requests
$( document ).ajaxComplete(function( event, xhr, settings ) {
  init_visuallightbox();
});

Upvotes: 1

julio
julio

Reputation: 2937

It looks like it works when the images have been preloaded before .

Try pre-load then using a plugin js.

Upvotes: 0

Related Questions