Geek asks and answers

Using jQuery, how to open a larger image in the target div when clicking on its thumbnail?

I have a div that is the target:

<div id="rightbox"></div>

I have thumbnails organized by groups:

<img src="group1/thumb/01.png" width="160" height="97" class="imgtopleft" />
<img src="group1/thumb/02.png" width="160" height="97" class="imgtopright" />
<img src="group2/thumb/01.png" width="160" height="97" class="imgbottomleft" />
<img src="group2/thumb/02.png" width="160" height="97" class="imgbottomright" />

And I have large images corresponding to each of the thumbs:

<img src="group1/large/01.png" width="560" height="297" class="largeimage" />
<img src="group1/large/02.png" width="560" height="297" class="largeimage" />
<img src="group2/large/01.png" width="560" height="297" class="largeimage" />
<img src="group2/large/02.png" width="560" height="297" class="largeimage" />

I want to know if it is possible to display each of the large images when I click on the corresponding thumbnail in the target div (with id = "rightbox") using a function?

. 10 , . , image01_thumb.jpg image01_large.jpg, div.

.

.

+3
4

, #rightbox, :

$('img').click(
    function(){
        var that = $(this);
        if (that.attr('src').indexOf('thumb')>-1){
            $('#rightbox img').hide();
            $('#rightbox img').eq(that.index()).show();
            /* or:
            var newSrc = that.attr('src').replace('thumb','large');
            $('img[src="' + newSrc + '"]').show();
            */
        }
    });

, DOM, #rightbox:

$('img').click(
    function(){
        var that = $(this);
        if (that.attr('src').indexOf('thumb')>-1){
            $('#rightbox img').empty();
            var newSrc = that.attr('src').replace('thumb','large');
            $('img[src="' + newSrc + '"]').clone().appendTo('#rightbox');
        }
    });

DOM, :

$('img').click(
    function(){
        var that = $(this);
        if (that.attr('src').indexOf('thumb')>-1){
            $('#rightbox img').empty();
            var newSrc = that.attr('src').replace('thumb','large'),
                newImg = $('<img />',{src : newSrc}).appendTo('#rightbox');
        }
    });

:

+5

:

$("img").click(function(){
    var largesrc = $(this).attr("src").replace("thumb","large");
    $("#rightbox").html('<img src="'+largesrc+'" width="560" height="297" class="largeimage" />');
});

img src, , src . , "smallimage" , $(".smallimage").click(function(){

+1

? , .

$(document).ready(function() {
        $(".imgtopleft").click(function() {
            $(".imgtopleftlargerimage").css("width","1000");
        });
});
0

, click .

<a href="group1/large/01.png" class="viewLargeImage">
   <img src="group1/thumb/01.png" width="160" height="97" class="imgtopleft" />
</a>

JavaScript:

$('.viewLargeImage').click( function(event){
    event.preventDefault();
    var bigPath = $(this).attr('href');
    $(this).replaceWith( "<img src=" + bigPath + " />" );
});

:

$('.viewLargeImage').click( function(event){
    event.preventDefault();
    var bigPath = $(this).attr('href');
    $('#rightbox').html( "<img src=" + bigPath + " />" );
});

Google , , javascript, .

0

More articles:


All Articles