0

私は作成しようとしている画像ギャラリーを持っています。これまでのところ、うまく機能しています。私の問題は、どのように試しても、JavaScriptを使用してそれらを交換するときに、各画像に独自のキャプションを付けることができないことです。この質問で誰かが私に腹を立てる前に、私はここを見て、一部の人々がhtmlを使用してキャプションを追加する方法を見つけましたが、画像を交換するとうまくいきません. 空の div を作成し、javascript を使用して html テキストを挿入することも考えましたが、適切な写真に一致するキャプションをロードするにはどうすればよいですか? ここでは配列が唯一のオプションですか? これが私の問題のページです。

私のサイト

画像をロードできるように、「写真」divを空のままにします。これまでのところ、すべてが機能します。キャプションで混乱しただけです。

ここにJavaScriptコードがあります

$('#gallery img').each(function(i) {
    var imgFile = $(this).attr('src');
    var preloadImage = new Image();
  var imgExt = /(\.\w{3,4}$)/;
  preloadImage.src = imgFile.replace(imgExt,'_h$1');

    $(this).hover(
        function() {
            $(this).attr('src', preloadImage.src);
        },
        function () {
        var currentSource=$(this).attr('src');
            $(this).attr('src', imgFile);
    }); // end hover
}); // end each




$('#gallery a').click(function(evt) {
evt.preventDefault();   
var imgPath = $(this).attr('href');
var oldImage = $('#photo img');
var newImage = $('<img src=" ' + imgPath + ' ">');
newImage.hide();
$('#photo').prepend(newImage);
newImage.fadeIn(1000);
oldImage.fadeOut(1000,function(){
$(this).remove();
});
});
$('#gallery a:first').click();

そして私のhtml

<div id="main">         <!-- Main Content -->

<div id="photo">
</div>

<div id="gallery">
<a href="images/home1_h.jpg"><img src="images/home1.jpg" alt="home 1"></a>
<a href="images/home2_h.jpg"><img src="images/home2.jpg" alt="home 2"></a>
<a href="images/home3_h.jpg"><img src="images/home3.jpg" alt="home 3"></a>
<a href="images/home4_h.jpg"><img src="images/home4.jpg" alt="home 4"></a>
<a href="images/home5_h.jpg"><img src="images/home5.jpg" alt="home 5"></a>
<a href="images/home6_h.jpg"><img src="images/home6.jpg" alt="home 6"></a>
</div>

</div>
4

1 に答える 1

0

私はこのようにします

$('#gallery img').click(function(evt) {  
    var elem = $(this);
    var oldImage = $('#photo img');
    $('#photo').prepend($('<img src=" ' + elem.attr('src') + ' ">').hide().fadeIn(1000));
    oldImage.fadeOut(1000,function(){
       $(this).remove();
       $("#caption").html(elem.attr('alt')); // set the caption
    });
});

$('#gallery img:first').trigger('click');

そしてhtmlとして

<div id="main">         <!-- Main Content -->

<div id="photo">
   <div style="text-align:center" id="caption"></div>
</div>

<div id="gallery">
    <img src="images/home1_h.jpg" alt="home 1">
    <img src="images/home2_h.jpg" alt="home 2">
    <img src="images/home3_h.jpg" alt="home 3">
    <img src="images/home4_h.jpg" alt="home 4">
    <img src="images/home5_h.jpg" alt="home 5">
    <img src="images/home6_h.jpg" alt="home 6">
 </div>

</div>

そしてちょっとしたcss

#gallery img {
     opacity: 0.8;
     cursor: pointer;
}
#gallery img:hover {
     opacity: 1
}
于 2013-03-24T16:55:59.947 に答える