EXPERIENCED MANAGER, DEVELOPER, AND ANALYST

This jQuery feature is custom coded from scratch and designed to allow the user to hover over an image and dynamically enlarge the image. A mouse click is not required with the exception of using tap on a mobile browser. The full size image is automatically maximized to fit on the screen, centered vertically and horizontally, and accounts for the size of the browser window. On a desktop computer, to view the largest image possible, maximize your browser window.

How the code works:

• Attaches hover events to thumbnail images within HTML containers identified by classes.
• Hovering creates an overlay container to hold the full size image, match the hovered image's size and position, and track the hover event.
• Downloads (or retrieves from cache) the image's full size version referenced by the HTML container.
• On the start of the hover, calculates maximum viewable browser window size less a margin.
• The code animates the image to expand to full or maximum proportional size within the calculated view area, centered vertically and horizontally.
• When the user hovers out of the overlay area (or taps the expanded image on a mobile browser), the closing process triggers and the overlay deactivates.

In the Photoshop/Gimp section of the site, the jQuery Cycle Plugin was customized with play, pause, forward and backward buttons designed from scratch to highlight graphics created with Photoshop and GIMP. The custom coded jQuery image hover and enlarge feature, as detailed in the above section, was also integrated into the jQuery Cycle Plugin. The jQuery Cycle Plugin was further customized to automatically pause while a slide or image is hovered over within the slide.

You will notice that on the top-right section of the Site, a set of links to each page on this Site are iterated randomly. The iteration was done with jQuery and use of the jQuery Cycle Plugin.

To the right you will see a duplication of this iteration feature (the randomness of the links displayed is independent) appended to the section of the page with the use of the jQuery clone feature. This demonstrates a use of HTML, CSS, JavaScript, jQuery and the understanding of the four to create a combined effect.