Bootstrap Modal Lightbox – Display Clicked Item

Last weekend I decided to revamp smanthakoffordphoto.com with Bootstrap to 1) test my profiency and 2) improve mobile access on the site.

I created a modal lightbox, just like the original site (and after some testing figured out the simple and elegant solution to a responsive images that always fit in the window, desktop or mobile).  The standard Bootstrap Carousel has one issue: it sets the first slide as active by statically adding the ‘active’ class to the div, and therefore doesn’t display the clicked image using ” data-toggle=”modal” data-target=”#myModal” “.

My immedate thought was “apply the ‘active’ class through a javascript function, and remove it likewise when closing the window”.   This turned out to be the perfect solution, and I was able to hack out the following design:

Each gallery thumbnail/image has the follow onclick, index adjusted accordingly (can use simple methods whether html or php).

<div …. onclick=”setActive(1)”>

<div …. onclick=”setActive(2)”>

what is setActive?  It’s my function for adding the “active class” to the corresponding lightbox.

// add to nth div in div.carousel-inner

function setActive(num) {

var c = document.getElementById(“carouselin”)

var d = c.children[num];

d.className += ” active”;

}

The carousel items have a ” data-dismiss=”modal” ” and the following snippet for removing class items I found on Stack Overflow (link).

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s