Wie mehrere jquery Zyklen Galerien auf Seite haben, nur eine aktiv?
-
21-09-2019 - |
Frage
würde Ich mag auf einer Seite ein paar Zyklus Galerien haben, aber nur einen aktiven zu einer Zeit, und die versteckten andere. Idealer Klicken auf einen Link (Miniatur aus einer Liste) würde die nächste Zyklus Galerie aktivieren. Sinn ergeben? Wer dies getan, bevor? Würden Tipps zu schätzen wissen, danke!
Lösung
Ok, jetzt, dass ich Ihre Website gesehen habe kann ich sehen, dass Sie etwas flexibler werden müssen, da Sie über 15 Galerien Kontrolle haben. Geben Sie diesem eine einen Wirbel:
$(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;
});
});
Andere Tipps
Nicht getestet, aber so etwas wie dies sollte in der Nähe sein:
$(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;
});
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow