0

jQueryライトボックス内のギャラリー画像のaltタグへの参照を取得し、大きな画像へのリンクにジャンプしてライトボックスに挿入した後、画像のすぐ下にキャプションとして表示しようとしています。

$(function(){

    $('.gallery a').on('click', function(e){
        var image_source = $(this).attr('href');
        var text = $('.gallery a img').attr('alt'); 

        $('#content').html('<img src="' + image_source + text + '">');
        /* .html('<p style="color:#fff;">' + alt_text + '</p>');
-----------above was the other method I tried which didn't work so I commented it out--  -----*/

        $('#lightbox').show();

        e.preventDefault();
    });//End Gallery


    $('#lightbox').on('click', function(){
        $(this).hide();
        $('#content img').remove();
    });
});//End Ready

もちろん、ギャラリーのサムネイルがクリックされたときに読み込まれる対応する大き​​な画像に対して、対応する画像の alt タグを表示する必要があります。

アドバイスをいただければ幸いです。よろしくお願いします。ここにJSFiddleがあります： http://jsfiddle.net/graphicsinc/37A4y/13/

4

1 に答える 1

0

代わりに、alt_text変数名を にするtext か、名前を変更します。textalt_text

編集：コードは次のようになります：

$(function() {

    $('.gallery a').on('click', function(e) {
        e.preventDefault();
        var image_source = $(this).attr('href');
        var alt_text = $('.gallery a img').attr('alt');

        $('#content')
            //.html('<img src="' + image_source + text + '">');
            .html('<p style="color:#fff;">' + alt_text + '</p>');
        $('#lightbox').show();
    });//End Gallery

    $('#lightbox').on('click', function() {
        $(this).hide();
        $('#content img').remove();
    });

});//End Ready

jsフィドル

EDIT2alt : に属性を追加する場合は、次imgのようになります

$('#content').html('<img src="' + image_source + '" alt="' + alt_text + '">');

jsフィドル

于 2013-06-27T01:12:21.610 に答える