Tutoriel Vidéo jQuery : Zoombox 1.1

A l'occasion de la mise à jour du module jQuery Zoombox, je vous propose de découvrir les nouveautés qui sont apparues.


Télécharger la vidéo
(Réservé aux premiums)


Après avoir appris sur Internet quoi de plus normal que de partager à son tour ? Passionné par le web depuis un peu plus de 5 ans maintenant j'aime partager mes compétences et mes découvertes avec les personnes qui ont cette même passion pour le web : Vous.

Vous aimerez aussi

Centrer une div

Centrer une div
6m

Marre de centrer vos éléments avec le CSS ? Dans ce nouveau tutoriel,...

Mailcheck

Mailcheck
13m

Aujourd'hui je vous propose de découvrir le plugin Mailcheck. Ce plugin...

97 commentaires
Ajouter un commentaire

marie Il y a 4 mois Répondre

Hélas, zoombox est un super outil, mais qui ne fonctionne pas sous IE.
Plusieurs personnes ont posé la question et pas de solutions ...
Quel dommage

hfs345 Il y a 1 an Répondre

Salut, alors mon problème est le suivant : je souhaiterais utiliser zoombox sur une image que j'ai mise en fond d'écran sur mon site avec plusieurs liens sur cette image (j'ai donc des balises "area") et j'aimerais utiliser zoombox dans un de ces area, c'est a dire, je voudrais qu'une gallerie photo s'ouvre en cliquant sur un des liens de mon image. Pouvais vous m'éclairer ? SVPPP

Thermo Il y a 1 an Répondre

Bonjour, j'ai un gros souci sous IE, lorsque je clique sur un lien zoombox celui-ci s'affiche très bien, mais si je veut cliquer sur un autre après, plus rien et bug de IE.

Détails de l’erreur de la page Web

Agent utilisateur : Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)
Horodateur : Thu, 5 May 2011 09:03:21 UTC


Message : Argument non valide.
Ligne : 16
Caractère : 79850
Code : 0
URI : http://www.julienmoise.fr/js/zoombox/jquery.min.js


C'est assez urgent, merci beaucoup.

Matrix Il y a 1 an Répondre

Bonjour, tout d'abord super, mais j'ai un petit souci pq je ne sais pas ouvrir une video flv que j'ai créer moi même de mes montage video, donc un simple fichier video flv ? d'ailleur j'arrive pas du tous a faire fonctionner une video tous simplement, pourriez-vous m'aidez svp.

j'utilise zoombox 2.0

SlimGus Il y a 1 an Répondre

Bonjour, tout d'abord merci pour cette magnifique zoombox.

Cependant je rencontre un problème. J'aimerais afficher une page web dans une iframe. Cette page contient une image de fond et des informations comprises dans un tableau. Le tableau est superposé à l'image.
J'aimerais que mon iframe soit exactement la taille de mon image de fond. Actuellement elle prend quasiment toute la largeur de la page.

J'ai changé dans le css:
#zoombox_content iframe{
border:none;
width:720px;
height: 500px;
}
mais cela ne marche pas comme je voudrais. Une astuce ?

Anthony Il y a 1 an Répondre

Fonctionne parfaitement en local mais pas en ligne sur mon hébergement FREE

Liens http://anthony.thebault33.free.fr/

Thomas Il y a 1 an Répondre

Bonjour,

un grand merci pour cette lightbox qui est vraiment très pratique et à mon gout une des plus belles (je l'utilise d'ailleurs partout sur mes sites).
En revanche, j'ai constaté un bug majeur : si on clique plusieurs fois sur le lien (qui fera se déclencher zoombox) la lightbox se charge plusieurs fois, puis se met à clignoter pour finalement faire planter la page du navigateur.
C'est un souci que j'ai constaté sur FF3.6 (Windows et macOS), FF4b10(windows), et safari4 (windows et mac OS). Je n'ai pas testé les autres mais j'imagine que le comportement est similaire.
J'ai cru au début que j'installais mal zoombox, mais j'ai testé sur la page d'accueil de zoombox en cliquant rapidement plusieurs fois sur une image et il s'est produit la même chose.
Existe t-il un moyen de corriger ce bug?
Merci d'avance et encore bravo!

Snooby Il y a 1 an Répondre

Merci beaucoup pour ce tutoriel très instructif.

J'ai utiliser zoombox afin d'afficher une image faite de deux liens l'ennui et que je voudrais que lors de mon clique sur un lien zoombox se ferme et me redirection directement sur la page voulut.

Dossier contenant zoombox:

<a title="Catègorie" href="accueil.php" class="test">
<img class="img" rel="zoombox" alt="Catègorie" src="???.gif">
</a>

Code appeler par la zoombox :

<body>
<div id="enfant">
<a title="Enfants" href="">
<img class="img" alt="enfants" src="css/images/enfants.jpg">
</a>
</div>
<div id="adulte">
<a title="Adultes" href="test.php" class="test">
<img class="img" alt="adulte" src="css/images/adulte.jpg">
</a>
</div>
</body>

zenaouache Il y a 1 an Répondre

Merci beaucoup Grafikart pour ta zoombox !
Comme j'aime bien bidouiller le CSS et le graphisme, si je réalise un nouveau thème, je te l'enverrai !
Merci pour tout le temps que tu consacres à nous proposer de chouettes animations et tutoriels !

Il y a 2 ans Répondre

Salut a tous,

Quelqu'un saurait-il qd on ouvre la zoombox, pour une galerie photo par exemple mettre un titre entre les curseurs précédent et NeXT,
Merci.

Ismael Il y a 2 ans - Répondre

C bon g trouvé...

Velgos Il y a 2 ans Répondre

