Jquery灯箱不适用于AdGallery

2 回答

• 4

  代替：

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

  使用：

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

  这可以防止灯箱向div中的其他图形显示“下一步”选项，结果很奇怪，并防止灯箱附加到缩略图上 .

  由于广告库会在您更改图片时刷新广告图片div内容，因此也请添加

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

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

  回复于 2024-04-28T18:10:17+08:00
• 2

  我自己很难解决这个问题 .

  想法是幻灯片中的主要图像弹出到大型灯箱弹出窗口 .

  要解决的问题是：

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

  要解决：

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

  使用广告库中的回调为每张幻灯片调用灯箱加载 .

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

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

  回复于 2024-04-28T18:10:17+08:00