Join Joe Chellman for an in-depth discussion in this video Solution: Convert to slideshow, part of jQuery for Web Designers.
- [Voiceover] Let's take a look at my solution…to this Color Box challenge.…If I click one of the images,…it opens up the slideshow,…and the slides play automatically.…We have a fade transition here,…my background is, not particularly opaque,…and the counter says arrangement two of four,…referring to these flower arrangements.…Okay, let's take a look at the options.…Here we are in the script file.…The rel and the maxWidth were already there.…Then we have a transition option,…which is set to fade, changing it from the default elastic.…I also added the speed option,…just to make the transition a little faster.…
But that wasn't required.…Next, I set the opacity down to 0.5.…This is on a scale from zero to one,…with zero being completely transparent,…and one being completely opaque.…Then of course, we have the all-important slideshow option,…set to true, which makes these images autoplay.…And then the slideshow speed is set to 3,000,…which is 3,000 milliseconds, or three seconds per slide.…And then finally, we have the little template…
Author
Released
9/1/2016- When to use jQuery
- Installing jQuery
- Setting up functions
- Using jQuery classes
- Modifying the DOM
- Event binding
- Reading and setting values
- Integrating plugins
- Animating websites with jQuery
Skill Level Intermediate
Duration
Views
Related Courses
-
GitHub for Web Designers
with James Williamson3h 56m Intermediate
-
Introduction
-
Welcome1m 13s
-
What you should know1m 29s
-
Challenges36s
-
-
1. jQuery Introduction
-
When to use jQuery2m 59s
-
Alternatives to jQuery1m 37s
-
Which version to use2m 56s
-
How to install jQuery5m 5s
-
Reference Materials3m 3s
-
2. Essential Concepts
-
Set up functions3m 15s
-
Select elements5m 51s
-
Shorter code with chaining4m 22s
-
Use classes6m 11s
-
Modify the DOM5m 46s
-
Challenge: Form feedback1m 45s
-
Solution: Form feedback2m 9s
-
-
3. It's Easier in jQuery
-
Event binding6m 20s
-
Read and set values5m 9s
-
Attributes and properties6m 57s
-
-
4. Integrate a Plugin
-
Initialize the plugin3m 47s
-
Change gallery options6m 14s
-
5. Animation
-
Simple animations8m 28s
-
Animate numeric properties5m 26s
-
Easing4m 1s
-
Conclusion
-
Next steps: Plugins3m 3s
-
Next Steps: jQuery1m 1s
-
Next Steps: JavaScript1m 12s
-
- Mark as unwatched
- Mark all as unwatched
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.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Solution: Convert to slideshow