자동 jQuery FancyBox를 실행하는 캐 러셀

저는 프로젝트에서 일하는 웹 디자이너입니다. jQuery가 필요한 아이디어가 있습니다. jQuery에 대한 경험이 상당히 기초적이므로, 필자는 내가 필요한 것에 대해 최선의 선택 방안이 무엇인지 물어볼 것이라고 생각했다.자동 jQuery FancyBox를 실행하는 캐 러셀

프로젝트의 홈 페이지에 섹션이 있습니다. 나는 똑같이 간격을 두는 이미지의 "벽"을 갖고 싶다. 페이지가로드되면 첫 번째 이미지 (왼쪽 상단)가 Fancybox 또는 Lightbox의 기능처럼 앞으로 확대/축소됩니다. 그러면 이미지가 벽으로 돌아가고 행의 다음 이미지가 "확대/축소"됩니다. 사용자가 이미지 중 하나를 클릭하거나 클릭하지 않으면 이론적으로 영원히 계속됩니다.

어떻게 수행 할 수 있을까요?

감사합니다.

은 "벽"의 예제 이미지는 아래 링크 :

http://i25.tinypic.com/28vejk8.png

출처

2009-08-24 Anonymous

내가 하나의 병목 내가 공격 사실을 알 수 있습니다 jCarousel Lite 및 prettyPhoto와 같은 것을 구현했다 (그리고하지 않았다면서 prettyPhoto 플러그인의 일부를 다시 작성하기위한 해결책을 찾지 못함)은 회전식 슬라이드 쇼로 이미지가 이동하면서 prettyPhoto가 생성 된 갤러리의 요소를 잃어 버리는 것이 었습니다. 또한 prettyPhoto() 호출을 사용하여 갤러리를 다시 초기화하려고 할 때 prettyPhoto가 이미 이미지를 반복하거나 단순히 누락시킨 것처럼 기존 갤러리에 추가하는 작업을 마쳤습니다.

나는 이것이 해결책이 아니라, 당신이 진보 할 때 명심할 가치가있는 것임을 깨달았다. jCarousel Lite에는 자동 재생 기능이 내장되어 있으며 현재 이미지가 변경 될 때 실행되는 이벤트가 있습니다. 마찬가지로, 좋은 라이트 박스는 일부 콘텐츠가있는 윈도우를 수동으로 생성하는 API를 갖습니다. 변경 이벤트를 라이트 박스의 수동 호출과 결합하면 원하는 것을 신속하게 생성 할 수 있습니다. 다음은

출처

2009-08-24 22:16:38

http://jsajax.com/Articles/jquerycarouselprettyphoto/1438

당신이 필요합니다.

<script type="text/javascript"> 
$(function() { 
    $('#listimg').jcarousel(); 
    $('.gallery a[rel^="prettyPhoto"]').prettyPhoto({theme: 'dark_rounded'}); 
}); 
</script>

...

<div id="container"> 
    <div id="grid"> 
    <div id="listimg" class="jcarousel-skin-tango"> 
     <ul class="picturelist gallery clearfix"> 

     <li class="thumb"> 
      <a href="http://www.youtube.com/watch?v=Sosele6QlWo" 
      title="# 今、風の中で - 平原綾香" rel="prettyPhoto[YouTube]"> 
      <img src="http://i4.ytimg.com/vi/Sosele6QlWo/default.jpg" alt="" /> 
      </a>  
     </li>

...

 </ul>     
    </div> 
    </div> 
</div>

출처

2011-10-26 18:55:41 Andy

<script> 
$(window).load(function() { 
    $(".galery_div").each(function() 
    { 
     $(this).jCarouselLite({ 
    auto: 10000, 
    speed: 1000, 
    visible: 4, 
    width:200, 
    height:140, 
    easing:'easeOutExpo', 
    }).removeClass('hidden_d'); 
    $('a.gallery').on().fancybox({ 
     'transitionIn'  : 'elastic', 
     'transitionOut'  : 'elastic', 
     //'transitionIn'  : 'none', 
     //'transitionOut'  : 'none', 
     'titlePosition'  : 'over', 
     'titleFormat'  : 
     function(title, currentArray, currentIndex, currentOpts) { 
     return '<span id="fancybox-title-over">Изображение ' + (currentIndex + 1) + '/' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';} 
    }); 
    }); 
    }); 
</script>

출처

2014-12-20 14:16:09 ruservic

자동 jQuery FancyBox를 실행하는 캐 러셀

답변

관련 문제