Image Gallery lightbox

Question

Currently I have thumbnails, when I click the them a large version of the pic appears in the div directly to the right of the thumbnails. What I now want to be able to do is click the larger pic in the div and then trigger a lightbox that shows an even larger version of the pic.

I'm not quite sure how to do what I'm thinking is the solution so I'm gonna try and explain. I'm thinking that when i click the div to trigger the lightbox I want to take the src of the pic being click and then somehow redirect it to another src in my images folder.

Example:

When I click image in div I get the src of pic lets say that the source is:

src="redpic.jpg"

Then lets say in my images folder I have a larger version of the pic selected with the source:

src="redpic_large.jpg"

Would it be possible to manipulate the the src of an first image img src="redpic.jpg" by adding _large to the end and then appending this to my lightbox???

Everytime I try to do things with my images I always seem to be running into problems.

say the src="redpic.jpg" when I check in the console the src goes to something like //139.0.0.1:56328/img/dotted.jpg and it seems to cause me a lot of problems

Answer 1

Sure, you can get the source of the image like this :

$("img").on("click", function(){
   var source = $(this).attr("src");
});

This will give you the complete path (redpic.jpg).

You can use split() to get an array of both parts (the name and the extension)

var parts = source.split("."); 

Now, all that you have to do is append the "_large" to the first part of the source, combine them back together and set your other image's source as the newly assembled one.

parts[0] += "_large";
var newSource = parts.join(".");

You pass the period . to the join function so that it puts a period in betwen your elements, instead of the default comma , .

All that's left to do is to use newSource as the source attribute of your other image.

$(".other-image").attr("src", newSource);