{Guide des revendeurs}

Effets visuels avancés

Du bon usage des effets visuels de la plateforme

La plateforme vous propose des effets visuels indispensables à la réussite de tout bon site Web. Pour les sélectionner, rendez vous dans le réglage des paramètres, onglet "options".

Les effets vous sont alors proposés sous forme de case à cocher. Les fichiers javascript et CSS nécessaires sont alors automatiquement ajoutés dans le code source du site (concaténés en un seul puis mis en cache) sans que vous n'ayez rien à faire. Tout est fonctionnel, enjoy !

Voici la liste de ces effets, ainsi que leur documentation :

  1. Le lecteur de vidéo HTML5

    Pour utiliser cette option, il vous suffit de savoir utiliser la balise HTML5 "vidéo" : <video id="playerhtml5" class="projekktor" src="http://www.youtube.com/watch?v=EpoGzMEaHE0" type="video/youtube" title="Camping 2 - La Bande Annonce" width="640" height="390" poster="http://img.cmsmedia.fr/upload/z1-cmsmedia/images/video/video-poster.jpg" preload autobuffer controls></video

    l'ID="playerhtml5" est obligatoire, la class="projekktor" également (il suffit de surcharger la class dans votre CSS pour personnaliser le lecteur).

    On place la source de la vidéo dans src="" (où l'URL de la vidéo Youtube).

    La balise title="Un titre pour la vidéo" sera reprise sous la vidéo comme titre.

    On indique également la largeur et la hauteur de la vidéo. poster="img" est optionnel mais permet de placer une capture personnalisée qui apparaît avant la lecture de la vidéo.

    Enfin, nous terminons par les options preload autobuffer controls qui sont modifiables, pour cela, consultez la documentation (par exemple pour un démarrage de lecture automatique) : Voir la documentation en ligne

    Ce qui nous donne :

    A noter : Le lecteur fonctionne avec n'importe quel doctype, car un script agit sur la balise "vidéo" pour l'enrichir et stabiliser son fonctionnement sur toutes les plateformes, SANS FLASH ! Il est donc fortement recommandé de l'utiliser en toutes circonstances.

    Vous devez également savoir que Youtube propose désormais des liens raccourcis pour le partage de vidéo, ce qui pose problème. Vous devez cliquer sur le bouton "partager", puis à côté choisir "afficher les options avancées" et enfin cocher la case "Long link" pour récupérer le lien de partage classique.

  2. L'effet Lightbox sur les images

    Si vous choisissez cette option, toutes les images miniatures (ou pas) qui présentent un lien vers leur agrandissement (ou plus généralement une autre image) se verront appliqué cet effet, sans que vous n'ayez besoin d'ajouter quoi que ce soit à votre code.

    C'est automatique, et donc très simple. Aucun paramétrage, vous ne pouvez pas modifier l'effet Lightbox qui est très classique.

    A noter : le script fonctionne également avec les images de Flickr ou de Picasa, sans que vous n'ayez besoin de connaître l'URL de l'agrandissement d'une miniature. Le script le trouvera seul.

    Voici la manière de procéder avec Flickr : <a href="http://www.flickr.com/photos/"><img src="http://farm6.static.flickr.com/5026/5617098987_4604696cc8_t.jpg" alt="" /></a Il suffit de placer une miniature puis un lien qui pointe simplement vers la page http://www.flickr.com/photos/

    Voici la manière de procéder avec Picasa : <a href="http://picasaweb.google."><img src="https://lh5.googleusercontent.com/--AHIzcdia-A/ShwTjuvWGBI/AAAAAAAAIUs/83OVLGy_S4Y/s144-c/CIMG6439.JPG" alt="" /></a Il suffit de placer une miniature puis un lien qui pointe simplement vers la page http://picasaweb.google. (attention de ne pas oublier le point).

    A noter : le script considère toutes les photos qui se trouvent dans un même paragraphe "p" comme faisant partie du même album. Par conséquent, si chaque photo est placée dans des paragraphes différents, vous ne pourrez pas naviguer d'un agrandissement à l'autre depuis la lightbox.

  3. L'effet Slider sur un groupe d'images

    Cette option permet d'intégrer des "diaporamas" avec défilement d'images. Les transitions se font en FadeIn et il suffit de placer vos images dans un div id="slider" comme suit : <div id="slider"
        <
    img src="http://img.cmsmedia.fr/upload/z3-camping-ginasservis/images/piscine.jpg" alt="" /> 
        <
    img src="http://img.cmsmedia.fr/upload/z3-camping-ginasservis/images/tennis.jpg" alt="" /> 
        <
    img src="http://img.cmsmedia.fr/upload/z3-camping-ginasservis/images/mobilhome.jpg" alt="" /> 
    </
    div
    En ajoutant une balise title="Ceci est un titre ou commentaire" à la balise IMG, vous aurez un joli bandeau translucide qui fait apparaître le texte en surimpression sur les images.

    La taille se règle directement au niveau des images et l'usage est on ne peut plus simple. Cette fonction peut vous servir à fabriquer des header animés sans flash, à condition de venir habiller vos images avec des div en position absolute, par dessus.

registry->website); ?>
Page rendered in 0.0384 seconds - © Média Camp