나는 큰 어려움을 겪고있다.
슬라이드 쇼의 주 이미지가 큰 라이트 박스 팝업으로 나타나는 것이 좋습니다. 해결하기
이슈는 다음과 같습니다
라이트는 기존의 요소를 검색하고 이미지의 배열을 만들지 만, 여기에 우리가 한 번에 작업 할 수있는 하나 개의 동적 항목이있다. 라이트 박스에서 찾을 동적 요소는 동적이므로 기본 메서드가 아닌 동적 jQuery 메서드를 사용해야합니다. Lightbox가 하나의 메인 이미지 만 찾을지라도 슬라이드 쇼의 모든 이미지를 알기를 원합니다. 라이트 박스가 이미지와 관련된 텍스트를 찾길 원합니다.
해결하려면
당신이 엄지 손가락의의 longdesc 속성에 큰 팝업의 경로를 넣어 있는지 확인하십시오, 그런 식으로 광고 갤러리 슬라이드 이미지 주변의 href 속성에 넣어, 그리고 라이트 박스 것이다 것 그들을 찾으십시오
광고 갤러리에 콜백을 사용하여 모든 슬라이드에 라이트 박스로드를 호출하십시오.
http://www.vikingkayaks.co.nz/shop/kayaks?product=1
을하지만,이 예에서는 다른 복잡한 일들이 있습니다주의, 그래서 나는 위의 설명에서 중요한 부분을 증류하는 것을 시도했다 :
$(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')));
}
}
}
///////////////////////////////////////////////////////
이 작업의 예
여기에서 찾을 수 있습니다.