Another Simple jQuery Gallery Idea

Another Simple jQuery Gallery Idea

Lock and Load that HTML

A co-worker had asked me for some help the other day on the jQuery running his gallery. Of course, I was more than happy to help. He ran into other issues later (which he cleared up) involving a plugin, but that doesn’t really matter in this demo/tutorial. What he wanted was to have a navigation at the top, each item pertaining to a different part of his portfolio (websites, flash work, graphic design…). Each section though had a ton of information that would increase the page load significantly if they were all loaded on the page at the same time. That ruled out putting a simple hide/show on some divs. My thought was, why don’t we put the HTML into separate files, and load them when a user clicks on one of the nav items. You can check out the gist of what was trying to be accomplished by check out the demo below.

View Demo

function imageGroup () {
		$('#holder').load('imageGroup1.html')
		$('.image1').addClass('active');
	};
	imageGroup();
	$(function () {
		$('#container a').click(function(e) {
			e.preventDefault();
			$('#container a').removeClass('active');
			$(this).addClass('active');
		});
		$('.image1').click(function(){$('#holder').load('imageGroup1.html');});
		$('.image2').click(function(){$('#holder').load('imageGroup2.html');});
	});

What its doing – and keeping it simple

I’m sure there is a much more efficient way of writing the jQuery, but I was going for something simple he would be able to add to, and understand what was going on. What is going on you ask? Great question, and if you didn’t ask this article would be over.

The first two lines deal with loading content right off the bat. So I created a function which loads the HTML from the page ‘imageGroup1.html’. Just so you know what is going on, the two external HTML pages only contain images (that’s it, no html tag, no body, nothing but the img’s). You can obviously include whatever you want in those those. The second line of the first function then adds the active class to the first ‘a’ tag, which has the class ‘active’ on it. This gives the first nav item the roll-over state on page load, which you can see in the demo. Looking at the code above, you see the line ‘imageGroup();’ which calls the function, because without it, those first lines don’t do anything. They will wait for a call that will never happen.

After that is an anonymous function (no need to name it for what we are doing here) that controls the switching of the class ‘active’ between nav items, and the loading of HTML from different pages. First is the click event on all the ‘a’ tags within the nav list. We prevent the default action of what ‘a’ tags normally do, then remove the ‘active’ class from all of them, and add it again to the specific one clicked. That moves the ‘active’ class to whatever nav item was clicked last.

Next comes the actual loading of the external HTML. This is probably where a better method could be used, but we are not dealing with anything complicated here so I kept it simple. I am guessing a case switch could be used if we were dealing with a large number of items being loaded. Each of the ‘a’ tags in the nav has a specific class, and when they are clicked, a specific HTML page gets loaded into a div with an id of ‘holder’. So if the first nav item is clicked, ‘imageGroup1.html’ gets loaded into ‘holder’, and if the second is clicked, ‘imageGroup2.html’ is loaded. That is all there is to it to this gallery.

Final Words

This is just a basic demo, so there is minimal styling going on, but think about what you can do with that. My co-worker added fancybox to it, to add some pop-ups when the images were clicked. You can add whatever the hell you want to this, like description text, fades, animations…whatever. Have fun with it, and let me know what you think!

Coupon Code: webmachine

Tags: ,

Leave a Reply