-
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> , mais aussi une autre fois,
<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)
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) > enregistrerOn 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.jsPlacer 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 untitre
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
etlargeur
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 lerel
attribut entre crochets après le motshadowbox
.
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
-
Commentaires
Lol, comme tu vois je suis pas très doué, je vais corriger tout ça au plus vite, merci encore Mike!
petite question: sais tu où je peux trouver les codes pour faire se "replier" en coulissant les modules ?Heu....comment dire .....ton code est faux.
<p style="text-align: center;""id="sb">
Au moins 2 erreurs:
"id="sb" .........ça n’existe pas,
id="sb" .....là c'est bon.
Ensuite id ou class se place tout de suite derrière la balise ouvrante (<p id="blabla", <div class="blabla", etc....)
Mais je crois que l'éditeur le place par défaut.
id (représenté par # dans le code CSS) et Class (représenté par . dans le code CSS correspondent
au CSS déclaré.
<p id="sb">......</p> correspond au css #sb {.....}
<div class="blabla">.....</div> correspond au css .blabla {....}J'ai fait ça par exemple, et du coup après validation la ligne entière (<p style="text-align: center;""id="sb"><a href="http://brot2you.eklablog.com/602-13-14-c23786347") disparait, mais leffet marche quand même
<div class="newspaper">
<p style="text-align: center;""id="sb"><a href="http://brot2you.eklablog.com/602-13-14-c23786347" target="_blank"><img src="http://ekladata.com/c7XQtKbgqULG-Qtjf68QySD3i8M.jpg" alt="2013 - 2014" /></a></p>
<p style="text-align: center;"><a href="http://brot2you.eklablog.com/401-13-14-c23786341" target="_blank"><img src="http://ekladata.com/5Q8GHwyi90enTWkdIiqHkMIBLtE.jpg" alt="2013 - 2014" /></a></p>
<p style="text-align: center;"><a href="http://brot2you.eklablog.com/402-13-14-c23786343" target="_blank"><img src="http://ekladata.com/PYvZMCyihe1zNwPvisH02ONVPRk.jpg" alt="2013 - 2014" /></a></p>
<p style="text-align: center;"><a href="http://brot2you.eklablog.com/407-13-14-c23786375" target="_blank"><img src="http://ekladata.com/po_sksmAOSQARS1wIJ6D-dUgV1o.jpg" alt="2013 - 2014" /></a></p>
<p style="text-align: center;"><a href="http://brot2you.eklablog.com/305-13-14-c23786349" target="_blank"><img src="http://ekladata.com/kLwYm_OAuT9-OvjcwRddA-_Fdpc.jpg" alt="2013 - 2014" /></a></p>
<p style="text-align: center;"><a href="http://brot2you.eklablog.com/309-13-14-c23786351" target="_blank"><img src="http://ekladata.com/F_Gj6SFaos97oogohUPf5G1rEfg.jpg" alt="2013 - 2014" /></a></p>
<p> </p>
<p> </p>
</div>arf j'ai un problème, car si je mets ça dans le code suivant, mes liens ne sont plus cliquables et ça me fait disparaitre une ligne
<div class="newspaper">
<p style="text-align: center;"><a href="http://brot2you.eklablog.com/602-13-14-c23786347" target="_blank"><img src="http://ekladata.com/c7XQtKbgqULG-Qtjf68QySD3i8M.jpg" alt="2013 - 2014" /></a></p>
<p style="text-align: center;"><a href="http://brot2you.eklablog.com/401-13-14-c23786341" target="_blank"><img src="http://ekladata.com/5Q8GHwyi90enTWkdIiqHkMIBLtE.jpg" alt="2013 - 2014" /></a></p>
<p style="text-align: center;"><a href="http://brot2you.eklablog.com/402-13-14-c23786343" target="_blank"><img src="http://ekladata.com/PYvZMCyihe1zNwPvisH02ONVPRk.jpg" alt="2013 - 2014" /></a></p>
<p style="text-align: center;"><a href="http://brot2you.eklablog.com/407-13-14-c23786375" target="_blank"><img src="http://ekladata.com/po_sksmAOSQARS1wIJ6D-dUgV1o.jpg" alt="2013 - 2014" /></a></p>
<p style="text-align: center;"><a href="http://brot2you.eklablog.com/305-13-14-c23786349" target="_blank"><img src="http://ekladata.com/kLwYm_OAuT9-OvjcwRddA-_Fdpc.jpg" alt="2013 - 2014" /></a></p>
<p style="text-align: center;"><a href="http://brot2you.eklablog.com/309-13-14-c23786351" target="_blank"><img src="http://ekladata.com/F_Gj6SFaos97oogohUPf5G1rEfg.jpg" alt="2013 - 2014" /></a></p>
<p> </p>
<p> </p>
</div>
Non, le code css est déclaré une fois pour toute sur tout le blog (avec "Ajout CSS"),
ou sur un article précis avec les balises <style>....</style>
Exemple pour un article précis, on déclare le code CSS en début d'article (mode source <>),
on utilise 2 mêmes lignes de code html, sauf que pour la 2ème ligne, j'ajoute "id="sb" dans la balise ouvrante (p, div, span,a) :<!---------- Code CSS ---------->
<style>
#sb img {
border:4px solid white;
box-shadow:6px 6px 10px black;
margin:10px 30px;
transition: 0.5s;}#sb img:hover {
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
box-shadow:10px 10px 40px black;
transition: 1s;}
</style><!----Code HTML-------vignette normale sans effet et sans ombre-(balise <p> sans id)----->
<p><a title="des fruits..." rel="shadowbox[gal]" href="http://kpobococ.github.com/XtLightbox/images/fruit-1.jpg">
<img src="http://kpobococ.github.com/XtLightbox/images/small-fruit-1.jpg" alt="Quelques fruits">
</a></p><!----------vignette avec effet et ombre-(balise <p id="sb"> avec id)----->
<p id="sb"><a title="des fruits..." rel="shadowbox[gal]" href="http://kpobococ.github.com/XtLightbox/images/fruit-1.jpg">
<img src="http://kpobococ.github.com/XtLightbox/images/small-fruit-1.jpg" alt="Quelques fruits">
</a></p><!----------------------Fin du code ------------------------------>
Tu peux essayer en copier/coller ce code en entier
@CB
Oui, il faut mettre rel="shadowbox" à chaque fois....
Pour les vignettes avec effet 'tournant' + ombre, c'est un ajout CSS:#sb img { border:4px solid white; box-shadow:6px 6px 10px black; margin:10px 30px; transition: 0.5s; } #sb img:hover { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */ transition: 1s; }
Exemple d'une vignette:
<p id="sb">
<a title="des fruits..." rel="shadowbox[gal]" href="http://kpobococ.github.com/XtLightbox/images/fruit-1.jpg">
<img src="http://kpobococ.github.com/XtLightbox/images/small-fruit-1.jpg" alt="Quelques fruits">
</a></p>Coucou Michel, j'ai bien installé shadowbox grâce à ton super tuto (facile en fait!) , je peux donc afficher mes images en lightbox, par contre:
- faut il mettre le code rel="shadowbox" à chaque fois qu'on veut utiliser l'outil à chaque image?
- je pensais que tes vignettes vidéos ou images qui tournaient un peu avec leurs ombres étaient faites avec shadowbox, c'est pas le cas?
Merci encore!
c bizarre ke je vois rien sur mon ordi,alors me suis mis sur le second ordi mais c'est pareil ! bon pas grave puiske je suivrai pas ce tuto mais jai horreur kan ça fonctionne pas !!!!
et je passais aussi pour te saluer !!!!
Ok Mike :-)
Ah mais j'ai tout regardé, les 4 "pages" !
Le problème est que je n'ai pas WinRAR en dessous de Ouvrir, et je ne sais pas pourquoi !
C'est très bizarre... J'ai Windows 7 également. Bon je vais essayer de voir pourquoi.
J'ai déjà eu ce problème avec des kits pour faire mes scraps, kits en RAR impossible à ouvrir !En fait j'ouvre avec un décompresseur mais les images sont vides !
(impossible de te dire le nom, je l'ai mais je ne sais pas où et je ne le trouve plus !)
Je t'en reparle... car j'ai envie d'essayer ton tuto. Peut-être que je me plante, que mon décompresseur ouvre ces images... ?
Dur dur hihihi
Merci bien !
Si tu cliques sur le mini-tuto, tu vois avec quoi j'ouvre le fichier compressé (WinRAR sous WIndows 7).
Sinon, un lien à suivre:
http://www.commentcamarche.net/faq/2582-ouvrir-un-fichier-rar
P.S: Moi c'est Mike .....pour infoBonjour Papy.
Avec quel logiciel ouvres-tu les fichiers RAR ?
Connais-tu celui là ?
http://rar.extensionfile.net/fr
Car je ne peux ouvrir ces fichiers, je ne sais pas pourquoi, en cliquant droit je n'ai pas la fonction, donc il faut que je télécharge un logiciel, gratuit de préférence, et je ne veux pas télécharger n'importe quoi !
Pourras-tu me dire à l'occasion stp ?
Merci bien. Daninon je les pas testé , jai lu hier mais c'est l'installation de shadowbox ki me fait paur , faut pas trop men demender kan même lol
j'attends ke le courage vienne mdr !!!!!
mais c'est vraiment interressant @ suivre.....
Trop bien ses codes bravo pour cette trouvaille bisous cher ami , on se reverra sur L'ile d'hénoa
Merci, je verrai ça demain, car là il est tard, donc je préfère ne rien entamer de spécial ! :-)
Bonne soirée. Amicalement. Dani
Ajouter un commentaire
Salut Mike GMZ,
et encore un tuto mis en application : merci
J'ai un peu ramé... et (au moment où je saisis ce message) encore en finitions. Notamment la première photo qui s'affiche en "image" et qu'il faut refermer pour voir le slideshow.
et "le bas" des photos est coupé, je sais pas pourquoi > je cherche.
j'édite : au fur et à mesure de mes fouilles/recherches, je vois qu'au dézippage du shadowbox-js je n'ai pas de fichier "shadowbox.js" mais un fichier "shadowbox.css" : voir image↗. Donc pour l'instant je laisse le .js de papyrocktest.
En tout cas ça fonctionne