Я сам получил это с большим трудом.
Идея заключается в том, что основное изображение в слайд-шоу всплывает в большом всплывающем окне лайтбокса.
Решаемые проблемы:
Лайтбокс ищет существующие элементы и создает массив изображений, но здесь у нас есть только один динамический элемент для работы за раз.
Динамический элемент, который мы хотим найти в лайтбоксе, является динамическим, поэтому нам нужно использовать некоторый динамический метод jQuery, а не метод по умолчанию.
Мы хотим, чтобы лайтбокс знал обо всех изображениях в слайд-шоу, даже если он найдет только одно основное изображение.
Мы хотим, чтобы лайтбокс нашел текст, связанный с изображениями.
Решить:
Убедитесь, что вы указываете путь к большим всплывающим окнам в атрибуте longdesc у thumbs. Таким образом, ad-gallery поместит их в атрибут 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
но обратите внимание, что в этом примере есть и другие сложные вещи, поэтому я попытался выделить важные части в приведенном выше описании.