Awkward Showcase - Un slideshow jQuery complet pour vos sites web

Awkward Showcase est un slideshow jQuery permettant d'afficher dynamiquement plusieurs slide de contenu riche avec des fonctionnalités intéressantes comme des tooltips ...

Ce slider vous permettra de donner une dynamique à votre site en le présentant à votre guise:

• Miniatures intégrées des slides sur le bas ou droite
• Affichage normal avec titres
• Affichage du slideshow en 100% sur la page
• Affichage en mode diapo qui se suivent

Le plugin jQuery intègre un système de tooltips intéressant pour commenter directement vos images.

Il est possible d'ajouter une légende sous les images, de gérer différentes tailles d'images (le slideshow peut gérer les hauteurs dynamiquement).

D'un point de vue utilisation, voici comment présenter votre HTML:

<div id="showcase" class="showcase">
    <!-- Each child div in #showcase represents a slide -->
    <div class="showcase-slide">
        <!-- Put the slide content in a div with the class .showcase-content -->
        <div class="showcase-content">
            <!-- If the slide contains multiple elements you should wrap them in a div with the class
            .showcase-content-wrapper. We usually wrap even if there is only one element,
            because it looks better. -->
            <div class="showcase-content-wrapper">
                <img src="images/01.jpg" alt="01" />
            </div>
        </div>
        <!-- Put the caption content in a div with the class .showcase-caption -->
        <div class="showcase-caption">
            The Caption
        </div>
        <!-- Put the tooltips in a div with the class .showcase-tooltips. -->
        <div class="showcase-tooltips">
            <!-- Each anchor in .showcase-tooltips represents a tooltip.
            The coords attribute represents the position of the tooltip. -->
            <a href="http://www.awkward.se" coords="634,130">
                <!-- The content of the anchor-tag is displayed in the tooltip. -->
                This is a tooltip that displays the anchor html in a nice way.
            </a>
            <a href="http://www.awkward.se" coords="356, 172">
                <!-- You can add multiple elements to the anchor-tag which are display in the tooltip. -->
                <img src="images/glasses.png" />
                <span style="display: block; font-weight: bold; padding: 3px 0 3px 0; text-align: center;">
                    White Glasses: 500$
                </span>
            </a>
        </div>
    </div>
    <div class="showcase-slide">
        <div class="showcase-content">
            <div class="showcase-content-wrapper">
                Content...
            </div>
        </div>
    </div>
</div>

Et le Javascript pour instancier le slideshow:

$(document).ready(function()
{
    $("#showcase").awShowcase(
    {
        content_width:  700,
        content_height: 470
    });
});

A tester !

Site Officiel