Question

以下是代码，单击缩略图时会显示较大的图像。我想要的是显示包含描述性文本的div。这就是完成所有这些工作的jquery：

$(document).ready(function() {

// Set these DIVs to show for browsers suporting JavaScipt
$('.gallery_data').css('display','block');
$('.gallery_thumbnails').css('width','500px');
$('.gallery_preview').css('display','block');
$('.gallery_caption').css('display','block');

// Capture the thumbnail links
$('.gallery_thumbnails a').click(function(e){

    // Disables standard link behavior
    e.preventDefault();

    /*
    // before the updateThumbnail function
    $('.gallery_thumbnails a').removeClass('selected');
    $('.gallery_thumbnails a').children().css('opacity', '1');
    $(this).addClass('selected');
    $(this).children().css('opacity', '.4');
    */


    // Sets up variables based on linked thumbnails
    var photo_caption = $(this).attr('title');
    var photo_fullsize = $(this).attr('href');
    var photo_preview = photo_fullsize.replace("_fullsize", "_preview");

    // Fade out preview, preload new image, fade preview back in
    $('.gallery_caption').slideUp(500);
    $('.gallery_preview').fadeOut(500, function(){

        //add the preload after the fadeOut has happened
        $('.gallery_preload_area').html('<img src="'+photo_preview+'">');
        $('.gallery_preload_area img').imgpreload(function(){

            //first without function
                $('.gallery_preview').html('<a class="overlayLink"         
title="'+photo_caption+'" href="'+photo_fullsize+'" style="background-
image:url('+photo_preview+');"></a>');
            $('.gallery_caption').html('<p><a class="overlayLink zoom"  
title="'+photo_caption+'" href="'+photo_fullsize+'">View larger</a>
</p><p>'+photo_caption+'</p>');

            $('.gallery_preview').fadeIn(500);
            $('.gallery_caption').slideDown(500);

            setFancyBoxLinks();
            updateThumbnails();
        });

    });

});

// Set the first preview image
var first_photo_caption = $('.gallery_thumbnails a').first().attr('title');
var first_photo_fullsize = $('.gallery_thumbnails a').first().attr('href');
var first_photo_preview = first_photo_fullsize.replace("_fullsize", "_preview");
$('.gallery_preview').html('<a class="overlayLink" title="'+first_photo_caption+'" 
href="'+first_photo_fullsize+'" style="background-image:url('+first_photo_preview+');">
</a>');
$('.gallery_caption').html('<p><a class="overlayLink zoom" 
title="'+first_photo_caption+'" href="'+first_photo_fullsize+'">View larger</a>
</p><p>'+first_photo_caption+'<a href="'+first_photo_fullsize+'" style="background-
image:url('+first_photo_preview+');"></a></p>');
updateThumbnails();
setFancyBoxLinks();

});

function setFancyBoxLinks(){
// Links for Facnybox
$("a.overlayLink").fancybox({
    'titlePosition' : 'over',
    'overlayColor' : '#000',
    'overlayOpacity' : 0.8,
    'transitionIn' : 'elastic',
    'transitionOut' : 'elastic',
    'autoScale' : true
});
}

function updateThumbnails(){
 $('.gallery_thumbnails a').each(function(index){

    if ( $('.gallery_preview a').attr('href') == $(this).attr('href') ){
        $(this).addClass('selected');
        $(this).children().fadeTo(250, .4);
    }else {
        $(this).removeClass('selected');
        $(this).children().css('opacity', '1');
    }
 });

}

Answer 1

更改此

$('.gallery_preview').fadeIn(500);
$('.gallery_caption').slideDown(500);

到这个

 $('.your_div_class_name').fadeIn(500);

在单击图库缩略图而不是大图像时，如何使用jquery显示包含文本的div？

1 个答案: