jQuery 라이트 박스 또는 이에 상응하는 이미지 배열

Question

Lightbox 스타일 갤러리를 구현하려고하는데 텍스트 링크를 클릭하면 페이지의 인라인 콘텐츠가 아닌 배열에서로드 된 이미지의 슬라이드 쇼가 실행됩니다. 내가 찾을 수있는 모든 예는 어떻게 든 관련되어있는 인라인 이미지 그룹을 사용합니다 (예 : rel 태그 또는 클래스 사용). Javascript 배열에서 경로를 사용하여 이미지를 정의하고 싶습니다.

누구나 해결책을 알고 있습니까? TIA.

Answer 1

다음은 플러그인 사이트에서 다운로드 할 수있는 예제와 작동합니다.

데모 here

$(function() { 
     $('#testLink').click(dynamicLightBoxinit); 
    }); 

    function dynamicLightBoxinit(){ 
     images = ["photos/image1.jpg", "photos/image2.jpg","photos/image3.jpg","photos/image4.jpg","photos/image5.jpg"]; 
     var imageBuilder=''; 
     for (var i = 0; i < images.length; i++) { 

      imageBuilder += '<a href="'+images[i]+'"><img src="'; 
      imageBuilder += images[i]; 
      imageBuilder += '" \></a>'; 
      } 

      var lb = $(imageBuilder); 
      lb.lightBox(); 
      lb.filter('a:first').click(); 
     } 

Answer 2

나는 당신이 뭘하고 있는지 확실하지 않지만,이게 당신이 찾고있는 것입니까?

images = ["path1.jpg", "path2.jpg"]; 
for (var i = 0; i < images.length; i++) 
    { 
    var img = new Image(); 
    img.src = images[i]; 
    images[i] = img; 
    } 

이미지 개체에 대한 URL 대체가 적절하지 않지만 쓰기가 더 짧습니다.

src 속성이 설정되면 이미지가 브라우저에 의해로드되고 일반 DOM 조작에 따라 모든 HTML 컨테이너에 이미지를 추가 할 수 있습니다.

HTH.