1

표현 엔진이있는 fancybox를 사용하는 데 문제가 있습니다.표현 엔진 : Fancybox + EE?

기본적으로 매트릭스 플러그인을 사용하여 다른 갤러리 설정이 있습니다. 각 갤러리에는 약 10 개의 이미지가 있습니다. 기본적으로 미리보기 이미지를 fancybox 및 fancybox를 열어 해당 매트릭스 항목/갤러리의 이미지를 스크롤 할 수있게하려고합니다.

소리는 간단하지만 이미지를 스크롤 할 때 fancybox를 가져올 수없는 것 같습니다. 첫 이미지에만 머물러 있습니다. 이것은 fancybox 템플릿 내 코드는

<ul id="image_gallery"> 
       {exp:channel:entries channel="gallery_images"} 
       <li> 
        <a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title}"> 
        {gallery_image limit="1"} 
         {exp:imgsizer:size src="{image}" width="200px" height="180px"} 
          <img src="{sized}" width="{width}" height="{height}" alt="" /> 
        {/exp:imgsizer:size} 
        {/gallery_image} 
        </a> 
        <h1>{title}</h1> 
       </li> 
       {/exp:channel:entries} 
     </ul> 

:

{exp:channel:entries channel="gallery_images"} 
<ul id="img_gallery"> 
{gallery_image} 
<li> 
    {exp:imgsizer:size src="{image}" width="650px" height="500px"} 
    <img src="{sized}" width="{width}" height="{height}" alt=""/> 
    {/exp:imgsizer:size} 
</li> 
{/gallery_image} 
</ul>{/exp:channel:entries} 

모든 이미지 스크롤을 제외하고 잘 작동

이것은 축소판 내 코드입니다.

도움을 주시면 감사하겠습니다.

+0

이것은 EE 문제가 아니므로 Fancybox 스크립트를 게시해야합니다. – Ross

답변

2

ExpressionEngine 태그의 출력을 보지 않아도 문제가 어디인지 이해하기 어렵습니다. 그러나 문제는 갤러리의 모든 이미지가 동일한 HTML relationship attribute을 공유하는지 확인하는 것처럼 간단 할 수 있습니다.

Fancybox Galleries은 같은 rel="" 속성을 공유 요소에서 생성됩니다

코드를 찾고에서
<a class="gallery" rel="set_1" href="#"><img src="1.jpg" alt=""/></a> 
<a class="gallery" rel="set_1" href="#"><img src="2.jpg" alt=""/></a> 
<a class="gallery" rel="set_1" href="#"><img src="3.jpg" alt=""/></a> 

<script> 
    $('a.gallery').fancybox(); 
</script> 

, 당신은 rel="" 특성으로 ExpressionEngine {title} 태그를 사용하고 있습니다.

채널 항목의 제목에 공백 및 다른 특수 문자가 포함되어있을 수 있으므로 URL Title 필드 인 {title_permalink}을 사용하는 것이 더 좋습니다.

{title_permalink} 태그 중 하나 하이픈을 사용하여 URL 안전로 채널 항목 제목을 변환하거나합니다 (Global Channel Preferences에 URL 제목에 대한 설정을 말씀 분리기를 사용하여) 문자 구분으로 강조한다.

업데이트 된 썸네일 코드는 다음과 같다 : 문제가 해결되지 않으면

<a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title_permalink}"> 
    <img src="{sized}" width="{width}" height="{height}" alt="" /> 
</a> 

는, 아마도 당신은 문제가 될 수있다 우리가 이해하는 데 도움이 같은 jsFiddle 또는 Pastie으로보다 완벽한 코드 샘플을 제공 할 수 있습니다 .