Integrating Twitter Bootstrap with PrettyPhoto
Images are a driving force of the web. Compelling images can bring visitors to your website, and exciting displays can keep them there. Over the past few months we have delved into the possibilities of Twitter Bootstrap. At times, however, Bootstrap alone does not contain every component that we may need for a project.
Today we will discover how to complement a Twitter Bootstrap-powered image gallery by implementing the PrettyPhoto lightbox plugin! The end result will be an excellent template to build out image galleries that are simple to put together and incredibly easy to manage.
View The Demo | Download the Source
To accomplish the lightbox effect we will be using the PrettyPhoto jQuery plugin
Setting the plugin is as simple as you might hope.
- Download PrettyPhoto from their website
- Extract jquery.prettyPhoto.js, prettyPhoto.css and the default theme folder and place them into your respective directories within your project.
- Ensure that each of the linked theme images is pointed in the correct direction within the prettyPhoto.css file
- Within my project, I included the default theme directory within the img folder. Therefore, I opened up the prettyPhoto.css file and changed all references to the default theme accordingly.
Setting Up Bootstrap
To set up our gallery I have made use of the thumbnails component of Bootstrap.
Why use thumbnails?
Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.
Simple, flexible markup
Thumbnail markup is simple; a ul with any number of li elements is all that is required. It’s also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.
Uses grid column sizes
Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.
Our thumbnail markup is easy to use as well.
<ul class="thumbnails">
<li class="span3">
<a class="thumbnail" rel="lightbox[group]" href="img/pics/1.jpg"><img class="group1" src="img/pics/1.jpg" title="Image Title" /></a>
</li> <!--end thumb -->
<li class="span3">
<a class="thumbnail" rel="lightbox[group]" href="img/pics/2.jpg"><img class="group1" src="img/pics/2.jpg" title="Image Title" /></a>
</li> <!--end thumb -->
<li class="span3">
<a class="thumbnail" rel="lightbox[group]" href="img/pics/3.jpg"><img class="group1" src="img/pics/3.jpg" title="Image Title" /></a>
</li> <!--end thumb -->
<li class="span3">
<a class="thumbnail" rel="lightbox[group]" href="img/pics/4.jpg"><img class="group1" src="img/pics/4.jpg" title="Image Title" /></a>
</li> <!--end thumb -->
<li class="span3">
<a class="thumbnail" rel="lightbox[group]" href="img/pics/5.jpg"><img class="group1" src="img/pics/5.jpg" title="Image Title" /></a>
</li> <!--end thumb -->
<li class="span3">
<a class="thumbnail" rel="lightbox[group]" href="img/pics/6.jpg"><img class="group1" src="img/pics/6.jpg" title="Image Title" /></a>
</li> <!--end thumb -->
<li class="span3">
<a class="thumbnail" rel="lightbox[group]" href="img/pics/7.jpg"><img class="group1" src="img/pics/7.jpg" title="Image Title" /></a>
</li> <!--end thumb -->
<li class="span3">
<a class="thumbnail" rel="lightbox[group]" href="img/pics/8.jpg"><img class="group1" src="img/pics/8.jpg" title="Image Title" /></a>
</li> <!--end thumb -->
</ul><!--end thumbnails -->
We use the width of span3 for each gallery item, though this could easily be any markup that works for your project. Bootstrap offers a host of cool ways to outfit your gallery.
Extending Bootstrap is simple and fun! Feel free to play around with components and resources. If there is one thing I would recommend users focus on it would be making sure that elements introduced in concert with the Twitter Bootstrap framework be equally responsive. Go nuts, but remember to keep it mobile friendly!
Brock: Gallery fails in IE10: enlarged image shows only a portion of the first thumbnail instead of a series of thumbnails. If I remove the bootstrap.css, all works fine. I suspect bootstrap’s img {width:100%} is the culprit. I bet if we override that within the prettyPhoto css, probably at the li > a > img level, we can make it work.
OK, adding div.pp_gallery ul li a img {width:50px;height:33px;} displays thumbnails within an expanded image in IE10, but the list is always short one image. I found this so even in Caron’s Image Gallery demo when viewed in IE10. Just one more IE quirk, eh?
Hi, I have a question about an error I am receiving when I implemented this code.
When I click on the thumbnails to enlarge, I get the error: “Image cannot be loaded. Make sure the path is correct and image exist”. I’m thinking that this is an error in the plugin.
In your article, you said:
“Setting the plugin is as simple as you might hope.
Download PrettyPhoto from their website
Extract jquery.prettyPhoto.js, prettyPhoto.css and the default theme folder and place them into your respective directories within your project.
Ensure that each of the linked theme images is pointed in the correct direction within the prettyPhoto.css file
Within my project, I included the default theme directory within the img folder. Therefore, I opened up the prettyPhoto.css file and changed all references to the default theme accordingly.”
I am confused on what you mean by changing all references within the prettyPhoto.css file. What exactly would you change in the original code to make sure the paths are correct.
Do you think this would fix my problem? Thanks so much for your help. I am new to Twitter Bootstrap and this is the first time I have used a plugin like this so your help is very much appreciated.
Thanks again,
Rachel
Rachel:
If you’re using a separate stylesheet for your CSS, just make sure your CSS path to each image moves up one level to your images folder. So, reference each image like this:
Robin
Rachel:
Sorry, for some reason, the coding I added didn’t come thru in the comment. Use ../image.jpg in your CSS to move up one level to your images folder.
Robin
nice tutorial..but the source code helped for me thank you
Thanks for the post! It’s definitely helping out. Im creating my first complete website, and am using this as a template for the gallery page. I had a few questions though.
1. Is there an easier way to add mutliple image files? I tried to look into jquery blueimp file uploader, but I am still too new to development to understand how that will work.
2. I’ve added about 15 images. The load time for the page is very long with all the images for a gallery. How would I reduce this? Would I use sprites when using a gallery page like so?