Bonjour !
Tout d'abord merci, c'est un très bel objet que cette zoombox.

J'ai deux questions, probablement très naïves compte tenu de ma connaissance très relative des mécanismes propres au webdesign :

- 1 : Dew, sur son blog, explique la méthode pour changer la couleur de son lecteur MP3. Ici : http://www.blup.fr/2005/02/16/ mais je ne parviens pas à comprendre comment procéder au sein de la zoombox.
Et est-il possible d'adjoindre une ligne de texte, un genre de titre sur le même modèle que la zoombox images, au lecteur ?

- 2 : Hmm existe-t-il un moyen pour ouvrir 2 zoombox en positions fixes ? Je pense que non mais mon idée étant de pouvoir ouvrir celle des photos pendant que le mp3 se joue, je pose tout de même la question.

Merci beaucoup si vous pouvez m'éclairer !

marsupilamie Il y a 2 ans Répondre

Bonjour à tous,
j'ai installé zoombox sur mon site, ça marche très bien. Par contre, je n'arrive pas à mettre un titre aux images que je visionne (lorsque zoombox est ouvert). Quelqu'un peut m'aider ?
Merci d'avance.

marsupilamie Il y a 2 ans - Répondre

J'ai réussi à résoudre mon problème.... désolée pour le dérangement ;-)

Jeanflo Il y a 2 ans Répondre

Bonjour,
Un grand merci pour ces tutoriels.
J'ai remarqué un souci sous IE (la transparence de l'aplat apparait après le </body>)
Voici l'adresse http://www.dogcat.com/professionnel/index.php?language=en
Cliquer sur la vidéo pour voir le problème avec IE

Est-ce que quelqu'un est dans le même cas ?

Merci

Jeanflo Il y a 2 ans

Bonjour,
J'ai partiellement corrigé mon soucis en modifiant le css.
#zoombox_aplat {
position:absolute;

Reste le soucis de la hauteur de l'aplat

Cordialement
Jean-Flo

jeanflo Il y a 2 ans - Répondre

Erreur,

C'était un problème de doctype :
J'ai mis :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
Au lieu de :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Problème résolu
Jean-Flo

tfrancoi Il y a 2 ans Répondre

Bonjour,

Merci beaucoup pour ces tutoriels très intéressants.

Est-ce possible d'utiliser la zoombox sur une image map, comprenant plusieurs zones réactives.

D'avance Merci.
Félicitations pour ce que vous faites

TF

Jiyong Il y a 2 ans Répondre

Attention ligne 64 une div n'est pas fermer (comme l'a dis mon voisin au dessus) du coups les le thème lightbox et ceux inspiré par bug ne marche pas sous ie

Many Il y a 2 ans Répondre

Bonjour et merci super script je l'utilise sur mon site perso en cours de création, j'utiliser l'ancienne version mais celle ci est beaucoup plus clair, j'adore aussi les videos ainsi que les explications bien réaliser bref Grafikart t'est un bon^^
Ya juste une petite erreur dans le fichier zoombox.js à la ligne 64
<div id="zoombox_infos"<div id="zoombox_title"><span></span></div></div>\
la premiere balise n'est pas fermer à modifier par
<div id="zoombox_infos"><div id="zoombox_title"><span></span></div></div>\
petit détail mais ma fait chercher pourquoi les infos ne s'afficher pas à l'utilisation du théme lightbox.
Encore merçi...

Tom Il y a 2 ans Répondre

Bonjour et merci pour ce joli travail!
Est il possible d'ouvrir avec zoombox des liens d'une image réactive?
J'ai essayé mais rien a faire (liens qui commence par <area au lieu de <a)
Merci d'avance

foligraf Il y a 2 ans Répondre

Bonjour a toutes et a tous, j'ai un souci quand je clique sur mon image, celle ci apparait en bas de la page oO. Je pensais un souci de float mais après plusieurs clear sur mes blocs principaux rien a faire :/. Une idée qui me permettrait d'utiliser ce superbe outil ? Pour l'info j'ai deja plusieurs js utiliser (l'effet glow et carrousel de ce site).

Merci d'avance.

foligraf'

nahar Il y a 2 ans Répondre

Bonjour,

Je tente d'utiliser Zoombox avec CakePHP. J'ai un problème au niveau du titre de l'image en bas (et du navigateur dans la galerie). Le fond est blanc au lieu d'être transparent.

Exemple : http://images.camarades-pc.fr/N0237216001276695066.png
Bon en lien direct le background est aussi blanc donc ça se voit pas vraiment.

juju Il y a 2 ans Répondre

bonjou

derder Il y a 2 ans Répondre

bonjour, je voudrais avoir dans ma zoombox un bouton pour passer en mode plein ecran est ce possible ?

newo Il y a 2 ans Répondre

Bonjour, j'utilise zoombox sur mon site wordpress, allié au plugin Add Lightbox modifié pour zoombox c'est très pratique. Juste une remarque, valable avec les autres lightbox que j'ai pu essayé : sur une navigation horizontale, la box s'ouvre toujours tout à gauche et ramène donc le navigateur à gauche de la page donc c'est inutilisable. Une idée pour changer ça ?

jj31 Il y a 2 ans Répondre

Un utilisateur m'a fait remarqué un petit soucis: si quelqu'un "double clic" sur le lien à zoomer, c'est le drame, et beaucoup de gens font ça au lieu de cliquer qu'une fois. Je me demande si l'on peu lutter contre ça ...

coldragon Il y a 2 ans Répondre

Bonjour, il n'y a pas moyen d'afficher exactement de la même taille dans une box une page HTML avec un <object> dedans (Entre autre un autre lecteur MP3) donc j'ai mis la box de la même taille que le flash, et sa depasse quand même :s

Cordialement Coldragon

nd2k Il y a 2 ans Répondre

Voilà j'ai suivi le tutoriel à la lettre et zoombox m'ouvre mes image dans une nouvelle fenetre, pas centrée et sans obscurcir l'écran!!!
Avez-vous une solution svp?!

Merci

nonos Il y a 2 ans Répondre

excellent comme script!

par contre, si je veux afficher un bloc au chargement de la page, comment doit-ont procéder? Merci

Typhon Il y a 2 ans Répondre

hé hé hé... Moi aussi je me suis lancé sur le chemin de créer une lightbox et je vois que la tienne n'est pas si supérieur au autre >< c'est d'ailleurs à cause de lightbox comme sa que j'ai finis par faire la mienne :P

les problème ?

le titre peux sortir de son contenu si la fenêtre et trop petit, le centrage marche bien, mais encore une fois si la fenêtre et trop petit l'image est réduite, horrible pour un graphiste qui à fait une création plutôt grosse -_-

à corriger ?

Un centrage toujours nickel sans réduction même pour une création plus grand que la fenêtre, c'est ce que propose ma lightbox x) (sauf que moi j'ai pas la navigation ni les effets =C mais sa viendra :P )

