Using two The Grid shortcodes on one page

Support
#1

Is it possible to use two slideshows created using The Grid plugin on the same page? Scroll to the bottom of http://cliftonclub.com/join-the-club/ to see the two slideshows inserted using onto this page via The Grid element in Cornerstone. What I am experiencing when I insert the 2nd shortcode is that the slides from both slideshows combine. Each slide show is setup with 6 images. You will notice when you click the first (left most) slide in the bottom (2nd) slide show, it starts at slide 7, not slide 1. Each slideshow has its own shortcode and having only one shortcode on the page works as expected (only the intended 6 slides display). Please advise.

#2

Hi There,

Please provide your admin credentials in a secure note so we can take a look on your grids settings.

Thank you

#3

Credentials sent via secure message. Please confirm you received it. Thanks, Del

#4

Hey there,

There is no way to prevent this in the Grid. For this case, you might want to use WordPress Gallery shortcode and X lightbox instead. X lightbox can separate 2 gallery sets. The setup looks like this.

[gallery link="file" size="full" ids="129,128,127"]
[lightbox selector="#gallery-1 a"]

[gallery link="file" size="full" ids="126,125,118"]
[lightbox selector="#gallery-2 a"]

For more lightbox options, please see http://demo.theme.co/integrity-1/shortcodes/responsive-lightbox/

Thanks.

#5

Christian_Y and Company:

You are correct, that is how The Grid is designed to perform, for some odd reason. But I did not like that answer as I could not believe I was the first person who needed to place 2 The Grid shorcodes onto one page and keep the slideshow/carousel images independent. So I purchased a license for The Grid from Envato so I could get direct support.

In under 30 minutes they supplied me the following JS code which can be inserted via The Grid console (not on the WP page) in the CSS/JSS tab area of any one of The Grids contained on the same page (the CSS/JS tab is located in the Load/Ajax section). The code works exactly as advertised and as I needed and well worth my $25 investment!

var tglb = ‘[data-tolb-src]’,
close = ‘.tolb-inner, .tolb-close’,
disable = ‘tolb-disabled’;
$(document).on(‘click’, tglb, function() {
var $this = $(this).closest(’.tg-grid-holder’);
$(’.tg-grid-holder’).not($this).find(tglb).addClass(disable);
});
$(document).on(‘click touchend’, close, function() {
$(tglb).removeClass(disable);
});

Cheers,

Del

#6

Glad you’ve sorted it out.