Demo | jQuery.popeye 2.0 | an inline lightbox alternative

Example 1

The first popeye-box uses the standard options: it floats to the left and opens to the right, its navigation and caption show on mouseover. The caption displays the html code inside the <span class="ppy-extcaption">.

By placing the navigation inside the stage area (where the image is displayed), we can get it to hover above the image.

View HTML code used in this example

<div class="ppy-outer">  <div class="ppy-stage">  <div class="ppy-nav">  Previous image  Enlarge  Close  Next image  </div>  </div>  </div>  <div class="ppy-caption">  <div class="ppy-counter">  Image <strong class="ppy-current"></strong> of <strong class="ppy-total"></strong>   </div>  <span class="ppy-text"></span>  </div>  

via dev.herr-schuessler.de

Beautiful CSS3 and jQuery....inspiring page content design

Posted via web from take notes ♫♪♪ ♫♫