Fancybox 여러 갤러리 문제

Question

내가 여기이 Fancybox 예에서 수행 같은 일을 수행하려고 : 나는 모든 링크에 대한 두 번째 갤러리를 열고 유지를 수행 할 때 http://jsfiddle.net/jekAe/

합니다.

내 JS를 : 여기에 내가 가진 무엇

$(document).ready(function() { 
var images = { 
    1: [ 
     { 
      href : 'images/1.jpg',     
     }, 
     { 
      href : 'images/2.jpg',     
     }, 
     { 
      href : 'images/3.jpg',     
     }, 
     { 
      href : 'images/4.jpg',     
     }, 
     { 
      href : 'images/5.jpg',     
     } 
    ], 
    2: [ 
     { 
      href : 'images/6.jpg',     
     }, 
     { 
      href : 'images/7.jpg',     
     }, 
     { 
      href : 'images/8.jpg',     
     }, 
     { 
      href : 'images/9.jpg',     
     }, 
     { 
      href : 'images/10.jpg',     
     } 
    ], 
    3: [ 
     { 
      href : 'images/11.jpg',     
     }, 
     { 
      href : 'images/12.jpg',     
     }, 
     { 
      href : 'images/13.jpg',     
     } 
    ] 
}; 

$(".open_fancybox").click(function() { 
    $.fancybox.open(images[ $(this).index() + 1], { 
     padding : 0 
    }); 

    return false; 
}); 
}); 

내 HTML :

<a class="open_fancybox" href="images/1.jpg"><img src="images/services-bg-01.jpg" alt="" width="290" height="140" class="services-bg" /></a> 
<a class="open_fancybox" href="images/6.jpg"><img src="images/services-bg-02.jpg" alt="" width="290" height="140" class="services-bg" /></a> 
<a class="open_fancybox" href="images/11.jpg"><img src="images/services-bg-03.jpg" alt="" width="290" height="140" class="services-bg" /></a> 

내가 잘못 여기서 뭘하는지 모르겠어요. jQuery에 대한 샘플 코드에서 jQuery를 거의 모르는 상태에서 3 개 갤러리에서 똑같은 작업을 수행 할 수 있다고 생각했지만 그렇게하지는 않았습니다.

아무 링크를 클릭해도 항상 두 번째 갤러리가 열립니다.

Answer 1

각 이미지에 개별/고유 클래스를 부여한 다음 fancybox를 각 새 클래스마다 하나씩 3 번 선언해야합니다.

Answer 2

아마 이런 일을하는 가장 좋은 방법은 아니지만 위의 사람이 권장 한 일을 한 것 같습니다. 여기에 내가했던 일이야 :

$(".open_fancybox1").click(function() { 
    $.fancybox.open(images[ $(this).index() + 0], { 
     padding : 0 
    }); 

    return false; 
}); 
$(".open_fancybox2").click(function() { 
    $.fancybox.open(images[ $(this).index() + 1], { 
     padding : 0 
    }); 

    return false; 
}); 
$(".open_fancybox3").click(function() { 
    $.fancybox.open(images[ $(this).index() + 2], { 
     padding : 0 
    }); 

    return false; 
}); 

<a class="open_fancybox1" href="images/1.jpg"><img src="images/services-bg-01.jpg" alt="" width="290" height="140" class="services-bg" /></a> 
<a class="open_fancybox2" href="images/6.jpg"><img src="images/services-bg-02.jpg" alt="" width="290" height="140" class="services-bg" /></a> 
<a class="open_fancybox3" href="images/11.jpg"><img src="images/services-bg-03.jpg" alt="" width="290" height="140" class="services-bg" /></a> 

Answer 3

은 어쩌면 당신은 같은 fancybox 3 회를 선언 할 필요가 없습니다 제안 : 당신이 더 많은 갤러리를 추가하기로 결정하면 무엇? 매번 새로운 스크립트를 추가하고 싶지 않습니까?

