1

jQueryを使用してスライドショーを作成し、各スライドの名前をdivにキャプションのクラスとともに表示しています。画像の代替テキストから取得されている div 内のテキストを変更したいので、前のテキストを削除する必要があります。現在、各画像のテキストがリストにポップアップ表示され、拡大し続けています。各画像のクリック。次の画像のテキストがポップアップしたときに最初のテキストを消したい - remove() を使用しようとしましたが、正しく動作しないようです。

html:

<!DOCTYPE html>
<html>

    <head>
        <title>jQuery Gallery</title>
        <meta charset='utf-8'>
        <link href="css/styles.css" type="text/css" rel="stylesheet">
        <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
        <script type="text/javascript" src="js/project7.js"></script>
        <style type="text/css">
</style>
    </head>

    <body>
         <h1>jQuery-based Gallery</h1>

        <div id="gallery">
            <ul id="thumbs">
                <li><a href="images/andytimmons.jpg"><img src="images/thumbs/andytimmons.jpg"   alt="Andy Timmons plays Sgt. Pepper"></a>
                </li>
                <li><a href="images/ericgales.jpg"><img src="images/thumbs/ericgales.jpg" alt="Eric Gales - Relentless"></a>
                </li>
                <li><a href="images/jellyfish.jpg"><img src="images/thumbs/jellyfish.jpg" alt="Jelly Fish - Spilt Milk"></a>
                </li>
                <li><a href="images/kingsx.jpg"><img src="images/thumbs/kingsx.jpg" alt="King's X"></a>
                </li>
            </ul>
        </div>
    </body>

</html>

CSS:

/* style the thumbnails */
 #thumbs {
    list-style: none;
    padding: 0 0 20px;
    margin: 0 0 20px;
    border-bottom: 2px solid #333;
}
#thumbs li {
    display: inline;
    margin: 0 5px;
}
#thumbs li a img {
    border: 1px dashed #000;
    padding: 1px;
    background: #fff;
    opacity: .6;
}
#thumbs li a img:hover {
    opacity: 1;
}
/* style the big main image and caption */
.galleryBig {
    border: 4px solid #333;
    padding: 2px;
    background: #666;
}
.caption {
    font: bold 18px georgia, times, serif;
    background: rgba(255, 255, 255, .7);
    position: relative;
    top: -3em;
    padding: 5px;
}

jQuery:

   $('document').ready(function(){
loadImages();
displayFirst();
gallery();

 });

 function loadImages(){
var galleryImages = [];
var loadThese = $('#thumbs a');
for(i=0; i<loadThese.length; i++){
    galleryImages[i] = new Image();
    galleryImages[i].src = loadThese[i];
    }   

} // end loadImages

function displayFirst(){
    var firstImagePath = $('#thumbs a').attr('href');
    var firstImage = $('<img class="galleryBig" src="' + firstImagePath + '">');
    $('#thumbs').after(firstImage);
    var firstAltText = $('#thumbs img').attr('alt');
    $('.galleryBig').after('<div class="caption">' + firstAltText + '</div>');

}
// end displayFirst


 function gallery(){
$('#gallery a').click(function(evt){
    evt.preventDefault();
    $(".caption").hide();

    var alt = $(this).children("img").attr("alt"); 

    oldImage = $('#thumbs').next();

    var imgPath = $(this).attr('href');

    var newImage = $('<img class="galleryBig" src="' + imgPath + '">');
    var altText = $('.galleryBig').after('<div class="caption">' + alt + '</div>');


    newImage.hide();

    $('#thumbs').after(newImage);

    newImage.fadeIn();
    oldImage.remove();  


  }); //end anonymous fcn

 } //end gallery
4

1 に答える 1

0

あなたが選択した解決策は良くありません。複数のキャプションがユーザーから隠されているためcaption.hide()です。それは本来あるべき姿ではありません。別の方法として、次のフィドルをご覧ください: http://jsfiddle.net/dVmq2/

その中で、コードとロジックを簡素化しました。キャプションを非表示にしたり、DOM から要素を削除したりせず、ページ読み込み時に挿入された要素を変更するだけなので、役に立つと思います。

$('document').ready(function(){
    var thumbs = $('#thumbs'),
        thumbs_links = thumbs.find('a'),
        firstAltText = thumbs.find('img').attr('alt'),
        newImage = $('<img />', {class: 'galleryBig'}),
        caption = $('<div />', {class: 'caption'}),
        full_image = newImage.attr('src', thumbs_links.attr('href')).insertAfter(thumbs),
        caption_block = caption.text(firstAltText).insertAfter('.galleryBig');

    thumbs.on('click', 'a', function(evt){
        evt.preventDefault();

        var link = $(this),
            imgPath = link.attr('href'),
            alt = link.children("img").attr("alt");

        caption_block.text(alt);
        full_image.hide().attr('src', imgPath).fadeIn();
    });
});
于 2013-10-22T15:10:39.833 に答える