From the course: View Source

013 Creating a photo gallery with the Galleria jQuery plug-in

From the course: View Source

013 Creating a photo gallery with the Galleria jQuery plug-in

Hello! This is Ray Villalobos and welcome to View Source! In this episode, I'm showing you how to create galleries with a JavaScript library called Galleria. So if you're looking for a quick and easy way to add photos to your projects, then it's time to View Source. Being able to show photo galleries on your web sites is really important, because photo galleries get a lot of traffic, but rolling out an engine to create photo galleries is not fun. There are a lot of scripts and libraries out there that will simplify the process, and I like one called Galleria, because I like things that are, one; cheap and free and, two, easy to use and set up. One of the advantages to using Galleria is that it also works well with iOS devices, and allows you to navigate through the photos by using touch events. The Galleria plug-in sits on top of jQuery, so it's super compatible with a lot of browsers, and it has a lot of animation and other features that you can customize. The first thing you're going to need to do is to download the plug-in. So we'll click on this Free Download button to get the download started, and I'm going to click right here on this link to open up the files and activate it. So once you download the folder, you'll want to copy these into your project. Here's the galleria folder, you'll see that I already have it copied into my project, and the only thing that I've done here is I've taken out the regular JavaScript version of the project; we don't need two versions of JavaScript, the minified version, or the one that has .min, it's a more compact version of the library. So it's the only one that I'm using here. Inside the galleria folder, you'll also find a themes folder as well as a plugins folder. Plugins folder allows you to work with other libraries, like Flickr and Picasa. In the themes folder, you'll see that we have one standard theme called the classic theme. You can purchase additional themes from the Galleria web site if you want, but the classic one is a really good theme and it's totally free. Now, if we take a look at our document, we have a simple list of images right here and all the images are put together inside a div tag with an id of gallery. We're going to use that to target our gallery function later on. Some of the images have alt tags that have the description of the photo and title tags that have the title of the photo. Galleria will use that to add them on to your photo gallery. Those are optional, so you don't always have to use them, but it's nice to have them in there, and gives the user some additional information about your photos. So now we need to start adding the scripts into our projects. So I'm going to go into my codesnippets file and grab a link to Google's CDN version of jQuery, which I also have a local copy of right here just in case I'm working offline. So I'm going to copy this script right here, and go into our start document and I'm going to paste that right before the closing body tag, so that we are loading our library from jQuery. Now, I'm going to open up a preview by holding down the Option key and clicking on this Preview icon, this is a live preview. You see that this is just a list of photos right now, we have loaded the jQuery library, but we haven't activated the Galleria plug-in yet, we need to do a couple more things. Back into codesnippets, I'm going to grab the link to the library itself, so this is just a link to the galleria library, it's in the galleria folder, and it's the one that we loaded right there. So I'm going to copy that, and go back into the start document, after the script tags, and I'll paste it right there, and now we have loaded the Galleria plug-in. We're still not telling it what to do or which id to use for the photo, so this is going to look the same. Back into codesnippets, we're going to grab the link to the themes folder. So if you were targeting a different theme other than classic, you'll want to put the link to the proper JavaScript file there. So I'll copy that, and back into my start file, after the galleria plug-in, paste the script right there. And we're almost done, we still haven't told the Galleria plug-in to become active. So we're going to go back into codesnippets and we're going to grab this last little piece of script right here, and paste it into our start document, and that will actually activate the gallery. So if you go to your Live Preview, you can see that the gallery has been created and all the thumbnails are at the bottom and you can navigate through the thumbnails by clicking on them. It even gives you a little arrow just in case you have more photos that fit on that one screen. It allows you to navigate with left and right buttons. So this was a really easy setup. There's one thing that I don't like about the way that the template works by default. In order to see the titles you have to click on this i right here and it shows you the title and description. So I'm going to modify this photo gallery a little bit and add a little bit of a background just by adding a little bit of CSS. So I'm going to go into codesnippets, and I'm going to grab just a link to a CSS file that I created, back into my start document, and I'm going to put that at the very top, on top of the head tag, and once I do that you can see that I have a nicer background, the title and description are showing up by default, the interface has rounded edges and a drop shadow. So this is just a standard CSS file that I used to make things a little bit more to my liking. That's the nice thing about this plug-in, it's highly customizable. Now, this looks great on your local machine, so when you have this on your hard drive, this is going to load up really quick. When you put this on your server, you may notice that there's a little bit of lag between the time that the photos are loaded and the time that the Galleria plug-in takes over. So when you see them on screen, you may see all the photos come in at once, and then the interface will adjust and the Galleria plug-in will actually take over and format everything accordingly. So if you have that problem, I want to show you a quick workaround. What I'm going to do is I'm going to go into my codesnippets file, I'm going to modify the way this gallery id works. So I'm going to go into my style sheet, and right now I'm just showing the gallery with this additional line. I'm actually setting the opacity to 0, which will hide the gallery. Then I'm going to grab a piece of code right here, at the very bottom, which just changes our script, just adds this little last piece right here, and what it does is, once the window has finished loading all the photos, then it changes the opacity of the gallery id to 1, which will show the gallery. So I'm going to copy the script and replace what I have on screen, back into my start file, go all the way to the bottom, and just replace the script that I have here, paste it, and now you'll see that in our local version of the gallery, it looks exactly the same. The difference will be on the server, when you have a slide show, with a lot of photos. It's not going to load the gallery until all the photos have finished loading, and that's the best way to show off this gallery. So see you next time, and remember that when you want to learn how to do cool things on the web, the best way is to View Source.

Contents