Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

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

From: View Source

Video: 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.

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.

Show transcript

This video is part of

Image for View Source
View Source

20 video lessons · 15803 viewers

Ray Villalobos
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed View Source.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.