2012-04-12 4 views
11

나는 원래의 문제를 해결했지만보다 우아한 해결책이 있는지 궁금합니다. 저는 재단의 궤도를 사용하여 슬라이드 쇼를 만듭니다. 이것은 간단한 슬라이드 쇼가 아니며 각 슬라이드에 정의 된 데이터 캡션이있는 슬라이드 쇼이며이 데이터 캡션에는 모달 대화 상자를로드해야하는 HTML이 있습니다.초기화 기능을 궤도 슬라이드 쇼에 전달하는 방법이 있습니까?

Foundation을 사용하는 경우 Reveal 라이브러리를 사용하여 모달 대화 상자를 표시하는 방법에 대해 즉시 생각해 보겠습니다. 그렇지만 요구 사항은 prettyPhoto를 사용하도록 요구합니다. (. 사람들은 요구 사항이다) 그런데 문제는 데이터 자막의 요소가 원래 초기화 호출에 의해 영향을받지 않는 것입니다 : 나는 각 데이터를 초기화 할 수 있는지 확인하기 만하면 무엇

$("a[rel^='prettyPhoto']").prettyPhoto();

캡션이로드 될 때. 음, 문제가 있습니다. afterSlideChange 이벤트를 사용하여 슬라이드 전환을 위해이 문제를 해결했지만 문제는 첫 번째 슬라이드입니다. 표시되는 첫 번째 슬라이드에 대해이 메서드를 호출해야합니다. 그 코드를 복제 할 필요없이이 작업을 수행 할 수있는 더 나은 방법이 있나요

<script type="text/javascript"> 
$(window).load(function() { 
    $('#featured').orbit({ 
     afterSlideChange:function() { 
      $("a[rel^='prettyPhoto']").prettyPhoto({ 
       default_width:640, 
       default_height:500, 
       theme:'light_square' 
      }); 
     }, // empty function 
     fluid:true       // or set a aspect ratio for content slides (ex: '4x3') 
    }); 
    $("a[rel^='prettyPhoto']").prettyPhoto({ 
     default_width:640, 
     default_height:500, 
     theme:'light_square' 
    }); 
}); 
</script> 

:

다음은이 문제를 해결 코드입니다. 내 자신의 "initializeSlide"이벤트를 정의해야합니까, 아니면 제가 누락 된 일부 대답이 있습니까?

+0

해결 방법을 찾으셨습니까? –

답변

3

궤도 슬라이더는 많은 방법을 노출하지 않습니다. 다행히도 몇 가지 간단한 해결 방법이 있습니다.

예를 들어, 다음과 같이 설정할 수 있습니다 :

여기
$(window).load(function() { 
    var sliderChanged = (function sliderChanged(prevActive, active) { 
     $("a[rel^='prettyPhoto']").prettyPhoto({ 
      default_width: 640, 
      default_height: 500, 
      theme: 'light_square' 
     }); 
     return sliderChanged; 
    }()); 
    jQuery('#featured').orbit({ 
     afterSlideChange: sliderChanged, 
     fluid: true 
    }); 
}); 
+0

내 원래 질문은 http://stackoverflow.com/questions/16720069/how-to-get-the-callback-of-onload-event-for-orbit-slider-of-foundation-zurb-fram이었습니다. 나는 유사점을 보았 기 때문에 여기서 현상금을 시작하기로 결정했고, 제 질문에 그것을 시작하기 위해 2 일을 기다려야했습니다. 제 원래 질문을 보시기 바랍니다. 나는 당신이 말한 것을 적용하려했지만 그것을 고칠 수는 없었습니다. 내가 뭔가를 놓친 것 같아. 도와 줘서 고마워. –

1

난 당신이 슬라이드 변경 후 JQuery와에서

<script type="text/javascript"> 
    $(window).load(function() { 
     $('#featured').orbit({fluid:true}); 
     $("a[rel^='prettyPhoto']").load(function(){ 
     $(this).prettyPhoto({ 
      default_width:640, 
      default_height:500, 
      theme:'light_square' 
     }); 
     }); 
    }); 
</script> 
+0

@ Rohit, jQuery에 종속적 인 Orbit과 같습니다.:) – MarmiK

+0

@MarmiK 당신을 얻지 못했습니다 –

+0

자사의 궤도 프레임 워크는 jQuery없이 실행되지 않습니다 .. 그것은 하나의 종속성 .. 궤도는 또한 jQuery를 사용하고 있습니다 .. :) – MarmiK

0

당신은 사용을로드 이벤트를 사용할 수 있다고 생각

참조 궤도의 documentation

'afterSlideChange function(){}, //Empty Function for you to use after slide change' 

그래서이 호출은 함수를 비우고 다시 호출해야합니다.

지금, 제 질문은 당신이 이것을하는 이유입니다, 특별한 이유가 있습니까? 그렇지 않으면 그냥 제거하십시오.

내 인식에 따라 Rohit의 대답은 위의 나머지를 할 것입니다

...

나는이 할 것입니다 :)

0

을 재단 4 업데이트와 함께 orbit:ready 이벤트가 지금 거기 바랍니다. 슬라이더가로드되면 이벤트가 시작됩니다.