Jquery lightbox不支持AdGallery

Question

我正在使用AdGallery创建一个图片库(遵循这个插件：http://coffeescripter.com/2009/07/ad-gallery-a-jquery-gallery-plugin/)。

和Jquery lightbox：http://leandrovieira.com/projects/jquery/lightbox/

现在我想要的是，当用户点击大图时，会出现一个灯箱。因此，我修改了jquery.ad-Gallery.js中的一些代码行：

从…

if(image.link) {
          var link = $('<a rel="lightbox" href="'+ image.link +'" target="_blank"></a>');
          link.append(img);
          img_container.append(link);
        } else {
         img_container.append(img);
        }

至

if(image.link) {
          var link = $('<a rel="lightbox" href="'+ image.link +'" target="_blank"></a>');
          link.append(img);
          img_container.append(link);
        } else {
         var link = $('<a href="'+ image.image +'" rel="lightbox" class="lightbox"></a>');
         link.append(img);
          img_container.append(link);
        }

但当我点击大图时，什么也没有发生。

我的html中确实有以下代码：

$(function() {
   $('#gallery a').lightBox();
});

我错过了什么？

Answer 1

而不是：

$(function() {
$('#gallery a').lightBox();
});

使用：

$(function() {
$('a.lightbox').each(function () { $(this).lightBox(); });
});

这可以防止lightbox在div中显示其他图形的“下一步”选项，并防止lightbox附加到缩略图上。

因为当您更改图像时，ad-gallery会刷新ad-image div内容，因此还会添加

$('a.lightbox').each(function () { $(this).lightBox(); });

在jquery.ad-gallery.js中的_showWhenLoaded:函数的末尾，以便在选择每个图像时将lighbox事件附加到该图像。

Answer 2

我自己费了很大的劲才让它工作起来。

这个想法是将幻灯片中的主图像弹出到大的lightbox弹出窗口。

需要解决的问题包括：

lightbox查找现有的元素并生成一个图像数组，但在这里我们一次只处理一个动态项。我们希望lightbox找到的动态元素是动态的，所以我们需要使用一些动态的jQuery方法，而不是默认的方法。我们希望lightbox知道幻灯片中的所有图像，即使它只找到一个主图像。我们希望lightbox找到与图像相关联的文本。

要解算，请执行以下操作：

请确保将大弹出窗口的路径放在拇指的longdesc属性中，这样广告图库就会将它们放在幻灯片图像周围的href属性中，lightBox就会找到它们

使用广告画廊中的回调为每张幻灯片调用lightbox load。

        $(function() {

            gallery1 = $('#gallery1').adGallery( 

                         { 
                            callbacks: 
                                {afterImageVisible: 
                                   function(){

                //lightBox loading stuff here

                dynamically find the title text and put it into the title of the link so lightBox can use it
                if( this.images[ this.current_index ].title )
                {
                        $(document).find( '.ad-image a' ).attr('title', this.images[ this.current_index ].title ); 
                }

                //use jQuery find to get the dynamic element then apply lightBox to it
               $(document).find( '#gallery1 .ad-image a' ).lightBox({ imageArray: aImagesFullSizeLightBox, fixedNavigation: true });

                //note, the "imageArray: aImagesFullSizeLightBox". This was my code addition to lightBox, which allowed me to tell lightBox what the imageArray is rather than trying to find them itself. You need to construct this array beforehand (see example below) in the correct format for lightBox to use, and you need to make code changes to lightBox to tell it to use it.



                                          } 
                             }  
                      });

    }

///////////////////////////////////////////////////////////////////////////////

//example array to pass to lightBox, make sure the above function can see it

var aImagesFullSizeLightBox = [];

aImagesFullSizeLightBox.push( new Array( '/images/bigPopupImage1.jpg','The Title Here 1') );

aImagesFullSizeLightBox.push( new Array( '/images/bigPopupImage2.jpg','The Title Here 2') );


//////////////////////////////////////////////////////////////////////////////////////

//code changes needed to lightBox (this was done to version 0.5 which may be old now!)

$.fn.lightBox = function(settings) {

        //addition to support next and backs without lightbox taking control of   clicks on thumbs 3/6/2012 Gordon Rouse
        if( settings.imageArray )
            settings.setImagesExternally = true;
        else
            settings.setImagesExternally = false;

/////ALSO////////////////////////////////////////////////////////////


function _start(objClicked,jQueryMatchedObj) {

            $('embed, object, select').css({ 'visibility' : 'hidden' });

            _set_interface();

            // Unset total images in imageArray
            //addition to support next and backs without lightbox taking control of clicks on thumbs - Gordon Rouse
            if ( !settings.setImagesExternally )
                settings.imageArray.length = 0;

            //settings.imageArray.length = 0;  //undo line for above!

            settings.activeImage = 0;

                        //here we stop lighBox trying to load the images it found
            if (!settings.setImagesExternally )
            {
                if ( jQueryMatchedObj.length == 1 ) {
                    settings.imageArray.push(new Array(objClicked.getAttribute('href'),objClicked.getAttribute('title')));
                } else {
                    // Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references        
                    for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
                        settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
                    }
                }
            }

///////////////////////////////////////////////////////

这里有一个这样工作的例子：

http://www.vikingkayaks.co.nz/shop/kayaks?product=1

但请注意，在这个例子中还有其他复杂的东西，所以我试图提炼出上面描述中的重要部分。