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

Changing Colorbox options

From: jQuery for Web Designers

Video: Changing Colorbox options

Not to sound like a book and record but I really quite like Colorbox. It has a lot of options and in this movie, we are going to take a look at some of those that you can use to customize this very easily. So, when I open this Colorbox and then paging through, everything is cool. What happens if I collpase this window down. The Colorbox is still really big, it does not adapt to the size of my window. I don't like that very much so we're going to change that. First I'm going to look at the file and scroll down to my Colorbox. Pay no attention to what's commented out for the moment; we're just concerned with the actual implementation that's on the page right now.

Changing Colorbox options

Not to sound like a book and record but I really quite like Colorbox. It has a lot of options and in this movie, we are going to take a look at some of those that you can use to customize this very easily. So, when I open this Colorbox and then paging through, everything is cool. What happens if I collpase this window down. The Colorbox is still really big, it does not adapt to the size of my window. I don't like that very much so we're going to change that. First I'm going to look at the file and scroll down to my Colorbox. Pay no attention to what's commented out for the moment; we're just concerned with the actual implementation that's on the page right now.

Currently I just have this block in here that's setting the grouping. I don't have to know anything really about JavaScript to know that this is doing something but if I do know a little bit of JavaScript I know that this is a JavaScript object. This is a name and this is a value, and I could set a bunch of these to change different options. So, let's reformat this a little bit so that it's easier to tease these things apart, and now I am going to visit the options that are available to see if I can accomplish what I want to. So, what I am looking for is something that will keep the photos no bigger than the window size. So, here I am again on the Colorbox page and let's scroll down past usage to see its settings.

You'll find these usually under settings or options, and as you can see, if we just scroll there are rather a lot of them, so these are nicely grouped but what I'm looking for is something relating to the width of the window so let's just search for a width. Okay the first thing that comes up is scale photos, so reading this it looks like Colorbox will scale the photo's down if I set some width parameters. Okay that sounds promising, so we're going to remember this what else do we have, dimensions okay we have width, inner width and max width. We also have some default values in this second column.

Alright, this looks really good. I'm going to grab this max width, because that's what I want. I don't want the photos to be any larger, but if they can be as large as they actually are, that would be good. So I want a max width. Let's copy this and switch back over here. So I'm going to add some more keys and values to my object. You can see that this first one was not a string. For consistency sake I'm going to make it into a string like the other ones. Most properties will work either way. So I want my max width to be say, 90% of the window. That way it just won't get any bigger and they'll be a little bit of room on the sides.

And then I also remembered that there was that scale photos, which will make sure that the photos scales down to fit within this. So I'm going to set that to true save this and switch back, okay. I'll reload, now at this window size everything looks good and it doesn't scale down immediately, although it does move a little. So let me shrink my window and try this again very nice now it responds to the width of the window and keeps everything nicely in place and this works for all of the photos. Excellent. So you can use all of these options, and customize this thing to your heart's content.

If you look at the examples, and then View Source on this page, here are a bunch of settings that have been used to create these different Colorboxes in these different states. I want to show you another few examples of how you can use these settings to do interesting things. So I'm going to comment out this first section. And then start bringing out some of these that are in the other comment so that they'll actually work. So I'm just applying Colorbox to the first list item that's a child of flower items and then grabbing its link. And in this case I'm using the href element to pull in the content of a stub HTML file.

So instead of loading an image, instead of referring at all to the href attribute of that anchor, I'm just loading whatever I want. So let's see what that looks like. I save this, switch over to my browser, and reload. Wait a second, this content failed to load. Let's look at the console, see what happened there. I'm running into this dread axis control allow origin error. Basically, this is a security protocol where the browser is trying to stop you from loading something from an unknown website. Chrome is pretty strict about this. To get around this, for now, we're going to switch over to Safari.

The current version of Safari does not implement this in the same way because it recognizes that, with the file protocol, I'm just loading another local file. So it's probably fine. And the example loads. Now, of course, this Colorbox is way too wide so I'd need to adjust some other options to make it look nice, but it does load. If you're using Firefox, you'll also see the example works there, at least of the current version. But if you do want to use Chrome you can still get this example to work if you load the files either onto a web server on the internet or if you use a local web server.

You can learn about that in the course installing, Apache, MySQL and PHP here on lynda.com. If you are using a Mac you could use something like Memp or XANP, that's XANP on other platforms. There are various solutions like this that work for you that will allow you to load up a local web server and get around that area that happens in chrome. Turning to some of these other examples. Get this one up, pull this one back in, this is acting on the second item and instead of pulling in something from an external file, I'm actually setting the HTML of the Colorbox manually so let's save this switch over to Chrome and look at it.

I reload, click the second item and here we are. Now the styles are a little messed up, we'd need to adjust this, but you can see that I can set the content of the Colorbox manually. That's pretty interesting. And then last, we can add these in at the same time, I'm grabbing the third item and this time opening a video from YouTube. And I have to set several options for this to work correctly. First I have to set the href so it pulls in the video from YouTube. I need to tell Colorbox to load this as an iframe because it's coming from an external website. And then I'm choosing to set the width and the height because I want the video to appear at a certain dimension.

All of these options are available on the Colorbox website. So let's switch to Chrome and reload, try it out. And there we go. This is a free sample from a course here on lynda.com that you can see over on Youtube. So you can see that not only do these options change the appearance, I can drastically change the content that's available in my Colorbox. So with the combination of J query's powerful selector engine and then Colorbox's powerful options, you can take almost anything on your page and load it into a light box.

Show transcript

This video is part of

Image for jQuery for Web Designers
jQuery for Web Designers

37 video lessons · 11464 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.