Lightbox Jquery on click 다음 이미지

Question

freewall 및 featherlight 플러그인을 사용하여 라이트 박스로 열리는 반응 형 갤러리를 만들었지 만 라이트 박스에서 다음 이미지로 전환하려고 할 때 다음과 같은 문제가 있습니다. (i + 1)을 클릭하면됩니다. 라이트 박스 이미지 코드 enter image description here. 내가하고 싶은 일은 img src를 i + 1로 변경하여 클릭시 다음 이미지로 이동하는 것입니다. 수동으로 이미지를 클릭에 다음의 요소를 트리거해야 https://github.com/adamianniello/adamianniello.com/blob/master/B%C3%A6b%C3%A6l%C9%99n_Pasadena.html

\t \t <script type="text/javascript"> 
 

 
\t \t \t var temp = "<div class='brick' style='width:{width}px;'><a href='#' data-featherlight='i/jpl/{link}.jpg'><img src='i/jpl/{index}.jpg' width='100%'></a></div>"; 
 
\t \t \t var w = 1, h = 1, html = '', limitItem = 54; 
 
\t \t \t for (var i = 0; i < limitItem; ++i) { 
 
\t \t \t \t w = 1 + 3 * Math.random() << 0; 
 
\t \t \t \t html += temp.replace(/\{width\}/g, w*150).replace("{index}", i + 1).replace("{link}",i + 1); 
 

 
\t \t \t } 
 
\t \t \t $("#freewall").html(html); 
 

 
\t \t \t var wall = new Freewall("#freewall"); 
 
\t \t \t wall.reset({ 
 
\t \t \t \t selector: '.brick', 
 
\t \t \t \t animate: true, 
 
\t \t \t \t cellW: 150, 
 
\t \t \t \t cellH: 'auto', 
 
\t \t \t \t onResize: function() { 
 
\t \t \t \t \t wall.fitWidth(); 
 
\t \t \t \t } 
 
\t \t \t }); 
 

 
\t \t \t var images = wall.container.find('.brick'); 
 
\t \t \t images.find('img').load(function() { 
 
\t \t \t \t wall.fitWidth(); 
 
\t \t \t });

<div id="freewall" class="free-wall"></div>

Answer 1

:

은 또한 이해하는 데 도움이 될 Github에서에이 프로젝트가있다. 다음과 같이하십시오.

다음 이미지를 표시하기 위해 깃털을 트리거하는 기능. 나는 .brick a css selector를 사용하여 featherlite를 초기화한다고 가정했다. 원하는대로 변경하십시오. 이 함수는 다음 a 태그 data-featherlight을 빌드하고 그 위에 featherlight를 호출합니다.

function showNextImage(i) { 
    $('.brick a').featherlight('i/jpl/' + (((i +1) % (limitItem + 1))) + '.jpg'); 
} 

현재 i으로 함수를 호출하기 위해 사업부에 onclick을 추가합니다.

var temp = "<div class='brick' style='width:{width}px;' onclick='showNextImage({index})'> <a href='#' data-featherlight='i/jpl/{link}.jpg'><img src='i/jpl/{index}.jpg' width='100%'></a></div>"; 
     var w = 1, h = 1, html = '', limitItem = 54; 
     for (var i = 0; i < limitItem; ++i) { 
      w = 1 + 3 * Math.random() << 0; 
      html += temp.replace(/\{width\}/g, w*150).replace("/\{index\}/g", i + 1).replace("{link}",i + 1); 

     } 
     $("#freewall").html(html);