MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.

I'm not curious

Create an Interactive Photo Gallery with jQuery and Dreamweaver

Course Summary

Shows how to develop an interactive photo gallery for a web site using HTML, CSS, and jQuery.       

  • +

    Course Syllabus

            Previewing the project across browsers and devices
            About the exercise files
        1. Preparing the Gallery Photos
            Renaming a series of files in Adobe Bridge
            Using GREP for more intricate file renaming
        2. Creating the Layout in HTML and CSS
            Creating and linking HTML and CSS files
            Save For Web & Devices in Photoshop
            Creating empty CSS rules
            Create, nest, and class DIV tags
            Adding CSS properties for main container
            Adding CSS properties for content area
            Adding CSS properties for headings
        3. Adding and Linking Thumbnail Images
            Adding and linking the thumbnail images
            Styling the thumbnail links with CSS
            Downloading and adding jQuery to your project
            Overriding the browser's default link behavior
        4. Incorporating the Preview Images
            Creating preview images from anchor links
            Changing the preview when clicking thumbnails
            Changing the caption when clicking thumbnails
        5. Adding a Preloader
            Adding an image preload plug-in for jQuery
            Setting a dissolve transition between previews
            Implementing the preload functionality
        6. Adding a Lightbox
            Adding a lightbox plug-in for jQuery
            Creating a custom function for lightbox properties
            Setting links to activate the lightbox feature
        7. Taking Care of the Final Details
            Initializing the gallery on page load
        8. Styling the Hyperlinks
            Adding icons and styles to the zoom and contact links
        9. What's New (April 2013)?
            Activating a gallery automatically in IE9 and IE10
        10. Where to go from here
            Some ideas for further enhancements


Course Fee:
USD 25

Course Type:


Course Status:



2 - 3 hours / week

This course is listed under Development & Implementations Community

Attended this course?

Back to Top

Awards & Accolades for MyTechLogy
Winner of
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top