0

私の意図は、div内の画像がロードされ#photo_1たときに表示されることです。.slideDown続いて、 (対応するサムネイル div)をクリックすると、 #photo_2(および on)が表示されます。#thumb_2

現在、#imgwrapこれはロード#photo_1されるまでプレースホルダーであり、クリックされたときに固定され、表示されるはずです。次に、の下に表示されます。#photo_1#thumb_2#photo_2#photo_2#imgwrap

#imgwrap消したい、イニシャル以外の#photoどれかをクリックすると該当するが表示されます。#thumbs#thumb_1

あなたの助けは大歓迎です!

<--!jquery image animation-->
<script type="text/javascript">
$(window).load(function () {
    $("#photo_1").slideDown(500);
});

 $("#thumb_2").click(function () {
      $("#imgwrap").hide();
    });
    </script>

<!--HTML-->
  <div id="imgwrap">
        <div id="photo_1" style="opacity: 0.0;">
    <img src="images/image.jpg" alt="image 1" /></a>
     </div>
 </div>

 <div id="photo_2" style="display: none;">
    <img src="images/image_2.jpg" alt="image 2" /></a>
     </div>


<div id="thumb_1"><a href="#photo_1" onClick="switch_product_img('photo_1', 4);"><img src="images/image_thumb.jpg" alt="image thumbnail" /></a></div>

<div id="thumb_2"><a href="#photo_2" onClick="switch_product_img('photo_2', 4);"><img src="images/image_2_thumb.jpg" alt="image 2 thumbnail" /></a></div>

<!--JAVASCRIPT IMAGE ON-CLICK DISPLAY-->
<script language="javascript" type="text/javascript">
        function switch_product_img(divName, totalImgs) 
        {
            for (var i=1; i<=totalImgs; i++) 
            {
                var showDivName = 'photo_' + i;
                var showObj = document.getElementById(showDivName);
                if (showDivName == divName)
                    showObj.style.display = 'block';
                else
                    showObj.style.display = 'none';
            }
        }
        </script>
4

1 に答える 1

0

jqueryで標準のJavaScriptを使用しています。画像機能を変更するのは複雑すぎます。

以下のスクリプトは非常に標準的なjqueryです。クラスで「a」をクリックthumbsすると、関数が呼び出されます。このスクリプトは、クラスphotosですべての画像を非表示にし、からidで画像を表示しhrefます。

<script>
$(function(){    //same as .load() but jquery style
  $("#dropimage").slideDown(500);
  $(".thumbs").click(function () {    // functions runs any time a <a href>  
                                      // with class thumbs` is clicked.

      var t = $(this);  // get the <a href> that was clicked.
       $('.photos').hide(); //hide all photos with class photo

      var href = t.attr('href'); //  get the href of the link clicked.
      $(href).show();    //show the photo u need. becauee the link and the
                         //id are the same.
    });

});
</script>

 <div id="photo_1" class="photos">
    <div id="dropimage" style="opacity: 0.0;">
<img src="images/image.jpg" alt="image 1" /></a>
 </div>


 <div class="photos" id="photo_2" style="display: none;">
    <img src="images/image_2.jpg" alt="image 2" /></a>
     </div>


<div id="thumb_1"><a class="thumbs" href="#photo_1"><img src="images/image_thumb.jpg" alt="image thumbnail" /></a></div>

<div id="thumb_2"><a class="thumbs"  href="#photo_2"><img src="images/image_2_thumb.jpg" alt="image 2 thumbnail" /></a></div>

`

于 2012-09-26T03:33:04.220 に答える