2011
Lynda.com
Chris Converse
59m 53s
English
In this course, author Chris Converse develops an interactive video gallery for the web, working in a coding environment using a combination of HTML5 with a Flash fallback, CSS, and the open-source JavaScript library jQuery. The course shows how to design the site layout and construct the code for a player that works on multiple web browsers, platforms, and mobile devices. Techniques to enable HTML5 video on Android and ensure that older versions of Internet Explorer default to Flash instead of HTML5 are also demonstrated.
Topics include:

Preparing the graphics
Adding and linking thumbnail buttons
Designing the layout
Adding jQuery and JavaScript
Including video information in the thumbnail links
Styling the thumbnails with CSS rules
Creating a DIV container to hold the video player code
Setting up click events for the thumbnails
Incorporating the FancyBox lightbox plug-in

Introduction 6m 5s
Previewing the project across browsers and devices 3m 31s
Using the exercise files 1m 32s
Downloading and setting up Aptana Studio 1m 2s
1. Preparing the Graphics 2m 22s
Exporting image slices from Photoshop 2m 22s
2. Setting Up the Project Files 17m 44s
Creating new CSS and HTML files 5m 24s
Defining the CSS rules 8m 20s
Adding the HTML markup 4m 0s
3. Adding JavaScript to Your Project 17m 19s
Adding jQuery and JavaScript to your project 4m 16s
Adding HTML to the thumbnail links with JavaScript 7m 54s
Creating the CSS for the injected HTML 5m 9s
4. Setting Up the Video Player Code 11m 9s
Creating a div container to hold the video player code 8m 11s
Manually invoking FancyBox 2m 58s
5. Choosing Experience Options for iOS and Android 4m 10s
Activating video for Android and bypassing the lightbox 4m 10s
Conclusion 1m 4s
Where to go from here 1m 4s

http://www.lynda.com/jQuery-tutorials/Create-an-Interactive-Video-Gallery-with-jQuery/85999-2.html

Download File Size:404.85 MB

---