Notice: Undefined index: img in /backups/public_html/css/imgwidget/imgtest.php on line 41

Notice: Undefined variable: boxset in /backups/public_html/css/imgwidget/imgtest.php on line 44
Product Image Product Image Product Image Product Image Product Image Product Image Product Image Product Image

Click to open, hover icon to pan and zoom, hover icon to expand.

Image display widget

This widget displays thumbnails, with the standard feature of switching a preview image when each one is hovered over. What's not standard is the pure CSS pan and enlarge features. The operation is pretty simple - the box where the contents are displayed is absolutely positioned, with each medium image being a child of the thumbnail box, and displayed when the thumbnail is hovered. When the enlarge button is hovered, it displays the large-size image in the same spot, and displays a bunch of spans designed to look like a grid. Each of these spans uses the adjacent sibling operator to change the background-position of the large image when hovered, effecting panning. The enlarge button just shows a big hidden box, nothing fancy there. And with a few basic operations, you get something that looks pretty shiny.