Shadowbox

Enfin le script que je cherchais depuis ........ un bail !!! et compatible 100% Eklablog....! 
Shadowbox va afficher vos images en mode 'lightbox' , c'est à dire en surimpression sur fond teinté noir.
Vos images, mais aussi vos animations swf, vos vidéos Youtube, Quick-time, Vimeo etc...
Affichage simple, ou en mode "Galerie" manuelle ou auto....
En mode "mixte", on mélange tout, images, videos, swf etc.... Parfait, j'vous dis !!!
Utile aussi pour afficher une info en fenêtre modale (pop-up, pop-in) .
Taper sur la touche F5 pour voir cette fenêtre ..... 
Voir les codes pour cette pages (html, css, js)
Installation de shadowbox.  Javascript doit être activé sur votre blog  
Tuto-vidéo Quelques exemples ci-dessous:

Avec des liens:

Un exemple avec une image en mode simple.

<a title="tutogif-01" rel="shadowbox" href="http://ekladata.com/WBYstUS6mlPRVVgRhaiJDpS0C8U.gif"> une image</a> 

Il était une fois, Exemple-01 , mais aussi une autre fois,  Exemple-2, et une video-bonus ! (mode galerie img/video)

<a title="Exemple-01" rel="shadowbox[gal-1]" href="http://ekladata..../perso/module-simple-editeur.jpg">
Exemple-01</a>&nbsp;, mais aussi une autre fois, &nbsp;
<a title="Exemple-02" rel="shadowbox[gal-1]" href="http://ekladata..../perso/img%20video%2001.jpg">
Exemple-2</a>,

Avec des vignettes (images) mode galerie :

Fichiers swf (animations)

 

Video - Galerie

YouTube	Qtime	Vimeo

Les codes HTML - CSS

Installation de shadowbox

Sur le site de shadowbox, télécharger le fichier compressé  de votre choix (zip ou tar),
après avoir coché toutes les options et choisi votre langue (tuto).
Sur votre bureau d'ordinateur, créer un nouveau dossier et le nommer : shadowbox.
Placer  le fichier téléchargé dans ce dossier
Ouvrir ce dossier et décompresser le fichier téléchargé.(avec WinRar, 7-Zip, etc)
Voir  Tuto-vidéo ou voir un mini-tuto
Se connecter au blog, et créer un dossier shadowbox via Gestion des fichiers:
   - Contenu >>> Gérer les fichiers >>> Nouveau dossier >>> Nom: shadowbox >>>> O.k
   - Ouvrir ce dossier >>>> importer tous les fichiers du dossier shadowbox  se trouvant sur le bureau de l'ordinateur.
     (choisissez un fichier >>> envoyer)
   - Obtenir cette configuration, voir image.

Maintenant une phase un peu ardue, adapter les url (adresses) des images du fichier CSS.
Dans gestion des fichiers >>> shadowbox >>> sélectionner le fichier shadowbox.css >>>> éditer
Le fichier  CSS s'ouvre dans une nouvelle fenêtre en mode édition.
Il faut adapter toutes les url par leur nouvelle adresse d'hébergement.
Au total 5 url à modifier aux lignes : 11 - 19 - 20 - 21 - 22 - 23
Vous pouvez ouvrir votre blog une seconde fois dans une nouvelle fenêtre navigateur, ce qui permet de
d'ouvrir toutes les images contenues dans shadowbox, et de copier (ctrl+c) chaque url dans la barre de navigation.
Ainsi en passant d'une fenêtre à l'autre, il est possible de modifier les url des images du fichier CSS (ctrl+v)
Voir cette image. En rouge les url à modifier (.exemple avec mon fichier CSS)
Voir aussi le code CSS ci-dessus (onglet CSS) dans le tableau codes HTML - CSS.
Les url des background-image  à modifier, sont de couleur noire.
Donc, une fois votre fichier CSS mis à jour, copiez-le (ctrl+c) et collez-le dans "Ajout css"
Apparence > Modifier le thème > Ajout CSS (tout en bas) > Coller le code CSS (ctrl+v) > enregistrer

