我从lynda.com做了一个jquery教程，设置了一个带有整洁效果和灯箱的java驱动（css格式化）图像库。它工作正常。
我现在想要在一页上创建几个画廊，并且每个画廊只能显示与其相关联的图像。问题是因为每个图库的标签/ ID都显示相同的图像。 （有关问题的示例，请参阅... http://www.chartoonz.com/portfolio/illustration.html）您可以看到基本功能有效。
如何让java脚本将一个图库的功能限制在该图库中并让其他图库保持独立？我想，因为jquery正在执行$（document）.ready它会在渲染时发生，所以如果我可以循环它，它一次只能做一个库，但只考虑onload预览图像。我怎样才能分隔这些画廊，这样无论按哪个缩略图，它们都不会做同样的事情？我可以吗？
正如我所说，我以为我可以循环它，但我遇到了麻烦！我尝试将所有gallery_content标记放入一个数组然后循环遍历数组，但我显然没有这样做，因为它不起作用。
我希望我清楚地阐明了这个问题。任何帮助，将不胜感激。这是我的相关javascript ...
// What to do when the document is ready
$(document).ready(function(){
// Capture the thumbnail links
$('.gallery_thumbnails a').click(function(e){
// Disable standard link behavior
e.preventDefault();
// Fade out thumbnails
// Commented out to be in their own function (/**/)
/*
$('.gallery_thumbnails a').removeClass('selected');
$('.gallery_thumbnails a').children().css('opacity', '1');
$(this).addClass('selected');
$(this).children().css('opacity', '.4');
*/
// Add variables to link thumbnail to preview
var photo_caption = $(this).attr('title');
var photo_fullsize = $(this).attr('href');
var photo_preview = photo_fullsize.replace('_fullsize', '_preview');
$('.gallery_caption').slideUp(500);
$('.gallery_preview').fadeOut(500, function(){
// preload
$('.gallery_preload_area').html('<img src="'+photo_preview+'"/>');
$('.gallery_preload_area img').imgpreload(function(){
// Write the HTML into the page
$('.gallery_preview').html('<a class="overlaylink" href="'+photo_fullsize+'"
title="'+photo_caption+'" style="background-image:url('+photo_preview+');"></a>');
// Update the html for the gallery caption
$('.gallery_caption').html('<p><a class="overlaylink zoom" href="'+photo_fullsize+'"
title="'+photo_caption+'">View larger</a></p><p>'+photo_caption+'</p>')
$('.gallery_preview').fadeIn(500);
$('.gallery_caption').slideDown(500);
setFancyboxLinks();
updateThumbnails();
});
});
}
// Initialize the gallery on load
var first_photo_caption = $('.gallery_thumbnails a').first().attr('title');
var first_photo_fullsize =$('.gallery_thumbnails a').first().attr('href');
var first_photo_preview = first_photo_fullsize.replace('_fullsize', '_preview');
$('.gallery_caption').slideUp(500);
$('.gallery_preview').fadeOut(500, function(){
// preload
$('.gallery_preload_area').html('<img src="'+first_photo_preview+'"/>');
$('.gallery_preload_area img').imgpreload(function(){
// Write the HTML into the page
$('.gallery_preview').html('<a class="overlaylink" href="'+first_photo_fullsize+'" title=
"'+first_photo_caption+'" style="background-image:url('+first_photo_preview+');"></a>');
// Update the html for the gallery caption
$('.gallery_caption').html('<p><a class="overlaylink zoom" href="'+first_photo_fullsize+'"
title="'+first_photo_caption+'">View larger</a></p><p>'+first_photo_caption+'</p>')
$('.gallery_preview').fadeIn(500);
$('.gallery_caption').slideDown(500);
setFancyboxLinks();
updateThumbnails();
});
});
答案 0 :(得分：0)
如果你在jQuery选择器中使用更多的id，你可以更具体地说明你所定位的元素，并且你的代码在大多数浏览器中运行得更快： - ）
尝试为每个“galleryBodyWrapper”div添加一个id，如下所示：
div class="galleryBodyWrapper" id="gallery1">...
然后你可以为你的每个画廊写下单独的选择器：
$('#gallery1 .gallery_thumbnails').click(function(e){...
当然，您必须为您正在使用的每个图库编写一次代码。一种更简洁的方法是将库代码打包为可重用的对象，并将jQuery选择器传递给它的构造函数。
chartoonz.ui.initGalleries('div.galleryBodyWrapper');
init方法看起来像这样：
/**
* Create a gallery object for each div on this page that matches the selector
*
* @return void
*/
initGalleries:function(selector){
chartoonz.$(selector).each(
function(intIndex,domEle){
var galleryDiv = chartoonz.$(domEle);
chartoonz.ui.galleries[intIndex] = new chartoonz.ui.gallery(galleryDiv);
});
},
所以你可以像这样重构原始代码（我已经对它进行了简单的测试，它似乎适用于你的HTML）
//Set up a page namespace
chartoonz = {};
//localise the jQuery object to prevent conflicts
chartoonz.$ = jQuery;
/**
* Object to contain page UI elements and interactions
*
*/
chartoonz.ui={
/**
* Container for all chartoonz.ui.gallery objects on this page.
* @var Array
*/
galleries:[],
/**
* Create a gallery object for each div on this page that matches the selector
*
* @return void
*/
initGalleries:function(selector){
chartoonz.$(selector).each(
function(intIndex,domEle){
var galleryDiv = chartoonz.$(domEle);
chartoonz.ui.galleries[intIndex] = new chartoonz.ui.gallery(galleryDiv);
});
},
/**
* The gallery object
*/
gallery:function(context){
/**
* container for all of the thumbnails in this gallery
* @var Array
*/
this.thumbnails = [];
/**
* The caption div for this gallery.
* @var jQuery
*/
this.captionEle = chartoonz.$('.gallery_caption',context);
/**
* The preview div for this gallery.
* @var jQuery
*/
this.previewEle = chartoonz.$('.gallery_preview',context);
/**
* The pre-load div for this gallery.
* @var jQuery
*/
this.preloadEle = chartoonz.$('.gallery_preload_area',context);
/**
* The pre-load image for this gallery.
* @var jQuery
*/
this.preloadEleImg = chartoonz.$('img',this.preloadEle);
//initialise the thumbnails
var parentGallery = this;
chartoonz.$('a',context).each(
function(intIndex,domEle){
var obj = chartoonz.$(domEle);
obj.click(function(e){
// Disable standard link behavior
e.preventDefault();
// Add variables to link thumbnail to preview
var photo_caption = obj.attr('title');
var photo_fullsize = obj.attr('href');
var photo_preview = photo_fullsize.replace('_fullsize', '_preview');
parentGallery.setMain(photo_caption,photo_fullsize,photo_preview);
});
parentGallery.thumbnails[intIndex] = obj;
});
/**
* Update the html for the gallery caption
*
* @return void
*/
this.setCaption = function(photo_caption,photo_fullsize){
this.captionEle.html('<p><a class="overlaylink zoom" href="'+photo_fullsize+'" title="'+photo_caption+'">View larger</a></p><p>'+photo_caption+'</p>')
}
/**
* Set the html for the preview
*
* @return void
*/
this.setPreview = function(photo_caption,photo_fullsize,photo_preview){
this.previewEle.html('<a class="overlaylink" href="'+photo_fullsize+'" title= "'+photo_caption+'" style="background-image:url('+photo_preview+');"></a>');
}
/**
* Set the main image
*
* @return void
*/
this.setMain = function(photo_caption,photo_fullsize,photo_preview){
this.captionEle.slideUp(500);
var parentGallery = this;
this.previewEle.fadeOut(500, function(){
// preload
parentGallery.preloadEle.html('<img src="'+photo_preview+'"/>');
parentGallery.preloadEleImg.imgpreload(function(){
parentGallery.setPreview(photo_caption,photo_fullsize,photo_preview);
parentGallery.setCaption(photo_caption,photo_fullsize);
parentGallery.previewEle.fadeIn(500);
parentGallery.captionEle.slideDown(500);
setFancyboxLinks();
updateThumbnails();
});
});
}
// Initialize the gallery on load
var first_photo_caption = this.thumbnails[0].attr('title');
var first_photo_fullsize =this.thumbnails[0].attr('href');
var first_photo_preview = first_photo_fullsize.replace('_fullsize', '_preview');
this.setMain(first_photo_caption,first_photo_fullsize,first_photo_preview);
}
};
$(document).ready(function(){
// Navigation Menu
navWrapper();
//footerText();
followLogos();
calculateDate();
//This line sets up the galleries
chartoonz.ui.initGalleries('div.galleryBodyWrapper');
});
// Functions... Your other functions go here as before.
希望有所帮助
_Pez