A l’image de JQZoom, Cloud Zoom va donc être activer au survol d’une image. Le zoom peut ainsi remplacer l’image en elle même ou s’afficher à coté.

Lien :

• Cloud Zoom

Son implémentation est simple et est facilement paramètrable :

$("#divID").PikaChoose({
show_captions:true,
slide_enabled:false
});

Les options possibles sont entres-autres :

• vitesse et effets de transition,
• dimensions des minatures,
• …

Lien :

• Pikachoose

The Most Awesome jQuery Image Slider

Et faut avouer, qu’il est en effet sacrément bien réussi.

Pas moins de 9 effets de transition, une version « packed » de 6kb, que demander de plus ?

A oui, il fait aussi défiler les images…

Démo, paramètres et téléchargement sur le site officiel.

Lien :

• Nivo – The Most Awesome jQuery Image Slider

Non ce plugin ne va pas redimensionner ou encore afficher un diaporama d’images.
imgAreaSelect permet de créer un rectangle de sélection dans vos images.

L’utilité : par exemple réaliser un effet de zoom sur une partie d’une image.

Démo, source et documentation sur le site officiel.

Lien :

• imgAreaSelect

Voici comment procéder en CSS d’une part, et en Javascript à l’aide de jQuery d’autre part.

Une petite icone devant les liens menant à des documents Pdf, Doc, Excel ou autre c’est possible en CSS.

a[href$=".pdf"]  {
    background: url(../images/icons/pdf.gif) top left no-repeat;
    padding-left:16px;
}
a[href$=".doc"]  {
    background: url(../images/icons/doc.gif) top left no-repeat;
    padding-left:16px;
}
a[href$=".xls"]  {
    background: url(../images/icons/xls.png) top left no-repeat;
    padding-left:16px;
}

Notons qu’Internet Explorer 6 (oui encore lui), ne comprend pas ces sélecteurs css Heureusement il y a jQuery Il est en effet possible de faire la même chose.

On peut par exemple ajouter une classe spécifique à nos liens selon l’extension qui reprend les propriétés CSS ci-dessus :

$(document).ready(function(){
    $("a[@href$=pdf]").addClass("pdf");
    $("a[@href$=doc]").addClass("doc");
    $("a[@href$=xls]").addClass("xls");
});

Ou on peut utiliser ce petit plugin :

(function($){
    $.fn.iconize = function(params){
        // paramètres par défaut
        var params = $.extend({
            paddingLeft: '16px',
            height: '16px',
            pathToImage: 'images'
        }, params);

        // process en returnant l'object
        return this.each(function(){
            var $$ = $(this);

            if( $$.attr('href').length>0 )
            {
                var width = $$.width();
                var fichier = $$.attr('href');
                var extension = fichier.substr( fichier.lastIndexOf( "." ) + 1 );

                $$.css({
                    'backgroundImage' : 'url(' + params.pathToImage + '/' + extension.toLowerCase() + '.png)',
                    'backgroundPosition' : 'top left',
                    'backgroundRepeat' : 'no-repeat',
                    'display': 'block',
                    'height': params.height,
                    'lineHeight': params.height,
                    'paddingLeft': params.paddingLeft,
                    'width': width
                });
            }
        });
    };
})(jQuery)

Et pour l’appeler :

// appel par défaut
$( "a" ).iconize();

// en spécifiant des paramètres
$( "a" ).iconize( { paddingLeft: '32px', height: '32px', } );

En plus c’est simple comme un :

$('img').slickWrap();

Lien :

• jQSlickWrap

En effet, cette démo du site pushingpixels, expérimente une ombre dynamique apportée à une image PNG. Ombre dynamique car se déplaçant au gré des mouvements d’une ampoule.

Lien :

• dynamic PNG shadow position & opacity by Daniel Kurdoghlian

Non seulement il est très réussi visuellement, et en plus il est gratuit

Pour la mise en place, il faut passer par la manipulation d’un fichier XML.

Rien de bien sorcier, il suffit de correctement assimiler la syntaxe qui n’est la traduction de « tu prend cette image, puis celle-ci en effectuant telle transition ».

Bon, ce qui donne quand même une structure de ce genre :

<?xml version="1.0" encoding="utf-8" ?>
<cu3er>
	<settings>
    	<prev_button></prev_button>
    	<prev_symbol></prev_symbol>
    	<next_button></next_button>
    	<next_symbol></next_symbol>
	</settings>

    <slides>
        <slide>
            <url>images/slide_1.jpg</url>
        </slide>
		<!-- changing transition between first & second slide -->
        <transition num="3" slicing="vertical" />
        <slide>
       		<url>images/slide_2.jpg</url>
        </slide>
		<!-- changing transition between second & third slide -->
		<transition num="4" direction="right" shader="phong" />
		<slide>
            <url>images/slide_3.jpg</url>
        </slide>
        <!-- transitions properties defined in transitions template -->
	</slides>

</cu3er>

L’image suivante vous montre les « découpages » et transitions possibles :

Allez, je vous laisse regarder la documentation ainsi que les démos sur le site officiel.

Lien :

• cu3er

Présentation :

Flickr :
Flickr est un site web de partage de photos et de vidéos gratuit, avec certaines fonctionnalités payantes.

Zend Framework :
Le Zend Framework est un framework pour PHP 5 créé par Zend Technologies. Il est distribué sous la New BSD license. Le Zend Framework, aussi nommé ZF, a été développé dans le but de simplifier le développement Web tout en recommandant les bonnes pratiques et la conception orientée objets en offrant des outils puissants aux développeurs.

Maintenant comment utiliser les deux ?

La réponse c’est la « Zend Developer Zone » qui vous l’explique, avec l’utilisation de Zend_Rest_Client. Ce denier est un module vous permettant d’utiliser des web-services comme Technorati ou, dans le cas qui nous intéresse Flickr.

Lien :

• Integrating Flickr Photostreams with PHP

Voici donc un tutorial de chez Dream Css expliquant la mise en place d’un petit diaporama d’images en utilisant jQuery.

L’objectif du tutorial est d’arriver à faire défiler les images, mais aussi y ajouter le nom et la description (avec un affichage progressif lettre par lettre bien sympa) et enfin ajouter une pagination.

Lien :

• Create Beautiful jQuery slider tutorial