Image Gallery Thumbnails Slider

Here I am trying to create an Image Gallery: 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];
    })
);

‚ÄčI have to show larger images on click of the thumbnail image. So on click of each thumbnail the corresponding larger image is to be displayed. I need some help.

Answers


See 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();
});

Note: I have added borders to the images because they are the same.

Edit:

You can also join

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

into

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

See it here: http://jsfiddle.net/L7yKp/4/


Need Your Help

call gbm model from C++

r gbm

I've got a gbm object and I want to use it from C++. For example, use the predict.gbm() in C++ with new data. At first I tried to translate the if-else rule in C++ and just output the tree to a file.

Malfunctioning on deleting from Sqlite database table (Relationship extraordinary behavior)

android sqlite foreign-keys relational-database relationship

I havea weird problem in my android application which is related to database relations on foreign keys. The following codes describe my simple database's structure,