jquery Roundabout with Facebox 통합

Question

Roundabout을 사용하여 포트폴리오에 "추천 항목"섹션을 만들려고합니다. 또한 Facebox을 첨부하여 사용자가 원형 교차로 항목 중 하나를 클릭 할 때 숨겨진 div가 모달 창에서 팝업되도록합니다. 그게 다 잘되고 잘 됐어.

내 문제는 포커스 항목뿐만 아니라 모든 항목을 클릭 할 수 있다는 점입니다. 회전 목마를 돌리려고 할 때 Facebox가 활성화됩니다 (사물을 회전시키기 위해 클릭 할 수있는 아주 작은 영역이 있지만 웹 사이트 방문자는 찾을 수없는 인내심을 가지고 있습니다.) 초점이 맞지 않는 항목의 링크를 비활성화하여 앞쪽 항목 만 클릭 할 수 있도록하여 회전식을 돌릴 수있는 방법을 찾아야합니다.

<script> 
$(document).ready(function() { 
    $('ul#myRoundabout').roundabout(); 
    $('a[rel*=facebox]').facebox(); 
}); 
</script> 

가 여기에 HTML의 :

여기 내 스크립트의

<ul id="myRoundabout"> 
     <li><a href="#bp" rel="facebox"><img src="images/ft/bp_ft.jpg" alt="Open house site" /></a></li> 
     <li><a href="#me" rel="facebox"><img src="images/ft/me_ft.jpg" alt="Personal website" /></a></li> 
     <li><a href="#wct" rel="facebox"><img src="images/ft/wct_ft.jpg" alt="Travel agency site" /></a></li> 
     <li><a href="#zen" rel="facebox"><img src="images/ft/zen_ft.jpg" alt="CSS Zen Garden" /></a></li> 
    </ul> 

    <!-- hidden divs to call--> 
    <div id="bp" style="display:none;"> 
     <h3 class="box">Websites &gt; BP Community Open House</h2> 
     <img class="box" src="images/gallery/bp_lg.png" /> 
    </div> 
    <div id="me" style="display:none;"> 
     <h3 class="box">Websites &gt; kitkatkookoo designs</h2> 
     <img class="box" src="images/gallery/me_lg.png" /> 
    </div> 
    <div id="wct" style="display:none;"> 
     <h3 class="box">Websites &gt; World Culture Tours</h2> 
     <img class="box" src="images/gallery/wct_lg.png" /> 
    </div> 
    <div id="zen" style="display:none;"> 
     <h3 class="box">Websites &gt; CSS Zen Garden</h2> 
     <img class="box" src="images/gallery/zen_lg.png" /> 
    </div> 
    <!-- end hidden divs--> 

내가 관련 질문 here을 발견했다. 작업 솔루션은 스크립트에 추가 라인을했다 : 나는 Fancybox하지 Facebox위한 실현

$('ul.image-gallery .roundabout-in-focus a').live('click',function(event){event.preventDefault();$.fancybox({'href':$(this).attr('href')});}) 

하지만 소녀는 희망 할 수 있습니다. 내 요구에 맞게 편집하려고 시도했습니다.

$('ul#myRoundabout .roundabout-in-focus a').live('click',function(event){event.preventDefault();$.facebox({'href':$(this).attr('href')});}) 

그러나 js에 대한 제한된 지식으로 인해 나는 실패했습니다. 그것을 믹스에 던지면 Facebox를 완전히 종료 할 수있었습니다. 나는 그것이 이미지 대신 div를 사용한다는 사실과 관련이 있다고 생각하지만, 코드를 어떻게 적용 할 것인지 모른다.

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

---

편집 :

this post을 읽은 후 나는 내가에 초점 항목을 활성화하기 위해 뒤쪽으로 일할 수 있도록, 내 로터리에있는 모든 링크를 비활성화했습니다. 그러나 또 다른 한개는 간다; 모든 것이 여전히 클릭 가능했습니다. 아직

$('ul#myRoundabout roundabout-in-focus a').unbind('click.facebox'); 

확실하지 않은 잘못 여기에 무슨 일이 일어나고 있는지 :

이

내가 내 스크립트 태그에 추가하는 시도 코드입니다.

---

편집 2 : 여기에 창의력을 시도

. 나는 내 <script> 태그에 다음과 같은 내 링크에서 rel=facebox을 삭제하고, 추가 :

$('ul#myRoundabout li').focus(function(){ 
    $('ul#myRoundabout .roundabout-in-focus a').attr('rel','facebox'); 
}); 

이 나의 희망은 링크가에 초점했다 때까지 facebox를 확인해, 그래서 facebox의 같으면 '하지 않을 것이라고했다 초점이 맞지 않을 때 시작합니다. 다시 한번, 그런 행운. 이 방법은 facebox를 종료하므로 전혀 실행되지 않습니다. 나는 대답의 주위에 여기 서클에서 춤추고있는 것처럼 느껴진다. ..

Answer 1

내가 (하지만 그냥하지 Facebox와 링크) 매우 비슷한 문제가, 코드의 다음 비트를 사용하여 해결하기 위해 운영되었다 : 기본적으로이 그것을 만드는

function outOfFocus(event){ 
    $(event.target).children("a").on("click",function(event) 
     {event.target.parent.go(event)}); 
     }; 

function intoFocus(event){ 
    $(event.target).children("a").off("click"); 
    }; 

$(".roundabout-moveable-item").live('blur',outOfFocus); 
$(".roundabout-moveable-item").live('focus',intoFocus); 

을 때 아이템 있도록 뒤쪽으로 이동하면 모든 링크가 클릭 이벤트를 상위 페이지로 전달합니다 (따라서 원형 교차로는 계속 작동 함). 항목이 앞으로 이동하면 '포커스'이벤트가 트리거되고 브라우저가 정상 링크로 처리하도록 특수 무시하는 클릭이 제거됩니다.

내가 말했듯이, 당신의 상황에 맞는 것은 아닙니다. 왜냐하면 intoFocus 메소드가 Facebox를 다시 활성화해야 할 필요가 있기 때문입니다. 당신은 뭔가를 할 수 있습니다

function intoFocus(event){ 
    $(event.target).children("a").facebox(); 
    }; 

단지에 대한 링크를 다시 Facebox이-itize. 링크에 중복 핸들러와 속성을 추가 할 가능성이 있으므로주의해서 확인하십시오.

희망 사항은 다소 도움이되기를 바랍니다.