我在 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();
});
});