En tout cas je te souhaite de continuer comme sa c'est super ce que tu fait :P

bleuindigo Il y a 2 ans Répondre

bonjour grafik,

merci pour ce super zoombox. il marche du tonnerre.
je compte l'utiliser sur une galerie panoramique, j'ai deux soucis : le premier la photo est toujours centrée dans la fenetre, ce qui fait qu'il me manque un bout à gauche indépendamment du scroll horizontal qui apparait en bas en prenant pour démarrage de l'image la zone centrée et apparente de la photo. pas sur d'etre très clair donc allez voir sur la page : http://fabienwajeman-photographiste.fr/pages/galerie_tourisme.
j'aimerais qu'il y ait une solution d'animation avec des boutons pour faire défiler le pano vers la gauche ou la droite..
je sais le faire avec jquery et animate.. mais là je me vois pas de modifier ton code.
merci à ceuss qui auraient des bonnes idées pour caler l'image à sa gauche et la faire défiler vers la droite ou la gauche on click sur un bouton par ex.

ibrahimovic88 Il y a 2 ans Répondre

Salut,
je viens de tester zoombox, mais il y a rien
zoombox est bien installé...

voici mon code du test :
<html>
<head>
<script type="text/javascript" src="/zoombox/jquery.js"></script>
<script type="text/javascript" src="/zoombox/zoombox.js"></script>
<link href="/zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<a href="imgs/Chrysanthemum.jpg" rel="zoombox">lien</a>
</body>


</html>

ibrahimovic88 Il y a 2 ans - Répondre

Sa y est,c résolu

Ced Il y a 2 ans Répondre

Salut,

Zoombox est vraiment mortel!!!
Il y a juste un truc qui est vraiment dommage: quand je lance la fonction zoombox.open(url):

$("#id").click(function() {
zoombox.open(url);
});

à partir d'un autre javascript il n'y plus d'animations à l'ouverture de l'image, juste l'état final de la zoombox. Existe t-il un moyen de garder l'anim?

PS: j'ai essayé de regarder le fonctionnement du js de zoombox mais j'ai pas compris grand-chose je suis nul en js :D

bleuindigo Il y a 2 ans Répondre

bonjour grafik
j'ai essayé ton tuto suivant à la lettre les instructions. j'ai un slider en js (selon ton tuto sur les sliders). Je souhaite quand on clique sur une photo du slider déclencher son affichage avec zoombox, mais ca marche pas... (j'ai naivement placé le code suivant :
<div class="slider">
<a href="#"><img src="../images/slider-visu1.jpg" border="none" rel="zoombox" /></a>
</div>

merci pour ton oeil expert et une réponse possible.
amicalement
Fabien

cgw Il y a 2 ans - Répondre

Il me semble que le rel="zoombox" doit etre placé dans la balise <a>

peterthedrummer Il y a 2 ans Répondre

hey j'ai un petit problème j'ai mon site qui est presque completement fini et j'ai eu envi de mettre ton script de zoombox pour donner un peu plus de style mais voila j'ai une navigation ajax et quand je mes le " rel="zoombox" " dans n'importe quel de mes pages cela ne marche pas , en revanche quand je le met dans le fichier index.php il marche bien ...
Ma question est donc comment faire pour que ce script magnifique marche dans ma navigation ajax?

merci d'avance peter

hajar2809 Il y a 2 ans Répondre

Bonsoir,

Tout d'abord, merci pour tous tes tutos...Grâce à toi, je m'améliore tous les jours. C'est d'ailleurs ce qui m'a poussé à écrire ce commentaire. Je ne sais pas si c'est normal de trouver tes tutos "remaniés" dans un autre site :
http://kentinworld.com/2010/01/zoombox-the-back/15/
http://kentinworld.com/tchat/
http://kentinworld.com/2010/01/le-parallaxe-en-css/24/
http://kentinworld.com/2010/01/quelque-tableau-utile/6/
...etc
En parcourant ce site, j'ai eu un petit malaise. C'est comme si je parcourais une pâle copie de grafikart!!!Je ne sais pas si cette personne a le droit de faire ça ou non alors j'ai préféré te prévenir. Désolée mais je n'aime pas le plagiat puisque je sais que c'est douloureux de se faire piquer ses idées et ses œuvres. Si ce n'est pas du plagiat, alors je m'excuse humblement de ma méprise.
Encore merci pour tes efforts...

cgw Il y a 2 ans Répondre

Bonsoir,
j'ai utilisé ce sympathique module sur le site de mon assos pour visualiser les albums photo. Ca fonctionne très bien, j'ai même réussi à lancer l'ouverture de zoombox au chargement de la page.
Par contre, j'essaye en vain de mettre en place un défilement automatique des images.
Un petit coup de pouce serait le bienvenu ;-)
Merci d'avance pour la réponse et merci pour cette zoombox!

