When a thumbnail is clicked, let's launch a lightbox to show a larger version of the image.
We are working off the previous recipe; be sure to familiarize yourself with the concepts of the scrolling thumbnail list. Here we will add a pop-up-like lightbox overlay that will show a full version of any thumbnail image in our scrolling thumbnail display.
Continue the previous recipe and make it better by launching a lightbox on mouse-click. Style the lightbox such that the overlay uses a semi-transparent PNG image to partially obscure the background of the page.
<script type="text/javascript" src="mootools-1.3.0.js"></script> <!-- let's n0t forget the MORE --> <script type="text/javascript" src="mootools-more-1.3.0.js"></script> </head> <body> <div id="pics_outer"> <div id="pics_inner"> <img src=”04-08_01.jpg”/> ... <img src=”04-08_10.jpg”/> </div> <...