On y est presque ....Toujours dans le dossier shadowbox, ouvrir le fichier: shadowbox.js
Ce fichier s'ouvre dans une nouvelle fenêtre. Copier l'url qui se trouve dans la barre navigateur (ctrl+c)
Exemple pour mon fichier  shadowbox.js :
http://ekladata.com/XU7x6b81vPuTQGD2iIyC2rhvyu8/shadowbox.js

Placer cette url (la votre) à la place de celle en rouge dans le script ci-dessous:

<script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script>

Puis copier ce script modifié (ctrl+c), et coller le (ctrl+v) dans un module simple en mode édition html (source <>):
Apparence > Ajouter un module > Module simple > édition (source<>) Coller script > enregistrer
Désactiver l'option: Ouvrir les images en surimpression dans 'Configuration générale'.
Normalement dès l'ouverture du blog, shadowbox est opérationnel.
Si ce n'est pas le cas, et que vous êtes obligé de rafraîchir la page (F5), placer ce script également en début d'article à publier.

Pour que shadowbox soit opérationnel sur un lien, il suffit d'ajouter rel="shadowbox" dans la balise <a...></a>
Exemple de lien normal:
<a title="tutogif-01"  href="http://ekladata.com/WBYstUS6mlPRVVgRhaiJDpS0C8U.gif"> une image</a>

Exemple avec ajout de  rel="shadowbox"
<a title="tutogif-01" rel="shadowbox" href="http://ekladata.com/WBYstUS6mlPRVVgRhaiJDpS0C8U.gif"> une image</a>

Pour créer une galerie d'images, ou une galerie mixte (image + video + swf), ajouter un nom entre crochets.
Exemple avec ajout de  rel="shadowbox[nom]"
Il est possible de configurer shadowbox en lecture automatique
Pour changer l'aspect de la fenêtre (couleur, bordure, ombre etc...), modifier le code css suivant:

#sb-wrapper-inner {
border: 8px solid rgba(255, 255, 255, 0.67); /*--bordure de 8px blanche --*/
border-radius: 10px; /*--coin  arrondi de 10px --*/
box-shadow: 6px 5px 10px rgb(66, 74, 78); /*-- ombre portée --*/
}

Je vous invite à consulter la page "options" sur le site.
La page est en anglais, utiliser un navigateur avec traduction automatique (Chrome par exemple)

Extrait du tutoriel source
( traduit par Google...! )

Si vous souhaitez afficher un titre à votre image, il suffit d'ajouter un titre attribut le lien.

 <a href="myimage.jpg" rel="shadowbox" title="Mon image"> mon image </ a>

 Vous devez explicitement dire à Shadowbox les dimensions à utiliser pour afficher le contenu autre que des images.

Ceci est fait en ajoutant quelques paramètres à la fin de la 'rel attribut' hauteur et largeur paramètres. (width et height)

 <a href="mymovie.swf" rel="shadowbox;height=140;width=120"> Mon film </ a>

 En plus de l'affichage des images et des films simples, Shadowbox est également capable d'afficher des galeries de contenu. 

Pour désigner un lien dans le cadre d'une galerie, vous devez ajouter le nom de la galerie,
pour le relattribut entre crochets après le mot shadowbox . 
Le balisage suivant crée une galerie appelée "vacances" avec deux photos.

 <a href="beach.jpg" rel="shadowbox[Vacances]"> la plage </ a>
<a href="pier.jpg" rel="shadowbox[Vacances]"> The Pier </ a>

Galeries peuvent être composées d'un contenu de nombreux types différents. 
Le balisage suivant montre comment les différents médias peuvent être combinés en une seule galerie.

 <a rel="shadowbox[Mixed];" href="myimage.jpg"> jpg </ a>
<a rel="shadowbox[Mixed];width=520;height=390" href="myswf.swf"> swf </ a>
<a rel="shadowbox[Mixed];width=292;height=218" film href="mymovie.mp4"> </ a>
<a rel="shadowbox[Mixed]" href="mywebsite.html"> iframe </ a>

Fin tuto

Retour top-article