nintenwii Il y a 2 ans Répondre

Salut,
zoombox marche sur Wordpress ?
Car j'ai bien placé le dossier "zoombox" à la racine du site, puis j'ai mis les chemins relatifs au CSS, Jquery et zoombox dans le header.php du thème mais rien n'y fait, ça ne marche pas. Il y a t'il une explication ?

DavG Il y a 2 ans Répondre

Super cette zoombox ! Mais j'ai une question :
J'aimerais pouvoir mettre une description sur plusieurs lignes dans l'attribut title de la balise <a> et insérer des <br /> pour passer à la ligne.
Le souci est que ce n'est pas valide. (mais cela fonctionne)
Y-a-t'il une autre solution ?
Merci :-)

musegd Il y a 2 ans Répondre

Tout d'abord super travail c'est très classe comme box je trouves, mais chez moi j'ai plusieurs mini-bugs. tout d'abord le allowoverflow fait dépasser la fenêtre de la box: on ne voit pas le haut. Pour réglé sa j'ai mis le fixed en true mais le defilement ne marche pas il se re-centre à chaque fois. et enfin ,mais ça je crois que ce n'est pas uniquement zoombox(il me semble qu'avec shadowbox ça me le fait aussi ), sous firefox les images sont comptées 2 fois alors quelles ne sont présentes qu'une fois dans mon code.
Voila en tout cas chapeau et bravo aussi pour tout tes tutoriels qui sont facilement applicables très compréhensibles et qui m'ont beaucoup aidé

tomah91 Il y a 2 ans Répondre

Merci beaucoup pour ce JS !

Baptiste Il y a 2 ans Répondre

Tient un tuto "théorique" sur le Z-index serait sympa! tu en parlais un peu pour le systeme d'avatars de deezyne mais j'avoue ne pas avoir tout compris!!

@+

Belllangelo Il y a 2 ans Répondre

J'ai essayé de modifier tous les z-index que j'ai trouvé dans les différentes feuilles de style sans grand succés. Dois je tous les modifier en même temps ou bien un par un?

Quel est le rôle précis du z-index?

Je vous remercie pour l'aide que vous voudrez bien m'apporter.

belllangelo Il y a 2 ans Répondre

Après vérification le bug ne concerne que Firefox (pas interent explorer)

belllangelo Il y a 2 ans

Voici la page avec le bug:http://roguetrader.free.fr/mecopter.html
Merci

Grafikart Il y a 2 ans - Répondre

Il faut jouer avec les z-index : par exemple sur la règle CSS : #slider .buttons, mettre le zindex à 40 ou moins

belllangelo Il y a 2 ans Répondre

Très bon plugin, je compte l'utiliser pour mon futur site web. Cependant, j'ai un bug un peu ennuyeux qui risque de rendre ce plugin inutilisable pour mon site. En effet, juste au dessus l'image liée au plugin j'ai une plus grosse image fixe dans une div. Or quand je clique sur l'image à ouvrir avec zoombox celle ci s'ouvre derrière mon image fixe (elles se chevauchent), puis finalement s'affiche devant. Un problème de paramètrage?

astuces web Il y a 2 ans Répondre

Très utile ce plugin merci beaucoup
mais j'ai une question: est qu'il sera possible qu'un box s'affiche automatiquement dès l'ouverture d'une page?

jeanluc16 Il y a 2 ans Répondre

je suis nouveau sur le site et je dis un grand bravo pour ce Zoombox

ManiK Il y a 2 ans Répondre

Juste pour savoir ça marche bien sur mon site mais est qu'il est possible de mettre des vidéos de facebook? j'ai essayé ça marche mais ça affiche toute la page facebook

matt51 Il y a 2 ans Répondre

Bonjour,
Merci pour cette Zoombox, cependant j'ai un petit problème pour le fond transparent lorsque la Zoombox est active. Il ne s'applique pas à toute ma page mais il forme seulement un bandeau en haut de ma page. J'ai fait un simple test en mettant mes liens dans une div recouvrant toute ma page mais la plus aucun fond s'affiche mais la Zoombox marche toujours. D'où peut provenir ce problème?
Merci

Grafikart Il y a 2 ans

Tu pourrais joindre le lien de la page avec le bug ? Merci

Jeanflo Il y a 2 ans

Bonjour
@Matt51
As-tu résolu ton soucis ?
j'ai le même souci avec ie (transparence en bas de la page) je ne peux pas encore vous montrer car le site n'est pas encore en ligne.

@Graphikart
Tout simplement bravo pour tout le travail accompli.
Merci
Jean-Flo

Jeanflo Il y a 2 ans

En fait, dans mon cas, l'aplat est appliqué après le fin de balise body.

jeanflo Il y a 2 ans - Répondre

Finalement je me suis quand même décidé à le mettre en ligne
Voici l'adresse http://test.dogcat.com/professionnel/index.php?language=en
Cliquer sur la vidéo pour voir le problème avec IE
Merci

lariflette Il y a 2 ans Répondre

avec les url distantes pas de problème,c'est avec les fichiers que j'ai créé,je n'arrive pas à calibré les dimension pour ne voir que le lecteur flash.
Je voudrai faire le même système que youtube voir que le lecteur de vidéo.

lariflette Il y a 2 ans Répondre

Félicitation pour tout le travail effectué.
J'ai utilisé zommbox pour les photos de mon club mais j'ai des difficultés pour les fichiers FLV que je n'arrive pas à lire

l'adresse du site ou je mets à profit le tutoriels.
http://thomeryvtt.free.fr/clubvtt
merci et bonne année 210.

nicolas.c Il y a 2 ans - Répondre

As-tu essayé avec ce qu'a dit Grafikart:



Essaie de remplacer les url des flv par des url qui incluent le nom de domaine avec le http: .

Douh Il y a 2 ans Répondre

Incroyable cette zoombox, c'est du très beau travail!
Cependant, j'éprouve quelques difficultés avec les vidéos flv, et ce même avec l'ancienne version :'(

Je m'explique : à l'instar du lecteur mp3, le lecteur flash est lui aussi bien détecté, mais j'ai l'impression que le lecteur flash ne reconnait pas mes vidéos (il ne lit rien), alors que les url sont correctement entrés. Quelque chose m'échappe... le lecteur mp3 marche, lui!

Vous trouverez le lien vers mon portfolio sur mon pseudo.
Le lecteur flash se trouve dans la catégorie "Portfolio" puis "Audio/Vidéo"...

Sinon, est-ce possible de réactiver le fadeIn lorsque le content de la zoombox apparait ? Je trouve ça plus sobre =)

