多个JavaScript驱动的图像在一个页面上的画廊

Question

我做了一个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(); 

}); 

}); 

Answer 1

如果在您的jQuery选择使用多个ID，你可以更具体的了解你的目标和你的代码将运行在大多数浏览器速度更快:-)

元素

尝试添加的ID给每个“galleryBodyWrapper”分区是这样的：

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