"Easy image gallery in a modal"
Bootstrap 3.2.0 Snippet by Donny5300

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row"> <div class="col-lg-12"> <h1 class="page-header">Thumbnail Gallery</h1> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://onelive.us/wp-content/uploads/2014/08/flower-delivery-online.jpg" data-target="#image-gallery"> <img class="img-responsive" src="http://onelive.us/wp-content/uploads/2014/08/flower-delivery-online.jpg" alt="Short alt text"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="If you sponsor me, I can drive this car" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery"> <img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Im so nice" data-caption="And if there is money left, my girlfriend will receive this car" data-image="http://upload.wikimedia.org/wikipedia/commons/7/78/1997_Fiat_Panda.JPG" data-target="#image-gallery"> <img class="img-responsive" src="http://upload.wikimedia.org/wikipedia/commons/7/78/1997_Fiat_Panda.JPG" alt="Another alt text"> </a> </div> </div> <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="image-gallery-title"></h4> </div> <div class="modal-body"> <img id="image-gallery-image" class="img-responsive" src=""> </div> <div class="modal-footer"> <div class="col-md-2"> <button type="button" class="btn btn-primary" id="show-previous-image">Previous</button> </div> <div class="col-md-8 text-justify" id="image-gallery-caption"> This text will be overwritten by jQuery </div> <div class="col-md-2"> <button type="button" id="show-next-image" class="btn btn-default">Next</button> </div> </div> </div> </div> </div>
$(document).ready(function(){ loadGallery(true, 'a.thumbnail'); //This function disables buttons when needed function disableButtons(counter_max, counter_current){ $('#show-previous-image, #show-next-image').show(); if(counter_max == counter_current){ $('#show-next-image').hide(); } else if (counter_current == 1){ $('#show-previous-image').hide(); } } /** * * @param setIDs Sets IDs when DOM is loaded. If using a PHP counter, set to false. * @param setClickAttr Sets the attribute for the click handler. */ function loadGallery(setIDs, setClickAttr){ var current_image, selector, counter = 0; $('#show-next-image, #show-previous-image').click(function(){ if($(this).attr('id') == 'show-previous-image'){ current_image--; } else { current_image++; } selector = $('[data-image-id="' + current_image + '"]'); updateGallery(selector); }); function updateGallery(selector) { var $sel = selector; current_image = $sel.data('image-id'); $('#image-gallery-caption').text($sel.data('caption')); $('#image-gallery-title').text($sel.data('title')); $('#image-gallery-image').attr('src', $sel.data('image')); disableButtons(counter, $sel.data('image-id')); } if(setIDs == true){ $('[data-image-id]').each(function(){ counter++; $(this).attr('data-image-id',counter); }); } $(setClickAttr).on('click',function(){ updateGallery($(this)); }); } });

Related: See More

Questions / Comments:

is it possible to change pop upped window size ?

Cengiz Deniz () - 7 years ago - Reply 0

Same question, if someone have the solution... Many thanks !

PapOute () - 6 years ago - Reply 0

Ok, my bad, it's ok with a simple width="" on the second part of the div, second line, at <div class="modal-dialog">

Sorry for my english, hope it can help someone :)

PapOute () - 6 years ago - Reply 0

Thank you a lot, you only need to close the <div class="col-lg-12"> </div> .it worked perfect for me.

chwarsoft () - 7 years ago - Reply 0


Leandro Romero () - 7 years ago - Reply 0

hi everone, i am trying to take this feature to my laravel 5.3 project, but i ma not sure to with file of javascript should i wrtie the js code.

Er Jon () - 7 years ago - Reply 0

I have use this code but when i try the code on mobile devices does not work

ralmaraz () - 8 years ago - Reply 0

I don't know why, but the images are not loading in the modal . I copied the code line by line, but I don't why it dosen't work. Help please

John () - 8 years ago - Reply 0

The current images are links that i added from Google. Maybe someone removed the links. Currently working on a new carousel that is larger and more flexible

5300 () - 7 years ago - Reply 0

Hi all, I've just added arrow keys (left,right) to change pics but it seems that doesn't work well if you keep pressing right arrow key http://jsfiddle.net/8o0L4e2f/

Tam Nguyen () - 8 years ago - Reply 0

Is there a way to add a hyperlink within the Caption? I have added the link code but it appears as simple text, not linked.

Shewolff () - 8 years ago - Reply 0

Can you please create a Fiddle? http://jsfiddle.net/ to show your issue, will make helping you a lot easier.

Eddie () - 8 years ago - Reply 0

Ok, I tried. Something not working in my fiddle. I just copied the code pieces but it won't load the photos in the modal. BUT my question is how to add an external hyperlink INSIDE the photo caption in the modal. So if you can help me do that I'd really appreciate it!


Shewolff () - 8 years ago - Reply 0

It's very doable, to add a link. I need some more specific information to help you out though, to where is the href going? Basically what I'll be showing you how to do is manipulate data-attributes.

Eddie () - 8 years ago - Reply 0

I tried every way I could think of to add the data-attributes. All I got was frustrated :) I even tried using the ( & q u o t; ) type characters in there and it displayed the code in the caption, but not a link.
Any link will do. What I'd like to do is use a modal/gallery as a portfolio, with a description/caption that describes the image and includes a link to a website. So...
"The Cow jumped over the Moon" - want to link the word "moon" to google.com, for instance.
thanks in advance for your help!

Shewolff () - 8 years ago - Reply 0

http://jsfiddle.net/vxy2hda... Is something like this what you are wanting to accomplish?

Eddie () - 8 years ago - Reply 0

Yes - but your links don't link to google as your code indicates. They link to themselves?

Shewolff () - 8 years ago - Reply 0

Woops, silly me. http://jsfiddle.net/vxy2hda... there you go. I had it trying to change the source of the link rather than the href.

Eddie () - 8 years ago - Reply 0

Ok, very close! And thank you again for your help!
However only the 2nd image link is working...the other two don't do anything. And can you make it so that the links are target=_blank please?

Shewolff () - 8 years ago - Reply 0

Eddie () - 8 years ago - Reply 0

Oh awesome! Perfect. Thanks soooo much! :D

Shewolff () - 8 years ago - Reply 0

No problem. If you ever need a hand with things like that don't hesitate to contact me. I'm often looking for ways to keep myself sane between big projects.

Eddie () - 8 years ago - Reply 0

Hi, I was hoping you could help me. I'm having a hard time figuring this out. I'm trying to do a modal img gallery. I can get it working for 1 image, but not any others after it. Any ideas?


Mark Elise () - 8 years ago - Reply 0

Ok, working on a fiddle now for you. Feel free to email me; edwardtate88@gmail.com

Eddie () - 8 years ago - Reply 0


Luis () - 8 years ago - Reply 0

Many thanks for this, it's just what I've been looking for (spent the past few days trying to find a fix). Cheers dude!!

James Vernon () - 8 years ago - Reply 0

you need close the div, the close <div class="col-lg-12"> </div> , great snipp!

Diego Armando Lira () - 9 years ago - Reply 0