orthopedic pain management

Flashuser

  • Pin It

Free jQuery Photo Gallery ( Tutorial )

In this tutorial, I’ll show you how to create a minimalistic jQuery photo gallery. You can use it to present your latest works or as a photo album. You can sort projects / photos via categories menu. The gallery is cross-browser compatible so it’ll be easy for you to adapt in your project.

For this tutorial I’ve used two free jQuery libraries: Quicksand and PrettyPhoto. You can see the result that I’ve achived by combining this two jQuery plugins by clicking the preview button below. You can use the jQuery gallery in your own projects, just download the package for having access to the files. Let’s see now how the jQuery Photo Gallery was done.

jquery-photo-gallery

You may also like the following jQuery gallery inspiration articles:

HTML CODE

First create an unorded list that will contains the categories. For each category make sure will add a class with a unique name.

<ul class="portfolio-categ filter">
      <li>categories:</li>
      <li class="all active"><a href="#">All</a></li>
         	<li class="cat-item-1"><a href="#" title="Category 1">Category 1</a>
</li>
	<li class="cat-item-2"><a href="#" title="Category 2">Category 2</a>
</li>
	<li class="cat-item-3"><a href="#" title="Category 3">Category 3</a>
</li>
	<li class="cat-item-4"><a href="#" title="Category 4">Category 4</a>
</li>
        </ul>

Now create a second list for the items you would like to show. An object will look like this.

<li class="portfolio-item2" data-id="id-0" data-type="cat-item-4">	
			        <div>
                   <span class="image-block">
					<a class="image-zoom" href="images/big/pic1.jpg" rel="prettyPhoto[ gallery ]" title="Wall-E"><img width="225" height="140" src="images/thumbs/p1.jpg" alt="Wall-E" title="Wall-E" />                    
                    </a>
                    </span>
                   <div class="home-portfolio-text">
					<h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="Wall-E">Wall-E</a></h2>
                    <p class="post-subtitle-portfolio">released: 2008</p>
					</div>
                    
					</div>	
                    </li>	

There are 3 important things here that you have to take care: data-id – must be unique, data-type – include the item in a category by typing a class name for a specific category, rel=”prettyPhoto[ gallery ]” – used to open a large photo when the thumb image is clicked.

CSS CODE

The CSS code for an item is pretty simple:

