• 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 :


    Quelques fruits

     

    Fichiers swf (animations)

    Shadowbox

     

    Video - Galerie


    Qtime-video
     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-articleRetour-top-article

    « xlightbox-mootoolsMenu CCS effet spirale »

  • Commentaires

    18
    Lundi 14 Septembre 2020 à 08:03

    Salut Mike GMZ,

    et encore un tuto mis en application : merci  smile

    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  cool

     

    17
    Samedi 12 Juillet 2014 à 12:40
    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 ?
    16
    Vendredi 11 Juillet 2014 à 19:56

    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 {....}

     



    15
    Vendredi 11 Juillet 2014 à 19:27

    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>&nbsp;</p>
    <p>&nbsp;</p>
    </div>

    14
    Vendredi 11 Juillet 2014 à 19:24

    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>&nbsp;</p>
    <p>&nbsp;</p>
    </div>

     


     

    13
    Vendredi 11 Juillet 2014 à 18:38

    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

    12
    Vendredi 11 Juillet 2014 à 18:06
    merci! faut il rajouter un CSS par vignette?
    11
    Vendredi 11 Juillet 2014 à 16:58

    @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>

     

    10
    Vendredi 11 Juillet 2014 à 14:07

    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!

    9
    Lundi 16 Juin 2014 à 13:57
    C'est génial merci
    Je vais étudier ça de près
    Bonne journée
    8
    Jeudi 8 Mai 2014 à 16:13
    je viens d'actualisé la page et maintenant ça fonctionne !!!!!
    7
    Jeudi 8 Mai 2014 à 16:11

    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 !!!!

    6
    Jeudi 27 Mars 2014 à 14:01

    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 !

    5
    Jeudi 27 Mars 2014 à 13:52

    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 info glasses

    4
    Jeudi 27 Mars 2014 à 13:36
    Bonjour 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. Dani
    3
    Samedi 22 Mars 2014 à 11:00

    non 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.....

     

     

     

     

    2
    Vendredi 21 Mars 2014 à 20:46

    Trop bien ses codes bravo pour cette trouvaille bisous cher ami , on se reverra sur L'ile d'hénoa

    1
    Mercredi 12 Mars 2014 à 22:30
    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

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


Version standard

Poursuivre l'affichage en version standard (ordinateur),

cliquer ci-dessous

Clic ici

(Puis fermer cette fenêtre, en haut à droite)