jCarousel 갤러리에 대한 도움이 필요합니다. 모두

jCarousel에 약간의 문제가 있으므로 도움이 필요합니다. 여기

갤러리입니다 : http://tranzit.dir.bg/load.php?id=TdVijCkhJSrC7CkA1273310

내가 할 수있는 방법 내 질문은 스크립트 그래서 당신은 화살표의 선택기 (작은 사진에 빨간색 테두리)을 (작은 검은 색 사각형)을 클릭하면 큰 이미지 (앞뒤)가 앞으로 또는 뒤로 움직입니다. 이제 작은 이미지 만 움직이고 있습니다 ... 문제는 그렇게 크지는 않겠지 만 나는 할 수 없습니다.

예 : themeforest.s3.amazonaws.com/86_jquery/gallery.html

내 코드 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=windows-1250"> 
     <link rel="stylesheet" type="text/css" href="jcarousel_tango.css" /> 
     <link rel="stylesheet" type="text/css" href="jcarousel_showcase.css" /> 

     <script type="text/javascript" src="jquery.min.js"></script>   
     <script type="text/javascript" src="jquery.jcarousel.min.js"></script> 

    <script type="text/javascript"> 

function mycarousel_initCallback(carousel) {  
    jQuery('.jcarousel-next').click(function() { 
     jQuery('.jcarousel-item').removeClass('highliht'); 
     jQuery(this).addClass('highliht'); 

     jQuery('.jcarousel-control a').removeClass('active'); 
     jQuery('.jcarousel-control a#cnt-'+jQuery(this).attr('jcarouselindex')).addClass('active'); 
     carousel.scroll(jQuery.jcarousel.intval(jQuery(this).attr('jcarouselindex'))); 

     return false; 
    }); 

function mycarousel_initCallbackanother(carousel) { 
    jQuery('.jcarousel-skin-showcase div.jcarousel-next').click(function(){ 
      jQuery('.jcarousel-control a#cnt-1').addClass('active'); 
jQuery('#mycarousel li:first').addClass('highliht'); 
    //chage position on mycarousel 
    }); 
} 

} 

jQuery(document).ready(function() { 
    jQuery('.tabcontent a#cnt-1').addClass('active'); 
    jQuery('#mycarousel li:first').addClass('highliht'); 

    jQuery('#mycarousel').jcarousel({ 
     btnNext: ".next", 
     btnPrev: ".prev", 
     visible: 7, 
     scroll: 6, 
     initCallback: mycarousel_initCallback 
    }); 

     jQuery('#showcasecarousel').jcarousel({ 
     scroll: 1, 
     animation: 1, 
     initCallback: mycarousel_initCallback, 
     itemLoadCallback: trigger 
    }); 

    function trigger(carousel, state) 
    { 
    $("#currentImg").html(carousel.first); 
    } 

}); 
</script> 

    </head> 
    <body> 
     <div id="wrap"> 
      <div id="postcolumn"> 
       <!-- post zone --> 
       <div class="photobox"> 
        <div id="post-213" class="photopost"> 
        <div id="mycarousel" class="jcarousel-skin-tango"> 
         <ul class="photos" id="photos"> 
          <li><a class="" rel="1" href="#"><img title="" alt="" src="img/1t.jpg"></a></li> 
          <li><a class="" rel="2" href="#"><img title="" alt="" src="img/2t.jpg"></a></li> 
          <li><a class="" rel="3" href="#"><img title="" alt="" src="img/3t.jpg"></a></li> 
          <li><a class="" rel="4" href="#"><img title="" alt="" src="img/4t.jpg"></a></li> 
          <li><a class="" rel="5" href="#"><img title="" alt="" src="img/5t.jpg"></a></li> 
          <li><a class="" rel="6" href="#"><img title="" alt="" src="img/6t.jpg"></a></li> 
          <li><a class="" rel="7" href="#"><img title="" alt="" src="img/7t.jpg"></a></li> 
          <li><a class="" rel="8" href="#"><img title="" alt="" src="img/8t.jpg"></a></li> 
          <li><a class="" rel="9" href="#"><img title="" alt="" src="img/9t.jpg"></a></li> 
          <li><a class="" rel="10" href="#"><img title="" alt="" src="img/10t.jpg"></a></li> 
          <div class="clear"> 
          </div> 
         </ul> 
         </div> 
         <div class="clear"> 
         </div> 

         <ul id="showcasecarousel" class="jcarousel-skin-showcase"> 
          <li><img title="" alt="" src="img/1.jpg"></a></li> 
          <li><img title="" alt="" src="img/2.jpg"></a></li> 
          <li><img title="" alt="" src="img/3.jpg"></a></li> 
          <li><img title="" alt="" src="img/4.jpg"></a></li> 
          <li><img title="" alt="" src="img/5.jpg"></a></li> 
          <li><img title="" alt="" src="img/6.jpg"></a></li> 
          <li><img title="" alt="" src="img/7.jpg"></a></li> 
          <li><img title="" alt="" src="img/8.jpg"></a></li> 
          <li><img title="" alt="" src="img/9.jpg"></a></li> 
          <li><img title="" alt="" src="img/10.jpg"></a></li> 
         </ul> 
         Current Photo <span id="currentImg">1</span> 

        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

