图像库缩略图滑块

Image Gallery Thumbnails Slider

本文关键字：略图 图像      更新时间：2023-09-26

我正在尝试创建一个图像库：http://jsfiddle.net/L7yKp/1/

var xml = "<rss version='2.0'><channel> <image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image> <image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image> <image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image> <limage>http://images1.videolan.org/images/largeVLC.png</limage> <limage>http://images1.videolan.org/images/largeVLC.png</limage> <limage>http://images1.videolan.org/images/largeVLC.png</limage>   </channel></rss>",
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$image= $xml.find( "image" );
$limage = $xml.find("limage");
$( "#thumbs" ).append( $image.map(function(){
        return $('<img>', {className: 'thumbnails', src:$(this).text()})[0];
    }));
        $( "#panel" ).append( $limage.map(function(){
        return $('<img>', {className: 'largeimages', src:$(this).text()})[0];
    })
);

​我必须在点击缩略图时显示更大的图像。因此，在点击每个缩略图时，将显示相应的较大图像。我需要一些帮助。

请参阅http://jsfiddle.net/L7yKp/2/

var xml = "<rss version='2.0'><channel>"+
"<image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image>"+
"<image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image>"+
"<image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image>"+
"<limage>http://images1.videolan.org/images/largeVLC.png</limage>"+
"<limage>http://images1.videolan.org/images/largeVLC.png</limage>"+
"<limage>http://images1.videolan.org/images/largeVLC.png</limage>"+
"</channel></rss>",
$xml = $( $.parseXML(xml) ),
$images=$([
    //[elements, place, className],
    [$xml.find("image") ,"#thumbs",'thumbnails'],
    [$xml.find("limage"),"#panel" ,'largeimages']
]);
$images.each(function(){
    var that=this;
    that[0].each(function(){
        $(that[1]).append($('<img>', {class: that[2], src:$(this).text()}));
    });
});
$("#thumbs>img").click(function(){
    $("#thumbs>img.clicked").removeClass('clicked');
    $("#panel>img").hide();
    $("#panel>img:nth-child("+Number($(this).index()+1)+")").fadeIn();
    $(this).addClass('clicked');
});
$("#thumbs>img:first").click();
$('#next').click(function(){
    $('#thumbs>img.clicked').next().click();
});
$('#prev').click(function(){
    $('#thumbs>img.clicked').prev().click();
});

注意：我为图像添加了边框，因为它们是相同的。

编辑：

你也可以加入

$('#next').click(function(){
    $('#thumbs>img.clicked').next().click();
});
$('#prev').click(function(){
    $('#thumbs>img.clicked').prev().click();
});

进入

$(['next','prev']).each(function(){
    var that=this;
    $('#'+that).click(function(){
        $('#thumbs>img.clicked')[that]().click();
    });
});

请在此处查看：http://jsfiddle.net/L7yKp/4/

相关文章：