Merci pour tout

Grafikart Il y a 2 ans

Essaie de remplacer les url des flv par des url qui incluent le nom de domaine avec le http: .

Douh Il y a 2 ans - Répondre

Tout fonctionne à présent, je te remercie.
C'était tout bête en fait :o

Zach Il y a 2 ans Répondre

Félicitation pour ce superbe travail, c'est surement une (la) meilleure zoombox que j'ai pu voir

Est'il possible de déclencher automatiquement un lien zoom box, toutes les 2 min ?
j'aimerai afficher ds l'iframe ds la zoombox, une page de bienvenue (avec une url deja existante) invitant à se connecter sur le site

par exemple j'ai une fonction php : meta_refresh qui redirige sur une page de bienvenue, mais je ne sais pas si on peut l'afficher ds la zoombox ???

Merci d'avance

WoaWorld Il y a 2 ans Répondre

Ce n'est pas moi qui à créer ce plugin ^^

Arnaud Il y a 2 ans

Plugin ?? Tu veux dire balise ? Et une balise qui n'est pas comme ca : <*** />, est forcement comme ca : <**></**>.

WoaWorld Il y a 2 ans - Répondre

Non un plugin, le code je le modifie directement du plugin wordpress.

WoaWorld Il y a 2 ans Répondre

Oui je croit, le problème pourrait venir de sa?

Badbart Il y a 2 ans - Répondre

Ha tu crois, donc tu n'es pas sur ? Pour ton problème je ne sais pas s'il y a un rapport, mais en tout cas fermé une balise sur 2 c'est pas très logique !

WoaWorld Il y a 2 ans Répondre

Bonjour, j'aimerai utiliser zoombox avec mon theme wordpress pour un plugin qui se nomme alkivia.
Voici le code:
<div class='gallery'>
<?php foreach ( $images as $thumb ) { ?>
<dl class='gallery-item'><dt class='gallery-icon'>
<dt>
<a rel="zoombox" href="<?php echo $thumb['link'] ?>" title="<?php echo $thumb['caption']; ?>"><?php echo $thumb['img']; ?></a>
</dt><dd class='gallery-caption'><?php echo $thumb['caption']; ?>
<dd></dl>
<?php } ?>
<br style="clear: both;" />
</div>

Le zoombox est placé, les dossier son placée dans le dossier thème est inséré dans le header.php.
Je ne voit pas d'erreur...

Badbart Il y a 2 ans - Répondre

C'est normal les balises <dt> et <dd> non fermée ?

Masterchaf Il y a 2 ans Répondre

@stephi : c'est un bon code bien à l'arrache quand même ce que tu nous fournis ici ^^. Tout d'abord, il existe des extensions de fichier à 4 caractères (html par exemple) et de plus, tu ne peux pas supposer qu'un fichier est une image simplement en testant l'extension, je peux très bien créer un fichier PHP et lui mettre l'extension .png
Et sinon tu as la fonction scandir qui permet de lire le contenu d'un dossier

Sab-R Il y a 2 ans Répondre

Chez moi sa bugg !! et se me met une erreur de code dans html validator . :'(

Antwane Il y a 2 ans Répondre

Bonjour,

Tout d'abord merci beaucoup pour tout ce que tu fait.
Une petite question : Par exemple pour les vidéos "youtube", il n'est pas possible de mettre en plein écran, ou par exemple lorsque je met la video en HD , la fenêtre ne s'agrandi pas. Est-ce qu'il y a une manip à faire , ou cela viendra dans une prochaine version ?

Merci d'avance

Antwane

Quent1du58 Il y a 2 ans Répondre

Pas mal la nouvelle version bien que si fixed est égal a true le mouvement de la div n'est pas fluide.

stephi Il y a 2 ans Répondre

salut

bravo pour ce tuto.

si vous voulez charger tout le contenu de vos 2 répertoires sans le faire photo par photo.

