href를 사용하는 Fancybox2 그룹

Question

Fancybox 1에서 버전 2로 전환 한 후 그룹화가 더 이상 작동하지 않습니다. 다음 HTML을 가지고 있습니다 :

<a id="preview_1" class="preview" rel="xxl" href="this.php?picNo=1"> 
    <img id="previewImage_1" class="previewImage" src="1.jpg" /> 
</a> 
<a id="preview_2" class="preview" rel="xxl" href="this.php?picNo=2"> 
    <img id="previewImage_2" class="previewImage" src="2.jpg" /> 
</a> 
.... 

위의 URL로 Fancybox에서 표시 할 이미지의 URL을 사용하지 않습니다. 자바 스크립트를 사용하지 않는 사용자에게 적절한 대체 수단을 제공하고자하기 때문입니다. 대신이 코드를 사용하여 fancybox를 만들 : 내가 링크 중 하나를 클릭하면이 Fancybox 1에서 잘 작동

$("a.preview").each(function() { 
    var imgID = this.id.replace("preview_", ""); 
    $(this).fancybox({ 
    "href": imageURL[imgID], // this array is set somewhere else 
    "type": "image", 
    }); 
}); 

나는 이미지의 그룹을 던져 클릭 할 수 있도록 Fancybox는 화살표를 보여줍니다. 그러나 Fancybox 2에서는 이미지가 더 이상 그룹화되지 않습니다. 링크 중 하나를 클릭하면이 그룹의 다른 이미지가 아닌 관련 이미지 만 표시됩니다 (동일한 "rel"을 가짐).

이 문제를 해결할 수 있습니까?

Answer 1

.each() 메서드를 사용하여 요소를 fancybox (v2.x)에 바인딩하는 동안 각 요소를 그룹으로 바인딩합니다.

정확히 무슨 일이 일어나는지 말해 줄 스크립트를 완전히 분석하지 못했습니다.

는하지만 내가 말할 수있는 것은 당신이 완전히 .each() 방법을 드롭하고 동적으로 beforeLoad 콜백 내에서 imgID의 가치를 얻을 수 있다는 것입니다. 다음과 같은 배열에서 해당 href을 설정하십시오 우리가 0

시작 자바 스크립트 인덱스 이후 ID에 빼기1 필요

jQuery(document).ready(function ($) { 
    $("a.preview").fancybox({ 
     beforeLoad: function() { 
      var imgID = $(this.element).attr("id").replace("preview_", "") - 1; 
      this.href = imageURL[imgID]; 
     }, 
     type: "image" 
    }); 
}); // ready 

공지 사항JSFIDDLE

참고 :이, 그러나 그것은 적절한 콜백 및 선택기를 사용하여 fancybox의 v1.3.4와 동일하게 작동 fancybox의 버전 2.x를위한 것입니다

jQuery(document).ready(function ($) { 
    $("a.preview").fancybox({ 
     onStart: function (currentArray, currentIndex) { 
      var imgID = $(".preview").eq(currentIndex).attr("id").replace("preview_", "") - 1; 
      this.href = imageURL[imgID]; 
     }, 
     type: "image" 
    }); 
}); // ready 

이 JSFIDDLE