.image-block{ display:block;position: relative;}
.image-block img{border: 1px solid #d5d5d5; border-radius: 4px 4px 4px 4px;background:#FFFFFF;padding:10px;}
.image-block img:hover{border: 1px solid #A9CF54;box-shadow:0 0 5px #A9CF54;}
.portfolio-area li{float: left;margin: 0 12px 20px 0;overflow: hidden;width: 245px;padding:5px;}
.home-portfolio-text{margin-top:10px;}

Now let’s add the jQuery code for the Quicksand filter categories.

// Clone applications to get a second collection
	var $data = $(".portfolio-area").clone();
	
	//NOTE: Only filter on the main portfolio page, not on the subcategory pages
	$('.portfolio-categ li').click(function(e) {
		$(".filter li").removeClass("active");	
		// Use the last category class as the category to filter by. This means that multiple categories are not supported (yet)
		var filterClass=$(this).attr('class').split(' ').slice(-1)[0];
		
		if (filterClass == 'all') {
			var $filteredData = $data.find('.portfolio-item2');
		} else {
			var $filteredData = $data.find('.portfolio-item2[data-type=' + filterClass + ']');
		}
		$(".portfolio-area").quicksand($filteredData, {
			duration: 600,
			adjustHeight: 'auto'
		}, function () {

				lightboxPhoto();
						});		
		$(this).addClass("active"); 			
		return false;
	});

Here’s the code for the prettyPhoto big image preview.

jQuery("a[rel^='prettyPhoto']").prettyPhoto({
			animationSpeed:'fast',
			slideshow:5000,
			theme:'light_rounded',
			show_title:false,
			overlay_gallery: false
		});
	
	}

CONCLUSION

That’s it for now. Download the archive and play with the settings. Stay tuned for more tutorials and freebies.

Author: Alin

Passionate about web and graphic design, photography and climbing. Follow me at Twitter , Facebook and Google+

  • Pingback: Free jQuery Photo Gallery ( Tutorial ) | Lively Flash Tuts()

  • i have learned from your tutorial. thanks

  • Pingback: Weekly Web Developers Kit – vol. 3 (3-30-2012) « CSS Tips()

  • Pingback: Free jQuery Photo Gallery | Leaflette()

  • Pingback: Nothing found for Blog 2012 04 03 29-03-12193510()

  • its the best portfolio i’ve seen it
    i will use it more quickly
    thanks

  • Michele

    Perfect tutorial.
    I love the option to filtering the photos in different categories.
    I kindly ask to you some more help.
    If I open the gallery, the default setting is that all the categories are shown.
    Can I link to the gallery from an external page specifying the category I want to be active?
    Thanks for help, and, again, great tutorial!!!

    Michele

    • Daniele Silvi

      Don’t know if it helps now, but: I just call a page with a parameter, via PHP I check if the parameter is set, and in that case, after the page is fully loaded, I use the click() method to click on the button relative to the category I recall.


      jQuery(function($){$("#'. parametrofoto)) .'").click(); });

      Unfortunately, jQuery(document).ready(function() … doesn’t work in IE, nor in Chrome; if I use: function($) it works in FF only; if I use it as above, it just doesn’t work in Chrome …
      What can I use to have the button clicked after the DOM is fully loaded ???

  • Pingback: 10 Latest jQuery Tutorials for Web Developers | ZoomZum()

  • Pingback: 15 Useful jQuery Lightbox Plugins - NaughtyDesigner()

  • Guest

    Hello looks incredible and works great too!

    Is it possible to have a caption worked into this? If it’s an easy thing, How could we go about doing it?

    Thank you for your help!

  • Is their a fix for Internet Explore? because after clicking on a link for the filter gallery then clicking on a image prettyphoto doesn’t work. It works when you haven’t click any link to filter the image in the categories but after clicking on the link it doesn’t work.

  • usman rock

    hy man can i add single image to 2 or more Category

  • Stephanie Daniel

    Hello, this is excellent, thank you. I am having an issue with IE 8. I can get the prettyphoto lightbox to work just fine, but in IE 8 the quicksand filter does not work at all. IE 9 and 10 there is no problem, both work fine. Its not my preference, but in this case I specifically need IE 8 functionality. Is there a specific fix I can use? Anyone else had this problem?

  • Pingback: 30 Easy jQuery Filter & Sort Plugins - Flashuser()

  • Savitri Rishma

    Why Lightbox and filters cant run on Google Chrome?… anyone can help, please?

  • dev

    this is good but i want to suppose to be i have category images when click first category then display light box with with all images

    can possible ????

    Rgards
    Dev

    • ker yasu

      Hi, must be very old post but this is same thing am doing. Did you happen to find solution? Any chance to share it here?
      TIA.

  • Daniele Silvi

    For me, on IE10 the background was wrongly resized after clicking a button.

    I solved using: X-UA-Compatible , IE=EmulateIE9

    Now it works, but I need to tell chrome to click a button AFTER the DOM is fully loaded …

  • Essence

    Here’s my problem: I would like to create 2 different gallery in the same page, one to display Graphic Design artworks and another for the Photography.
    Now the thing is that the “category filter” works for both, so I’ve been thinking about creating new categories (How?).. But then there would be still the problem of the “All” category that will be apply for both of them.

    In the end, I would like to insert a paginator.. Could you help?

  • siamak

    Hi, thanks a lot for your tutorial, I have a problem when using in pages’ with rtl direction, any solution???????

  • Jayson Rondina

    I will try this one out and see if this will work for me. Thanks for the tutorial.

  • Cant we use some more animations in jquery gallery . if yes than how. please help.

  • ker yasu

    Hi, this is exactly what I needed and its a life saver. I’m having issue though how to use multiple album/folder for each thumbs?
    Hope the project still on. TIA.

  • Vinayak

    How to remove default all category? I want to show only specific category images…pls help.

  • Hi, thanks a lot for your tutorial,