Come avere più gallerie del ciclo di jQuery nella pagina, una sola attiva?
-
21-09-2019 - |
Domanda
Mi piacerebbe avere un paio di gallerie ciclo su una pagina, ma solo uno attivo alla volta, e gli altri nascosti. Idealmente cliccando su un link (miniature da un elenco) avrebbe attivato la galleria ciclo successivo. Ha senso? Chiunque fatto prima? Gradirei suggerimenti, grazie!
Soluzione
Ok, ora che ho visto il vostro sito vedo che avrete bisogno di qualcosa di più flessibile poiché si dispone di circa 15 gallerie da controllare. Dare questo un vortice:
$(document).ready(function() {
$.expr[':'].gallery = function(a) { return /^gallery\d+/.test(a.id); }
// initialize and pause the slideshows
var $gallery = $(':gallery').each(function() {
var $nav = $('<ul class="gallery-nav">').insertBefore(this);
$(this).cycle({
fx: 'slideY',
speed: 1000,
timeout: 6000,
pager: $nav
}).cycle('pause');
});
var $navs = $('ul.gallery-nav');
// hide all but first gallery and pager and restart first gallery slideshow
$navs.not(':eq(0)').hide();
$gallery.not(':eq(0)').hide()
$gallery.eq(0).cycle('resume');
// bind click triggers to show/hide galleries
var $thumbs = $('#slider_thumbs a').click(function() {
var index = $thumbs.index(this);
$gallery.not(':eq('+index+')').cycle('pause').hide();
$gallery.eq(index).show().cycle('resume');
$navs.eq(index).show();
$navs.not(':eq('+index+')').hide();
return false;
});
});
Altri suggerimenti
Non testato, ma qualcosa di simile dovrebbe essere vicino:
$(document).ready(function() {
// initialize and hide both slideshows
$('#gallery1,#gallery2').each(function() {
var $nav = $('<ul class="gallery-nav">').insertBefore(this);
$(this).cycle({
fx: 'slideY',
speed: '1000',
timeout: 6000,
pager: $nav,
pagerAnchorBuilder: function(i) {
return '<li><a href="#">'+(i+1)+'</a></li>';
}
}).cycle('pause').hide();
});
// bind click triggers to show/hide galleries
$('.gallery1,.gallery2').click(function() {
var isOne = $(this).is('.gallery1');
var showId = '#gallery' + isOne ? 1 : 2;
var hideId = '#gallery' + isOne ? 2 : 1;
$(hideId).cycle('pause').hide();
$(showId).show().cycle('resume');
return false;
});
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow