1

私は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 -->
4

1 に答える 1

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

});

});
于 2012-06-19T05:35:25.933 に答える