我自己得到这个工作很困难。
这个想法是幻灯片弹出窗口中的主要图像弹出到大型灯箱。
要解决的问题是：
收藏夹查找存在的元素，使图像阵列，但在这里，我们只有一个动态的项目在时间上下工夫。 我们希望lightbox找到的动态元素是动态的，所以我们需要使用一些动态jQuery方法而不是默认方法。 我们希望lightbox能够了解幻灯片中的所有图像，即使它只能找到一个主图像。 我们希望lightbox能够找到与图像相关的文本。
解决：
确保你把路径的大弹出窗口中，拇指的longdesc属性，这样的广告画廊将会把它们摆放在幻灯片图像href属性，和灯箱会找到它们
使用广告素材库中的回调来调用每张幻灯片的灯箱载入。
$(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
，但注意，在这个例子中其他复杂的事情，所以我试图提炼的重要组成部分在上面的描述。