기본 이미지를로드 할 회전 장치/슬라이더 선택

Question

나는 친구를 위해 웹 사이트에서 작업하고 있으며 이상한 문제가 발생했습니다. 이 템플릿은 올빼미 회전식 캐 러셀을 사용합니다. 기본적으로 밀링 슬라이더를 사용하지만, 사용자가 회전식 이미지를 클릭하면 위의 기본 이미지를 대체 할 수 있도록하고 싶습니다. 나는 다음과 같은 코드를 만들었지 만, 캐 러셀에서 두 번째 이미지를 선택한 다음 첫 번째 이미지를 선택한 후에 의도 한 방식으로 만 작동합니다. 이 시퀀스를 수행 할 때까지 메인 이미지가 display:none 속성을 얻지 못하는 것입니다.

당신의 예를 볼 수 있습니다 http://felixplakolb.com/portfolio-single/138649524

http://codepen.io/afagard/pen/KMpQQN

JQUERY :

<script type="text/javascript"> 
jQuery(function() { 
    // gallery setup  
    var Img='.'+$(".gallery_image img#active").attr('class') 
    $("#owl-related-works a").click(function(){ 
     var ImgId = '.'+$(this).attr("href").slice(1); 
     if (ImgId!=Img) { 
      $(Img).hide(); 
      $(Img).attr({id:'inactive-gallery'}); 
      $(ImgId).show(); 
      $(ImgId).attr({id:'active'}) 
     } 
     Img=ImgId; 
     return false; 
    }); 
}); 
</script> 

회전 목마 :

<?php } elseif ($type = 'Photography') { ?> 
    <section class="related-projects pb-90"> 
     <div class="container"> 
      <h4 class="heading-inline"><?php echo $name . ' Gallery'; ?></h4> 
      <div class="customNavigation right"> 
       <a class="btn prev"><i class="fa fa-angle-left"></i></a> 
       <a class="btn next"><i class="fa fa-angle-right"></i></a> 
      </div> 
      <div class="row mt-20"> 
       <div id="owl-related-works" class="owl-carousel owl-theme"> 

        <?php $counter = 1; foreach ($imagesArr as $image) { ?> 
        <div class="work-item"> 
         <div class="work-container"> 
          <div class="work-img"> 
           <a href="#img<?php echo $counter++; ?>"><img src="<?php echo $images_core->prepLocation . $image ?>" alt="<?php echo $name; ?>"></a> 
          </div> 
         </div> 
        </div> 
        <?php } ?> 

       </div> 
      </div> 
     </div> 
    </section> 

    <? } ?> 

홈페이지 이미지 :

을

    <div id="gallery_image"> 

        <?php $counter = 1; foreach ($imagesArr as $image) { ?> 
        <img src="<?php echo $images_core->prepLocation . $image ?>" alt="<?php echo $name; ?>" <?php echo $counter > 1 ? 'style="display:none;" ' : 'style="display:block;" id="active" '; ?> class="img<?php echo $counter++;?>"> 
        <?php } ?>   
        </div> 

Answer 1

예를 들어 codepen 또는 jsbin을 생성 할 수 있습니까? 나는 당신을 도와 드리겠습니다 :)

일반적으로 jquery 콜백을 사용하여 큰 이미지의 이미지 src를 대체하는 것이 가장 좋을 것입니다. 그러나 적절한 jsbin이 있는지 설명하는 것이 훨씬 쉬울 것입니다.

이론 상으로는 스크립트를 훨씬 단순하게 만들 필요가 있습니다. 모든 작은 이미지에 onclick 수신기를 부착 할 수 있습니다. 클릭 한 div에서 href 또는 data-attribute 값을 도용합니다. 그것은 현재 이미지를 페이드 아웃 할 것이고 콜백은 src을 대체하고 요소를 페이드 인합니다. 그리고 그게 전부입니다.