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 中的几行代码：

from

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 会刷新广告图像 div 内容，因此还要

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

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

Answer 2

我本人是费了很大的劲才做到这一点的。

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

要解决的问题是：

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

解决方法：

确保将大弹出窗口的路径放在拇指的 longdesc 属性中，这样 ad-gallery 会将它们放在幻灯片图像周围的 href 属性中，并且 lightBox 会找到它们

使用 ad- 中的回调图库为每张幻灯片调用灯箱加载。

        $(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

但请注意，此示例中还有其他复杂的内容，因此我尝试提取上述描述中的重要部分。