jQuery.popeye 2.1

• Download source
• Use the Wordpress plugin
• Read the blog entry
• Request a new feature

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.

No need to read this, just dummy text ;-) Vivamus ut nisi id libero interdum pretium. Vestibulum lorem. Sed suscipit justo at lectus. Ut viverra eros in urna. Pellentesque augue libero, bibendum eu, pellentesque a, convallis vitae, neque. Duis vel leo et mauris laoreet porttitor. Fusce venenatis libero a elit. Nunc tincidunt, mi id ornare rhoncus, elit purus suscipit neque, ut semper quam leo vel dolor. Aenean ultrices. Pellentesque vel purus. Maecenas ultricies ipsum at libero. Aenean sed turpis. Mauris eleifend, lectus tempus hendrerit dignissim, odio sem interdum pede, at tristique urna ligula vitae eros. Proin feugiat consequat tellus. Morbi odio lectus, pharetra ac, auctor eu, rutrum vel, dui. Sed nec lectus ac velit sollicitudin pharetra. Pellentesque magna nunc, tincidunt vitae, iaculis quis, convallis hendrerit, enim. Nam eu mauris non odio sollicitudin cursus. Nulla hendrerit.

View HTML code used in this example

<div class="ppy-outer">
    <div class="ppy-stage">
        <div class="ppy-nav">
            <a class="ppy-prev" title="Previous image">Previous image</a>
            <a class="ppy-switch-enlarge" title="Enlarge">Enlarge</a>
            <a class="ppy-switch-compact" title="Close">Close</a>
            <a class="ppy-next" title="Next image">Next image</a>
        </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>

Example 2

The second popeye-box has the following user-defined options: direction: 'left' - open to the left. caption: false - do not display captions (even though the images have alt tags with text). navigation: 'permanent' - the navigation is always visible.

The navigation stays fixed to the right of the image. Absolute poisitioning plays a key role in displaying the navigation wherever you want - to the left, right, below or above the image.

There is no enlarge button, but a click on the image enlaregs and shrinks it nevertheless.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras euismod risus non diam. Proin et neque. Fusce molestie eros et urna. Aliquam sed enim nec lacus bibendum suscipit. Sed varius, quam nec aliquam sagittis, risus sapien luctus nisi, sit amet convallis risus metus a mauris. Curabitur aliquam ultrices est. Pellentesque felis. Mauris luctus orci id justo. Mauris tincidunt massa nec pede. Proin auctor suscipit augue.

Vivamus ut nisi id libero interdum pretium. Vestibulum lorem. Sed suscipit justo at lectus. Ut viverra eros in urna. Pellentesque augue libero, bibendum eu, pellentesque a, convallis vitae, neque. Duis vel leo et mauris laoreet porttitor. Fusce venenatis libero a elit. Nunc tincidunt, mi id ornare rhoncus, elit purus suscipit neque, ut semper quam leo vel dolor. Aenean ultrices. Pellentesque vel purus. Maecenas ultricies ipsum at libero. Aenean sed turpis. Mauris eleifend, lectus tempus hendrerit dignissim, odio sem interdum pede, at tristique urna ligula vitae eros. Proin feugiat consequat tellus. Morbi odio lectus, pharetra ac, auctor eu, rutrum vel, dui. Sed nec lectus ac velit sollicitudin pharetra. Pellentesque magna nunc, tincidunt vitae, iaculis quis, convallis hendrerit, enim. Nam eu mauris non odio sollicitudin cursus. Nulla hendrerit.

View HTML code used in this example

<div class="ppy-outer">
    <div class="ppy-stage-wrap">
        <div class="ppy-stage">
            <div class="ppy-counter">
                <strong class="ppy-current"></strong> / <strong class="ppy-total"></strong> 
            </div>
        </div>
    </div>
    <div class="ppy-nav">
        <div class="ppy-nav-wrap">
            <a class="ppy-next" title="Next image">Next image</a>
            <a class="ppy-prev" title="Previous image">Previous image</a>
        </div>
    </div>
</div>

Example 3

Here you can see the slideshow in action. Just click the play/pause button to toggle the slideshow on and off. Works in both normal and enlarged mode.

In addition, in this example I'm using some fancy new CSS features like semitransparent gradients that probably won't work in the next 500 Versions of Internet Explorer.

Vivamus ut nisi id libero interdum pretium. Vestibulum lorem. Sed suscipit justo at lectus. Ut viverra eros in urna. Pellentesque augue libero, bibendum eu, pellentesque a, convallis vitae, neque. Duis vel leo et mauris laoreet porttitor. Fusce venenatis libero a elit. Nunc tincidunt, mi id ornare rhoncus, elit purus suscipit neque, ut semper quam leo vel dolor. Aenean ultrices. Pellentesque vel purus. Maecenas ultricies ipsum at libero. Aenean sed turpis. Mauris eleifend, lectus tempus hendrerit dignissim, odio sem interdum pede, at tristique urna ligula vitae eros. Proin feugiat consequat tellus. Morbi odio lectus, pharetra ac, auctor eu, rutrum vel, dui. Sed nec lectus ac velit sollicitudin pharetra. Pellentesque magna nunc, tincidunt vitae, iaculis quis, convallis hendrerit, enim. Nam eu mauris non odio sollicitudin cursus. Nulla hendrerit.

Nam viverra, tortor nec cursus accumsan, purus purus ultricies mauris, in dignissim orci dui at est. Morbi non quam at ante cursus posuere. Sed ornare sem vitae diam tempor blandit. Nam risus diam, faucibus eget, fermentum et, dignissim eu, tellus. Praesent non justo. Proin vestibulum diam at mi. Cras molestie eleifend mi. Morbi massa enim, auctor at, rhoncus nec, consequat nec, diam. In laoreet lacus vel velit. Sed vulputate commodo ligula.

View HTML code used in this example

<div class="ppy-outer">
    <div class="ppy-stage">
        <div class="ppy-nav">
            <div class="nav-wrap">
                <a class="ppy-prev" title="Previous image">Previous image</a>
                <a class="ppy-play" title="Play Slideshow">Play Slideshow</a>
                <a class="ppy-pause" title="Stop Slideshow">Stop Slideshow</a>
                <a class="ppy-next" title="Next image">Next image</a>
            </div>
        </div>
        <div class="ppy-counter">
            <strong class="ppy-current"></strong> / <strong class="ppy-total"></strong> 
        </div>
    </div>
    <div class="ppy-caption">
        <span class="ppy-text"></span>
    </div>
</div>

Donate

If you really, really like the plugin and consider it worth a couple of bucks, you can donate whatever you like via PayPal.