voici le code en php ( bien sur enregistrer votre page avec .php

<p>
<?php $handle = @opendir("contemporain_petit");

while ($file = @readdir($handle)) {
$extension = substr($file,(strlen($file)-3),strlen($file));
if(($extension=="jpg") or ($extension=="gif")){
?>
<a href="contemporain_grand/<?php echo $file; ?>" rel="zoombox[galerie1]" ><img src="contemporain_petit/<?php echo $file; ?>" ></a>
<?php
}
}
@closedir($handle); ?></p>

voila

steph

ZorG Il y a 2 ans Répondre

Edit : Après quelques tests, j'ai réalisé que seul le contenu multimédia ne fonctionnait pas sous IE. Si ca peut te filer une piste ^^...

ZorG Il y a 2 ans Répondre

Salut à tous,
Je te félicite pour ce module et t'encourage à le faire évoluer sans cesse.
J'utilise zoombox sur mon site, plus précisément dans la galerie d'image, et j'ai remarqué que ce dernier ne fonctionne pas sous IE8. J'ai ensuite effectué le test sur ton site et j'ai retrouvé le même soucis.
J'ai remarqué la discussion sous IE6, et ne veux pas relancer le débat, mais je pense que pour rendre ce module viable, il se doit de fonctionner sur les 2 dernières version d'IE.
Je serais très friand d'un correctif à ce niveau, ou d'une solution quelconque.
Mis à part ce problème, je trouve le design très réussit et l'outil super fonctionnel!

Merci d'avance,

joska Il y a 2 ans Répondre

Salut. Bon bin déjà merci pour tout ces tutos et toutes ces ressources que tu mets à dispo gratuitement.
Grace à toi je pense avoir bien appris
J'ai utilisé ta zoombox pour mon site web car je trouve que c'est vraiment la plus classe qui existe. Je n'ai pas indiqué ton credit parce que je voulais garder le site le plus clean possible. Si jamais tu desaprouves fais le moi savoir surtout et je corrigerais le tire.
Cdt

nicolas Il y a 2 ans Répondre

Félicitation pour ce travail de qualité. Je l'ai mis en place sur une de mes sites, c'est rapide et très facile à mettre en place.

Bien cordialement.

nicolasdaunay Il y a 2 ans Répondre

merci beaucoup , zoombox est vraiment trop cool !!!

Chavez Il y a 2 ans Répondre

Je te félicite Bravo à toi Continue comme ça :D

kerfam Il y a 2 ans Répondre

Salut Grafikart
Suberbe tuto.
Je voudrai incorporer zoombox qui l'ai trop bien dans wordpress, comment puis-je faire.
merci par avance

flasounet Il y a 2 ans Répondre

Je viens de tester ce formidable Zoombox
en un seul mot
MAGNIFIQUE

hammond68 Il y a 2 ans Répondre

je veux pas être méchant mais je viens de tester ta nouvelle version sur IE 7 et sa passe pas les liens ne sont pas ouverts par zoombox. J'ai du repasser à l'ancienne version qui elle marche.

gurzil Il y a 2 ans

Salut, encore merci pour la nouvelle version de zoombox, par contre j'ai un petit problème: lorsque j'ouvre une page html sur la zoombox, tous les liens qui sont dedans ouvre les autres pages mais il reste sur le haut à droite le bouton fermer de la zoombox et sur le bas il reste le titre. Ton code est trop balèze pour moi pour que j'arrive à le modifier et corriger le problème. Je sais pas si certains ont eu ce problème et s'ils ont réussi à trouver une solution ?

gurzil Il y a 2 ans - Répondre

En faite il ouvre la page à l'intérieur de la zoombox, c'est problématique car le mieux aurait été d'être redirigé directement vers la page en question mais je ne sais pas comment lancer la fonction en JavaScript qui permet de fermer la zoombox puis de rediriger la page demandé...
J'ai essayé de faire:

<script type="text/javascript">
$(function(){
$(".zoombox_close").click(function(){
zoombox.close();
});
</script>
En ajoutant la class="zoombox_close" à mon lien mais rien n'y fait...

lolotlm Il y a 3 ans Répondre

là c mieux :

rezizeFenetre : function (widt,heigh) {
var cssPropWH = {
"width":widt,
"height":heigh
}
$("#zoombox_contener").animate(cssPropWH,zoombox.duration);
},

lolotlm Il y a 3 ans Répondre

j'ai trouvé,

dans la page html qui est appelé dans la zoombox mettre dans le head

$('.changerTaille').bind('click',function (){
var s= window.parent.zoombox;
s.rezizeFenetre('100','50');
})

et dans le script zoombox :

rezizeFenetre : function (widt,heigh) {
var cssPropWH = {
"width":widt,
"height":heigh
}
$("#box_IDSIMPLE_contener").animate(cssPropWH,box_IDSIMPLE.duration);
},

lolotlm Il y a 3 ans Répondre

Très bonne vidéo, tu pourrai être prof !! :-)

petite question. je l'utilise pour afficher une page de formulaire et j'aimerai que le form est envoyer
redimensionner la fenêtre

genre :
zoom.box.parent.rezise('100','150')

merci pour votre aide

Laurent

gattt Il y a 3 ans Répondre

Très sympa !! Merci .
Par contre j'ai réussi a le faire marcher au debut et puis là, j'ai un soucis avec l'aplat qui opacifie le reste de la page: il n'apparait que sous la forme d'une ligne en haut de la page ... bizzare

LimeCitrus Il y a 3 ans Répondre

You are the best!! thanks.

bvek1 Il y a 3 ans Répondre

Merci beaucoup !!
J'ai ajouté ce module sur mon forum phpbb3, ayant des problèmes pour intégré les vidéos et les membres avait du mal, maintenant c'est fini grâce a toi !!

Kentiin Il y a 3 ans Répondre

Super
Tu es trop fort^^!

hammond68 Il y a 3 ans Répondre

Question

est-il possible de modifier le code pour que tous les liens pointant vers des jpg soient automatiquement ouvert par zoombox sans ajouter de REL ?

sinon super boulot !

leknoppix Il y a 3 ans

Je pense que sa ne doit pas être faisable mais je ne vois pas trop le but, avec rel tu indique les images ou liens à faire apparaitre dans la zoombox.

hammond68 Il y a 3 ans

ben disons que quand tu as un blog déjà bien fournis en lien image tu as pas forcement envie de modifier des centaines de posts juste pour ajouter des REL partout.

je connait d'autres plugins du même type qui ouvre d'office tous les liens images je demandais juste si c'était possible avec zoombox, attendons la réponse du grand manitou.

Grafikart Il y a 3 ans

C'est tout a fait faisable. Dans le fichier zoombox.js tu as une variable qui indique les types de lien qui doivent s'ouvrir avec zoombox. Tu peux modifier le sélecteur pour le faire coïncider à tes besoins.

hammond68 Il y a 3 ans

disons que je ne suis pas un expert en jquery donc je vais éviter de trifouiller le code.

Grafikart Il y a 3 ans

Alors je te fais la version simplifié, en haut du code remplace
bindable: "a[rel^='zoombox']",
par
bindable: "a[rel^='zoombox'],a[href$='.jpg']",

Et là tous les liens finissant par jpg devrait s'ouvrir avec Zoombox.

hammond68 Il y a 3 ans - Répondre

merci milles fois je pensait que c'était cette ligne qu'il fallait modifier mais je ne savais pas comment. C'est pille ce qu'il me fallait merci beaucoup

dreadstock Il y a 3 ans Répondre

Bravo, encore une fois du super boulot. Zoombox n'a rien à envier à Francybox, thickbox etc... merci

leknoppix Il y a 3 ans Répondre

Superbe version.

Est elle fonctionnelle avec ie6?

Badbart Il y a 3 ans

J'ai test sur IE 6, non ça ne fonctionne pas, et c'est t'en mieux j'ai envie de dire.

lemirandais Il y a 3 ans

Je te ferais remarquer qu'il y a encore 5% des internautes sous ie6. En développement c'est chiant de faire un site pour ie6, mais il ne faut pas les oublier. Si c'était que moi, je les zapperais mais c'est quand même 5%.
Grafikart, je t'avais envoyé il me semble la solution pour le faire fonctionner! Je n'ai pas regardé ta source, mais sa vient surement du each() qui n'est pas interprété par ie6.

29.02 Il y a 3 ans

En même temps, si on arrêterait de coder pour ie6, en leur affichant un message les incitant à changer de navigateur, peut-être qu'on aurait plus ce problème.

app23 Il y a 3 ans

sur certaine page d'apple il incite déjà a oublier ie

Badbart Il y a 3 ans

Les gens qui utilise en navigateur vieux de 2001 ne mérite pas d'avoir les trucs sympa que propose le web de 2009. C'est comme jouer a un jeux de 2009 avec un pc de 2001, c'est impossible (presque). C'est l'inconvénient de faire de la résistance à la technologie, on résiste oui, mais on est largué.
Pour ma part, comme dit plus haut, j'affiche juste un message bien moche pour ceux de IE6 : http://zzz.rezo.net/Campagne-pour-l-eradication-d-IE-6.html

leknoppix Il y a 3 ans

Je suis pas trop d'accord, il est vrai que je tourne principalement sous ubuntu ou mac et je n'es pas ie6, mais si tu commences à oublier, pourquoi ne pas complètement virer tout les utilisateurs d'un navigateur respectant aucun standard web et privilégié firefox, safari ....

Je suis d'accord avec toi, ie6 est trop vieux et surtout erroné, il existe encore des personnes qui sont incapable d'installer le moindre logiciel (la peur de l'inconnu), ma collègue ne sait même pas faire une mise à jour de windows. Je veux dire qu'il y a des novices en informatique qui ne savent même pas installer un navigateur web malgré que sa peut paraître très simple pour des utilisateurs avancés.

Faut ce mettre à la porté des novices, c'est pas parce qu'ils voyent ton message anti-ie6, sa ne va pas les insiter à changer de navigateur. Ton message peut être considérer pour les internautes peu avancé un message de pub et donc repartir de ton site d'où perte de visiteur.
Je préfère faire moins de fonctionnalité mais qui marche de ie6 à 8 plutot que de me basé qu'à partir de ie7.

Badbart Il y a 3 ans

Si des gros site comme Dailymotion et Youtube sont à moitié en guerre contre IE6, faudrait peut être y voir un signe non ?
Le fait de pas adapter des javascripts pour IE 6 ça ne les empêches pas de voir le site, ça ôte juste quelques fonctions pratique/esthétique, donc c'est pas bien grave, vu que de tout façon 'normalement' le JS NE DOIT PAS être intrusif et proposer une alternative, comme zoombox vu que la c'est le sujet de base.
Si on veut pousser l'accessibilité à fond, les sites disposeraient tous une version bas-débit pour la minorité en 56k aussi, compatible pour non voyant, support clavier (accesskey...) pour les handicapés physique, etc etc. Tu additionnes tout ça, on dépasse largement les 5% de IE6, et personne (très peu) le fait, tout le monde s'en fou, pourtant c'est le W3C (la bible de beaucoup) qui le dit dans son WCAG...
Moi à choisir je préfère adapter mon site pour ceux qui ne PEUVENT pas (utiliser une souris par exemple), plutôt que pour ceux qui ne SAVENT pas (mettre à jour un navigateur). J'ai + une impression d'utile. Et je laisse IE 6 finir son inévitable décomposition.
Ce n'est que MON avis, MON choix, c'est pas un clash.

Asti Il y a 3 ans

Le problème c'est qu'il existe encore de grosses sociétés qui tournent sous IE6. Changer de navigateur dans ces sociétés, c'est plus compliqué qu'il n'y paraît.

Badbart Il y a 3 ans

Pas bien de surfer sur le web a des fins personnel depuis le boulot !! ^^

leknoppix Il y a 3 ans - Répondre

Il existe encore des sociétés qui on des applications (de vieilles applications) qui nécessite encore et toujours ie6. Oki c'est que 5% mais c'est des personnes qui ne verront pas un jolie site.
Je suis en train de coder un site internet, j'ai volontairement zappé ie6 mais d'après les dernières statistiques, il y a encore 15% de nos visites qui ont ie6, j'ai donc opté sur une optimisation pour ie6 minime, c'est à dire qu'on chargement de chaque page, j'alerte via une popup zoombox que le site ne leur est pas accessible à 100% car leur navigateur n'est pas compatible mais j'ai essayé d'optimiser l'ensemble des effets à ie6. Dans mon cas de site, 15% des visiteurs c'est très important.
Badbart, je pense qu'il vaut mieux arrêter la car chacun à ces positions et sa risque de devenir n'importe quoi. Je respecte ton choix, chacun à sa vision du web.

valentin45000 Il y a 3 ans Répondre

Je n'avais presque aucune connaissance en CSS et voilà. Il suffit de modifier les image. J'ai même un hover sur le titre et le close.
http://www.picdo.net/fichiers/2009/11/15/ee7e7752-7a57-4abc-9be8-a1fb86fa3ef6_zoombox.zip

valentin45000 Il y a 3 ans Répondre

Bien non en faite le problème c'est qu'il ne prend pas toute la page. Alors que je veut qu'il prenne toute la page.

Grafikart Il y a 3 ans - Répondre

L'aplat prend la largeur et la hauteur du body niveau taille. Donc si tu as des placements float sans clear au bout ça peut poser des problèmes

tibeoh Il y a 3 ans Répondre

J'adore ! Je n'avais rien à redire à la version 1, mais alors là vraiment un grand bravo Grafikart ! Une petite question, peut-on mettre juste un bout de texte avec du php, du css dans une zoombox. Je m'explique : Avec l'ouverture de la box au moment de l'ouverture de la page avec "open" je voudrai non pas afficher une image, une vidéo etc... Mais du texte, avec pourquoi pas du code dedans.

Merci d'avance et encore BRAVISIMO !

Grafikart Il y a 3 ans

L'idéal pour ce que tu demande c'est de charger un lien, zoombox le chargera dans une iframe et donc ton code sera interprété

tibeoh Il y a 3 ans - Répondre

Donc si mon fichier lien est en interne le code php sera exécuté ?
Perfect =) !

valentin45000 Il y a 3 ans Répondre

Bonjour,
Je sais que l'ont peut changé l'opacité du masque mais peut-on changer sa taille ? Et comment ?
Merci d'avance.

Grafikart Il y a 3 ans - Répondre

Pourquoi tu voudrait changer la taille du masque ? Tu veux qu'il ne prenne pas toute la page ?

Corentin Il y a 3 ans Répondre

Merci pour cette nouvelle mise à jour !

Jolie travail ...

Corentin

XnEoZ Il y a 3 ans Répondre

Merci, je m'empresse de faire la maj

zedat Il y a 3 ans Répondre

très beau est très bien détailler mercie grafi ^^

cerise Il y a 3 ans Répondre

Tu nous offre une zoombox de luxe au possibilités multiples et affinées que demander de plus!
Je t'envoie un énorme merci

flasounet Il y a 3 ans Répondre

Super tuto encore un grand moment de LEARNING, je n'ai pas vu le lien pour télécharger cette version 1.1?
En tout cas encore un grand merci, les explications sont claires et précises.

greatsatan Il y a 3 ans Répondre

Waouh, impressive !
Great job, bien rangé, commenté, propre, parfait quoi

KaKuZa` Il y a 3 ans Répondre

comment quelle est trop bien !
Sa y'est i love this new version of zoombox !

Great job Le raton laveur =)

Syl20 Il y a 3 ans Répondre

Super ce zoombox !!

Mais où s'arrêtera-t-il ???

Badbart Il y a 3 ans Répondre

Ouf tu as laisser le support clavier malgres le soucis

Grafikart Il y a 3 ans - Répondre

Oui et je cherche encore à trouver la cause du bug

pobourger Il y a 3 ans Répondre

Je te a ajouté BRAVO tu a reussi a finir COD6 comme moi ^^ (super jeux)
et faire le code de ZOOMBOX encore merci a toi pour tout le travail fourni !


PS : avec mon compte pobourger je ne sais pas posté de message ....

DjPAULO Il y a 3 ans Répondre

mille fois bravo !!!
Ou peut ton telecharger cette nouvelle version ?

Badbart Il y a 3 ans - Répondre

Avec le lien qu'il donne dans l'énoncé, http://www.grafikart.fr/pages/zoombox

Nouipoz Il y a 3 ans Répondre

Bravo , merci beaucoup .

valentin45000 Il y a 3 ans Répondre

Je vais créer mon propre theme zoombox ^^

Grafikart Il y a 3 ans

N'hésite pas à partager

musicalitymaker Il y a 2 ans - Répondre

Bonjour Grafikart
Votre code de zoombox ma beaucoup inspiré tellement que un jour j'aimerais crée un effet de zoombox mais différent pour mon site web.

Merci de nous inspiré à développer des nouveaux module interactif

Phénol Il y a 3 ans Répondre

Encore un excellent travail de qualité. Bravo !

valentin45000 Il y a 3 ans Répondre

T'est singlé lol (dans le bon sens du terme ^^)
Sèrieux quand on voit tout le boulot que t'a fait.
Respect ^^
Merci infiniment !!!!!

Weby Il y a 3 ans Répondre

Merci beaucoup, t'es vraiment le meilleur !!! ^^

Laisser un commentaire

Si vous avez une question il est conseillé d'utiliser le forum si vous voulez une réponse sûre.