图片库缩略图滑块

Question

在这里，我尝试创建图像库： 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];
    })
);

单击缩略图时，我必须显示更大的图像。 因此，对每个缩略图点击相应的放大图像将被显示出来。 我需要协助。

Answer 1

参见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/