주변 환경을 변경하지 않고 미리보기 이미지를 클릭하면 주 이미지의 이미지를 어떻게 바꿀 수 있습니까?

jCarousel에서 jQuery Image Gallery를 사용하고 있습니다. 그것은 나에게 잘 작동하지만 문제는 축소 이미지를 클릭 할 때마다 주 이미지 만 변경하는 대신 환경도 변경된다는 것입니다. 나는 그것을 원하지 않는다. 축소판을 클릭하면 주 이미지가 변경 되기만하면됩니다. 또한 주 이미지가 무엇이든 관계없이 축소판 목록에 초점을 맞 춥니 다. 이 작업을 위해 무엇을해야하며 어떤 이벤트를 사용해야합니까? 어떤 도움을 주셔서 감사합니다.주변 환경을 변경하지 않고 미리보기 이미지를 클릭하면 주 이미지의 이미지를 어떻게 바꿀 수 있습니까?

코드 :

<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/jquery.jcarousel.css" /> 
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="<?php echo base_url();?>js/jquery.jcarousel.min.js"></script> 
<script type="text/javascript" src="<?php echo base_url();?>js/jquery.jcarousal.pack.js"></script> 
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/skin.css" /> 
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/slider.css" /> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     //jCarousel Plugin 
     $('#carousel').jcarousel({ 
      vertical: true, 
      scroll: 1, 
      auto: 2, 
      wrap: 'last', 
      initCallback: mycarousel_initCallback 
     }); 

    //Front page Carousel - Initial Setup 
    //$('div#slideshow-carousel a img').css({'opacity': '0.5'}); 
    //$('div#slideshow-carousel a img:first').css({'opacity': '1.0'}); 
    //$('div#slideshow-carousel li a:first').append('<span class="arrow"></span>') 

    //Combine jCarousel with Image Display 
    //*$('div#slideshow-carousel li a').click(function() { 
     $('span.arrow').remove(); 
     $(this).append('<span class="arrow"></span>'); 
     $('div#slideshow-main li').removeClass('active'); 
     $('div#slideshow-main li.' + $(this).attr('rel')).addClass('active'); 
     return false; 
    });*/ 
}); 

//Carousel Tweaking 
function mycarousel_initCallback(carousel) { 
    // Pause autoscrolling if the user moves with the cursor over the clip. 
    carousel.clip.hover(function() { 
     carousel.stopAuto(); 
    }, function() { 
     carousel.startAuto(); 
    }); 
} 
</script> 
<body> 
    <?php $this->load->view('boxes/header'); ?> 
    <div class="main_container"> 
     <div class="content_bg main_content_bg"> 
     <div class="left_content"> 
     <div class="model_show"> 
     <span class="model_show_top">&nbsp;</span> 
     <div class="model_show_mid"> 
     <?php 
     if(!empty($detailArr)) { 
      foreach($detailArr as $models) { 
     ?> 
     <h1><?php echo $models['model_name'];?></h1> 
     <div class="model_info"> 
     <div id="slideshow-main"> 
      <ul> 
      <li class="<?php echo $models['gallery_id'];?> active"> 
       <a href="#"> 
       <img src="<?php echo base_url();?>images/gallery/large/<?php echo $models['gallery_image'];?>" width="410" height="290" alt="" /> 
       </a> 
      </li> 
      </ul> 
     </div> 
     <div id="slideshow-carousel"> 
      <ul id="carousel" class="jcarousel jcarousel-skin-tango"> 
      <?php 
      if(!empty($slideshowArr)) { 
       foreach($slideshowArr as $models) { 
      ?> 
      <li> 
      <a href="<?php echo base_url().$models['model_url']."/".$models['gallery_id'];?>" rel="<?php echo $models['gallery_id'];?>"> 
       <img src="<?php echo base_url();?>images/gallery/large/<?php echo $models['gallery_image'];?>" width="129px" height="95px" alt="#"/> 
      </a> 
      </li> 
      <?php 
      } 
      } 
      ?> 
     </ul> 
     </div> 
    </div> 
    <?php 
     } 
    } 
    ?> 
    </div><!--end of mode_show_mid -->

출처

2012-06-19 samjhana joshi

가능하다면, 당신은 http://jsfiddle.net/에서 사용자의 작업 HTML 코드를 게시 할 수 있습니다, 그래서 우리는 더 많은 디버깅 할 수 있습니다. – VibhaJ

$(document).ready(function(){ 
$('.jcarousel-item').click(function(){ 
    var imgelem = $(this).find('img').attr('src'); 
    $('#yourmainimagecontainingid').html('<img src="'+imgelem+'"/>'); 

}); 

});

출처

2012-06-19 05:35:25 coolguy

주변 환경을 변경하지 않고 미리보기 이미지를 클릭하면 주 이미지의 이미지를 어떻게 바꿀 수 있습니까?

답변

관련 문제