How to swap the img src of a small image for a large image?

15

Information:

I'm trying to make a simple photo gallery. I want to show the image clicked in large size in the center of the screen. (Clicar em 0.jpg e mostrar em uma outra div 0Large.jpg)

Problem:

With the code I have I can do this, but only really showing the clicked image. The problem is that this image clicked will be of a different size (it will be something like thumbnail) so clicking the image that appears is small. I want to show a large version. Ex: 001Large.jpg instead of 001.jpg . I do not know how to do that. I thought of using a kind of loop in the variable that contains the image address until it finds the ".jpg" and insert before the text ".jpg" the name "Large" so that the big version of the image is shown. I have an HTML similar to this:

<div id="gallery-work">
<div id="gallery-warper" >

    <div class="img-container" >
        <img src="img/gallery/work/001.jpg" alt="" width="100%" />
    </div>

    <div class="img-container" >
        <img src="img/gallery/work/002.jpg" alt="" width="100%" />
    </div>

    <div class="img-container" >
        <img src="img/gallery/003.jpg" alt="" width="100%" />
    </div>

    <div class="img-container" >
        <img src="img/gallery/004.jpg" alt="" width="100%" />
    </div>
</div>

And JavaScript:

$(document).ready(function () {
    $("img").click(function() {
        var imgLocation = $(this).attr("src");
        var newImgLocation = '<div id="showimg" class="midway-horizontal midway-vertical"><img class="imgshow midway-horizontal midway-vertical" src="' + imgLocation + '"/></div>';

        $(".main-container").append(newImgLocation);
        Midway();

        $("#showimg").click(function() {
            $(this).remove();
        });
    });
});

JSFiddle Example

Note:

asked by anonymous 14.02.2014 / 01:09

5 answers

7

Answer:

First, you must dynamically generate your images path dynamically, so it is easy to change them dynamically as well.

Explanation:

You can automatically generate the path of your images in this way using this function then declare it at the beginning of your JS to use it later:

function setSRCImagens(caminho){
  $('.img-container img').each(function(index){
    $(this).attr('src', caminho+index+'.jpg');
    $(this).attr('index', caminho+index);
  });      
}

And then you can run in the event onLoad or documentReady (when your page loads):

setSRCImagens("img/gallery/work/");

To put the small images.

And you can run in the onClick event of your images:

var newImgLocation = '<div id="showimg" class="midway-horizontal midway-vertical"><img class="imgshow midway-horizontal midway-vertical" src=""/></div>';
$(".main-container").append(newImgLocation);
$('#showimg img').attr('src', $(this).attr('index')+'Large.jpg');

To put "Large" at the end of the src path, just like the little one from the black box you made and make it big.

Example running in JSFiddle (do not contain images)

Very Important:

You should make sure that your images follow this order of name: 0.jpg , 1.jpg ... and 0Large.jpg , 1Large.jpg ... on.

    
14.02.2014 / 01:24
7

The best thing you do is to use some specific plugin for this, I'd recommend colorbox , you do not need to break the head programming javascript , in addition to other features, then just customize css , if this is really necessary, here is a simple example:

<a class="group1 cboxElement" href="img/gallery/work/001Large.jpg" title="Esse title vai aparecer no plugin.">
   <img src="img/gallery/work/001.jpg" />
</a><br/>

<a class="group1 cboxElement" href="img/gallery/work/002Large.jpg" title="Esse title vai aparecer no plugin.">
   <img src="img/gallery/work/002.jpg" />
</a><br/>

<a class="group1 cboxElement" href="img/gallery/work/003Large.jpg" title="Esse title vai aparecer no plugin.">
   <img src="img/gallery/work/003.jpg" /> 
</a>

In the head you call js and his css, available for dowload here , in addition it includes the following code:

$(".group1").colorbox({rel:'group1'});
    
14.02.2014 / 03:09
2

Use data attributes :

html:

<img src="img/gallery/003.jpg" 
     data-large-img="img/gallery/Large003.jpg"
     alt="" 
     width="100%" />

js:

$(document).ready(function () {
  $("img").click(function() {
    var largeImg = $(this).data("large-img");
    alert(largeImg); // img/gallery/Large003.jpg
  }
});

Example jsfiddle

    
14.02.2014 / 03:14
2

A very easy way to solve your problem is to use Regular Expressions to change the image address without having to modify your code a lot.

Example to find filename that is a number followed by .jpg :

/\/([0-9]+)\.jpg/i     //apenas números
/\/([0-9a-z]+)\.jpg/i  //números e letras

To understand what this expression does, use it at RegExper.com .

Applying to your code:

var imgLocation = $(this).attr("src").replace(/\/([0-9]+)\.jpg/i, '/$1large.jpg'); 
// De: img/gallery/work/001.jpg
// Para: img/gallery/work/001large.jpg

var newImgLocation = '<div id="showimg" class="midway-horizontal midway-vertical"><img class="imgshow midway-horizontal midway-vertical" src="' + imgLocation + '"/></div>';

$(".main-container").append(newImgLocation);
    
14.02.2014 / 06:14
2

Most of the problems whose solution depends on navigating through the DOM is resolved by structuring HTML in the proper way. The structure presented by Kenny, used by many plugins like Lightbox, Colorbox among others, solves this problem well with a simple one:

$( this ).attr( 'href' );

Inside a jQuery.click () you can already get the path of the larger image.

Your current structure, although not the most appropriate, also allows you to reproduce the behavior, you just need to know how to add any string in the path of the original image.

All you need is:

  • Find the node corresponding to the image
  • Get your src attribute
  • Manipulate it
  • Replace the src attribute value with the new
  • See my implementation

    The "trick" here is to find the last point in the path string and replace everything after it with the string that distinguishes the large image and its extension.

    In this solution we take into account that the large image extension will always JPG, but if for some obscure reason you have that the large image will keep the image extension small, and that the extension of the small image can vary between multiple formats (normal in image upload) just get the extension before:

    src.split( '.' ).pop();
    

    See working on the second review . In this review I switched the extension from the first JPG image to PNG so that it was very clear (in the Console of course) that the original extension was being used.

        
    14.02.2014 / 13:36