이 도와 주셔서 너무 감사합니다!

출처

2012-07-08 Alabala

첫째, 둘 다 회전식 콜백 메소드가 동일한 초기화 콜백 메소드를 호출하고 있습니다.이 콜백 메소드는 사용자가 의도 한 것이 아닌 것입니다. 그래서 대신 :

jQuery('#showcasecarousel').jcarousel({ 
    scroll: 1, 
    animation: 1, 
    initCallback: mycarousel_initCallback, 
    itemLoadCallback: trigger

당신은 아마 원하는 :

jQuery('#showcasecarousel').jcarousel({ 
    scroll: 1, 
    animation: 1, 
    initCallback: showcasecarousel_initCallback, 
    itemLoadCallback: trigger

는 그런 다음 함수 showcasecarousel_initCallback을 작성해야합니다. 내가 당신이라면이 코드에서 불일치의 공정한 양이고 그것을 따라 특히 쉬운 일이 아닙니다 나는 리팩토링을 많이 할 것이지만 ...

function showcasecarousel_initCallback(carousel) { 
     jQuery('.jcarousel-skin-showcase div.jcarousel-next').click(function() { 
      if (carousel.first < 10) { 
       jQuery('#mycarousel li.jcarousel-item').removeClass('highliht'); 
       jQuery('#mycarousel .jcarousel-item-' + (carousel.first + 1)).addClass('highliht'); 
      } 
      return false; 
     }); 

     jQuery('.jcarousel-skin-showcase div.jcarousel-prev').click(function() { 
      if (carousel.first > 1) { 
       jQuery('#mycarousel li.jcarousel-item').removeClass('highliht'); 
       jQuery('#mycarousel .jcarousel-item-' + (carousel.first - 1)).addClass('highliht'); 
      } 
      return false; 
     }); 
}

: 다음은 당신이 원하는 일을 할 것입니다. 하단 회전 목마에로드 된 이미지가 현재 상단 회전 목마에 표시되지 않는 상황을 처리해야 할 수도 있습니다. 상단 회전식 슬라이드 쇼를 앞뒤로 이동해야합니다.

출처

2012-07-08 10:06:50 soupy1976

도움을 주셔서 대단히 감사드립니다. 이제 선택기 (빨간색 테두리)가 작은 이미지를 움직입니다. 선택자가 숨기지 않도록하려면 어떻게해야합니까? 그렇게하면 (선택기) 작은 이미지가 끝날 때 스크롤해야합니다. 내 다른 질문은 작은 이미지의 스크롤러를 양방향으로 움직이는 방법이다. 이제 작은 이미지는 클릭 할 때 올바른 방향으로 만 움직입니다. 이미지를 왼쪽 또는 오른쪽으로 이동하는 위치에 따라 이미지를 클릭하면 예제처럼 작동 할 수 있습니까? – Alabala

jCarousel 갤러리에 대한 도움이 필요합니다. 모두

답변

관련 문제