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

Using the Colorbox plugin to build a slideshow gallery

From: jQuery for Web Designers

Video: Using the Colorbox plugin to build a slideshow gallery

Using jQuery, you have access to a vast number of plugins made by developers all over the world solving all kinds of web design problems. Here, on this example site, I have a variety of photos of different flowers. And if I click one, I can see that flower in the context of an arrangement. This is nice but it could be better. I don't like having to go to another page to see this. So, these days, using a lightbox type plugin is way to make this nicer. Where the larger image appears in an overlay right here in the context of the original page.

Using the Colorbox plugin to build a slideshow gallery

Using jQuery, you have access to a vast number of plugins made by developers all over the world solving all kinds of web design problems. Here, on this example site, I have a variety of photos of different flowers. And if I click one, I can see that flower in the context of an arrangement. This is nice but it could be better. I don't like having to go to another page to see this. So, these days, using a lightbox type plugin is way to make this nicer. Where the larger image appears in an overlay right here in the context of the original page.

So in the movies we're going to look at Colorbox, which is a jQuery plugin that I really enjoy for solving this kind of problem. Here it is, on jacklmoore.com. Colorbox is a very well done and well-supported plugin. If you look at the Changelog, you'll see that it is updated constantly. Let's take a look at some of the demos, so here are various demonstrations of Colorbox in action, and as you can see, you get an overlay, and you can page through a variety of photos. This is just a ticket, and there are lots of different ways that this can be used, there is different kinds of transitions between them, you can fix the dimensions.

Basically colour box allows you to change just about anything you might want to in your Lightbox, without having to modify the code or do a whole a lot of extra work It's also very theme-able. You can make it look just about exactly how you want with just CSS and some images perhaps. So we're going to use it here on this page. The first step in using any jQuery plugin, of course is to install it. So let's get a copy of it. I'm going to download this, and he has a link right from GitHub. And it sends it right into my downloads folder. And here we are, my downloads folder.

Here's the zip file, so on my Mac, I can just double-click this to decompress it. Open this up and now there's a whole bunch of stuff here. There's a ReadMe, and all the examples, and all that. What I really need, is the plugin File. And there are two versions here, and many plugins will do this There's a naming convention in jQuery plugins to use, jquery. And the name of the plugin, and, and end it with of course the. js extension for JavaScript. And there's two versions here. There's the regular one, which is the one that you can read, and is good for development. And then there's the minimized version, where all the code has been squished up, all the comments have been removed, and it's as small as possible.

Which makes it as small as possible, and is great for using in a production environment. We're going to use that version, because we're not going to be reading the code. So I'm going to drag this over into my project and then open up my colorbox.html file. Okay, so here we are and I'm going to scroll down to the bottom of my file. This is where most of the Javascript lies. And, indeed, this is where you want most of your stuff to go, for performance reasons. So there's a lot of other stuff already loaded. And to make Colorbox available, I need to add a script tag to include it. So let's copy one of these existing ones.

I'm going to change the source. And the name of file is jQuery.colorbox-min.js. Okay, so that's in. (NOISE) Now let's go back to this page, and just look and see how we start using it. Okay, so there's jQuery$.colorbox. So I should have a colorox method available in jQuery if I've done this correctly. So I'll go back to my colorbox.html file loaded in my browser. We reload. Now, without getting into the implementation details just yet, of how to use Colorbox on elements on the page.

I can just check for it's existence to make sure that I haven't installed it wrong. First by looking to see if there are any errors here in the console. They're aren't, so that's good. And then I can type the $., and start typing the name of the method. And there it is, Colorbox. Okay, great. So I know that Colorbox is available, once I start to try and use it. I've at least gotten this far without mistakes. And this procedure works for just about any jQuery plugin that you might be interested in. In this case, we're working with a site that was built for another course, which is called Applied Interaction Design here on lynda.com. And this was built as if it were for a real client.

So if we go back and look at the file, you could see that there's obviously a lot of other jQuery here. Including this line, which says plugins. This contains a bunch of jQuery plugins all squished into one single file. And in the original installation of this, Colorbox was one of those plugins. I've broken it out for our purposes. And for the purpose of subsequent lessons, you're going to see it in a different location. It's going to be here in the js folder, along with the other plugins. So it'll be jQuery.colorbox-min.js. And it's going to be here instead. Because that's where I've provided it for you in the exercise files.

And when you're working with any plug in, you're just going to install them like this, and get started using them. So going forward, we're going to actually start using Colorbox for real.

Show transcript

This video is part of

Image for jQuery for Web Designers
jQuery for Web Designers

37 video lessons · 11457 viewers

Joe Chellman
Author

 
Expand all | Collapse all
  1. 2m 17s
    1. Welcome
      1m 4s
    2. What you should know
      37s
    3. Using the exercise files
      36s
  2. 12m 0s
    1. jQuery is a JavaScript library?
      1m 15s
    2. When to use jQuery
      2m 51s
    3. Alternatives to jQuery
      1m 25s
    4. Which version of jQuery to use
      1m 50s
    5. How to install jQuery
      3m 21s
    6. Reference materials
      1m 18s
  3. 19m 19s
    1. Getting ready
      2m 26s
    2. Selecting elements to use
      3m 54s
    3. Performing multiple operations on the same line with chaining
      2m 30s
    4. Using classes to find what you're looking for
      3m 52s
    5. Adding, modifying, and removing content dynamically
      4m 3s
    6. Challenge: Form feedback
      1m 12s
    7. Solution: Form feedback
      1m 22s
  4. 18m 28s
    1. Triggering a change based on activity with event binding
      4m 37s
    2. Reading and changing values
      4m 17s
    3. Working with HTML attributes
      4m 55s
    4. Challenge: Dynamic contact form
      1m 27s
    5. Solution: Dynamic contact form
      3m 12s
  5. 16m 42s
    1. Using the Colorbox plugin to build a slideshow gallery
      4m 22s
    2. Implementing Colorbox on your site
      2m 46s
    3. Changing Colorbox options
      5m 53s
    4. Challenge: Convert to a slideshow
      1m 6s
    5. Solution: Convert to a slideshow
      2m 35s
  6. 28m 37s
    1. Using jQuery or CSS to animate elements
      2m 24s
    2. Creating simple jQuery animations
      4m 35s
    3. Animating numeric properties with animate()
      4m 56s
    4. Understanding animation easing
      4m 4s
    5. Putting it together: Flowers in the cart
      6m 4s
    6. Callbacks: What to do when the animation ends
      3m 27s
    7. Challenge: Improve the animation
      1m 3s
    8. Solution: Improve the animation
      2m 4s
  7. 4m 45s
    1. More fun plugins
      2m 38s
    2. What's next: More jQuery
      50s
    3. What's next: More JavaScript
      1m 17s

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.

Join now "Already a member? Log in

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 jQuery for Web Designers.

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.