.each()를 사용하여 당신에게 여행을 절약 할 수 있습니다 : 예에서

$(".open_fancybox").each(function (i) { 
    $(this).on("click", function() { 
     $.fancybox.open(images[i + 1], { 
      padding: 0 
     }); 
     return false; 
    }); 
}); 

JSFIDDLE

Answer 4

난 당신이 포함 된 코드를 사용하여 문제의 바이올린을 만들어 볼 수 있지만 이미지를 fiddle-이 나타납니다 당신이 원하는대로 일하십시오. 내가 믿는

http://jsfiddle.net/YqLhw/

문제는 실제로 <a> 태그가 <li> 태그 다음 예를 들어 인덱싱 나누기에 감싸 인 경우에 당신이 잘

<a class="open_fancybox" href="images/1.jpg"><img src="images/services-bg-01.jpg" alt="" width="290" height="140" class="services-bg" /></a> 
<a class="open_fancybox" href="images/6.jpg"><img src="images/services-bg-02.jpg" alt="" width="290" height="140" class="services-bg" /></a> 
<a class="open_fancybox" href="images/11.jpg"><img src="images/services-bg-03.jpg" alt="" width="290" height="140" class="services-bg" /></a> 

작품을 포함하지만,하지 않은 코드에있다.

<li><a class="open_fancybox" href="images/1.jpg"><img src="images/services-bg-01.jpg" alt="" width="290" height="140" class="services-bg" /></a></li> 
<li><a class="open_fancybox" href="images/6.jpg"><img src="images/services-bg-02.jpg" alt="" width="290" height="140" class="services-bg" /></a></li> 
<li><a class="open_fancybox" href="images/11.jpg"><img src="images/services-bg-03.jpg" alt="" width="290" height="140" class="services-bg" /></a></li> 

는 내가 무슨 일이 일어나고 가정하는 것은

$(".open_fancybox").click(function() { 
$.fancybox.open(images[ $(this).index() + 1], { 

하는 것은 각 개인 <li>에서 <a> 태그의 수에 따라 다음 각 1.

내 초기 솔루션의 인덱스를 할당 색인을 생성한다는 것입니다 .open_fancybox 클래스를 <a>에서 상위 <li> 요소로 이동하는 것이 었습니다.

나중에 구현 한 결과 내 .open_fancybox 클래스가없는 다른 <li> 요소가 색인에 포함되어 더 많은 문제가 있음을 알았습니다.

간단히 자동 $(this).index()을 $(this).data("galnum")으로 변경하고 각 연결된 갤러리 요소에 대해 수동으로 data-galnum=#을 설정하기로 결정했습니다. 내 마지막 코드는 비트 다음과 같습니다

<li class="open_fancybox" data-galnum="1"><a href="images/1.jpg"><img src="images/services-bg-01.jpg" alt="" width="290" height="140" class="services-bg" /></a></li> 
<li class="open_fancybox" data-galnum="2"><a href="images/6.jpg"><img src="images/services-bg-02.jpg" alt="" width="290" height="140" class="services-bg" /></a></li> 
<li class="open_fancybox" data-galnum="3"><a href="images/11.jpg"><img src="images/services-bg-03.jpg" alt="" width="290" height="140" class="services-bg" /></a></li> 

내가 그 필요는 없지만 <li> 요소에 .open_fancybox 클래스를 유지하기로 결정했습니다. 이 솔루션은 <a>을 감쌌지만 여기에 포함시키지 않은 아이디어에 달려 있습니다. 너 내가 미안하다면 도움을 줄 수 없다. 나는 이것을 내가 여기에 넣을 거라고 생각했다. (또는 내가했던 것과 똑같은 실수를 한 사람들을 위해서). 나는 Javascript/JQuery에 대해 전혀 이해하지 못 했으므로 이것을 알아 냈다. 나는이 문제를 다룰 수있는 다른 방법이 있다고 확신한다. 이 솔루션은 저에게 가장 간단하며 제 구현에서 작동합니다.