Tutoriel Vidéo HTML-CSS : Zoombox

Dans ce tutoriel vidéo vous apprendrez à installer le module Zoombox sur votre site Web. Ce module permet de présenter de manière élégante vos photos, musiques et vidéos. Vous verrez donc comment modifier la partie <head> de votre site pour importer les scripts et comment modifier les variables de zoombox pour permettre la lecture des FLV et des MP3.


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

Feuilles CSS3

Feuilles CSS3
8m

Dans ce tutoriel vidéo vous allez apprendre à détourner la propriété...

Fontstruct

Fontstruct
12m

Dans ce tutoriel vidéo je vous propose de découvrir le service...

146 commentaires
Ajouter un commentaire

devid Il y a 2 mois Répondre

Bonjour j'ai un petit problème avec la zoombox les miniature que s'affiche en bas s'arrete a la 20 photos ou plus si plus grande résolution d'cran, et on ne peut pas scrolé pour voir les autre miniatures quelqu'un a une solution pour ce problème? Merci

Lucie Il y a 4 mois Répondre

Bonsoir à tous. Malgré avoir suivi le tuto à la lettre, lorsque je clique sur un lien (ex: lien vers une vidéo dailymotion), il me redirige directement vers le site dailymotion sans m'afficher zoombox. De même pour une photo. Quelqu'un a une explication? Merci par avance

cedric Il y a 6 mois Répondre

Très bon plugin, merci encore cela fonctionne parfaitement
http://www.cedric-c.com/

Txomin Il y a 6 mois Répondre

Bonjour à tous,
Tuto vraiment super comme d'habitude ! Avec mozilla parfait !
Cependant j'ai un petit problème: sous IE la croix de fermeture de la photo apparaît à moitié voir pas du tout...Pourriez-vous m'aider?? Merci

Neolone Il y a 6 mois Répondre

Bonjour,

J'ai découvert ce super outils il n'y a pas longtemps et je dois dire que j'accroche vraiment !
Mais j'ai un problème avec la lecture de FLV :
- Sous Internet Explorer 8 le lecteur FLV (fichier swf) ne s'affiche pas
- Sous Internet Explorer 9 le fichier se télécharge au lieu de s'ouvrir dans la Zoombox...

Une idée pour résoudre le problème ?

Www grafikart.. WTF? :) Il y a 10 mois Répondre

Www grafikart.. WTF?

Jule04 Il y a 1 an Répondre

Bonjour,

J'ai moi-même un petit soucis. Mes image n'affiches qu'un lien. Et non une miniature de l'image. J'ai créer un site "bidon" pour que vous puissiez voir :

http://jule04.olympe-network.com/

Si quelqu'un peux m'aider =S
Jule04

Grim Il y a 1 an Répondre

Juste pour te remercier :
je suis en train de créer un petit site perso pour mettre en valeurs certains travaux d'infographie et zoombox est non seulement bien fait mais en plus très classe visuellement.
Sympa de mettre ça à disposition.
Bonne continuation !

Lullabys Il y a 1 an Répondre

Excellent, j'utilisais SuperBox avant mais j'ai été conquis

19marine91 Il y a 1 an Répondre

sympa mais je n'ai pas réussi à télécharger le fichier T_T

Brian Il y a 12 mois - Répondre

Même soucis. C'est vraiment dommage.

csphoenix1 Il y a 1 an Répondre

Salut à tous,
J'ai un problème avec Zoombox. Le problème c'est que Zoombox ne fonctionne pas si le lien se trouve dans une div qui se rafraichie toutes les 10 secondes par exemples. Pourriez-vous m'aider ?

Pour vous faciliter le travail j'ai préparé un fichier .rar qui contient tout ce qu'il faut, vous n'avez qu'à cliquer sur "Fonctionne" pour observer ce que cela fait en temps normal et sur "Fonctionne Pas" pour résoudre le problème si vous y arrivez :s

http://radiokafein.net/_Anthony/Probleme.rar

Merci d'avance

Sinon super script merci !

thelastorder Il y a 1 an Répondre

Bonsoir à tous. Malgré avoir suivi le tuto à la lettre, lorsque je clique sur un lien (ex: lien vers une vidéo dailymotion), il me redirige directement vers le site dailymotion sans m'afficher zoombox. De même pour une photo. Quelqu'un a une explication? Merci par avance

Ithor Il y a 1 an Répondre

Merci beaucoup, mais beaucoup pour zoombox et le tuto Grafikart
j’avais essayé au début un autre plugin jQuery, mais il était lourd, tandis que Zoombox est léger fluide, bref tout ce qu'il faut
Grâce à zoombox je peux maintenant faire une jolie galerie de photos :D

Ripere Il y a 1 an Répondre

Bonsoir,

félicitation pour ce tuto vraiment bien fait .

J'ai quand même un problème tout fonctionne correctement à l'exception que les flèches et le rond en dessous de l'image ne s'affiche pas pourtant j'ai bien fait zoombox[galerie] à mes photos.

Splaze Il y a 1 an Répondre

Bonjour,
Excellent tuto!!!
Exactement ce qu'il me fallais!!

Oja Il y a 1 an Répondre

Bonjour,
Déjà un énorme merci pour ce tuto !! Il est génial :D

Ensuite voilà ma question :
Je voudrais lire des MP3 mais je ne trouve pas comment faire.
Quelqu'un pourrait t-il m'expliquer la marche suivre svp ?

Un grand merci !!

Siloa Il y a 2 ans Répondre

Après plusieurs tests, les lags au chargement des images en big size dépendent du pc.
Au boulot j'ai un pc peu puissant et ça lag. Chez moi, mon pc est correctement puissant et je n'ai aucune saccade.

Le JS demanderait-il des ressources côté client ?

Merci

Siloa Il y a 2 ans Répondre

Bonjour,

Je viens d'installer zoombox pour mon nouveau site, et c'est du beau boulot.
Par contre c'est étonnamment long et saccadé pour charger l'image en fullsize.
J'utilise d'autres éléments jquery, peut-être cela joue-t-il ?

Merci.

bugs2010 Il y a 2 ans Répondre

J'ai remarquer pour la lecture de video flv il faut modifier le lien.

exemple : racine : video/video.flv
la video ne se lance pas.
racine : ../video/video.flv
la video ce lance.

voila j'espere aider si vous n'arriver pas a lancer votre vidéo en flv

Adil Il y a 2 ans Répondre

Bonjour, j'aimerais bien installer Zoombox sur mon Wordpress. Je me demandais à quel endroit je devais le placer. Est-ce dans le dossier des plugins, ou est-ce à la racine du site?
Merci pour test tutos, j'apprends beaucoup.

thibaut Il y a 2 ans Répondre

Quelqu'un peut il m'aider svp????? ^^
Sa serait vraiment genial!

thibaut Il y a 2 ans Répondre

bonjour,
J'ai installer Zoombox sans probleme pour mon site. L'ouverture d'image se deroule sans probleme. Le soucis vient de l'ouverture d'une video. J'ai bien change le zoombox.css mais rien ne se passe. La barre de lecture en bas s'affiche mais rien ne se passe, ecran noir. Je ne sais pas si sa vient de la video ou du chemin.
Je suis desole, je ne peux pas mettre le lien de l'adresse car il n'est pas en ligne.

cedric Il y a 2 ans Répondre

c'est bon, ça fonctionne ^^

cedric Il y a 2 ans Répondre

désolé j'avais oublié de mettre le lien vers la page
http://www.cedric-c.com/www.testVideo.cc/

cedric Il y a 2 ans Répondre

bonjour
je viens d'installer zoombox
tout fonctionne correctement a part la vidéo et je ne comprend pas pourquoi
pourtant j'ai bien modifié les chemins du fichier zoombox.js, d'ailleurs la musique fonctionne donc je ne pense pas que ça vienne de là.
Si quelqu'un pouvait m'éclairer ça serait super

valentin45000 Il y a 2 ans Répondre

Bonjour,
La question que je vais poser est peut être tordu mais peut-on l'appliquez à tous les lien mais d'une div précise ?

Cordialement, Valentin.

toutoune95800 Il y a 2 ans Répondre

Bonjour !

J'avoue, je suis novice dans la création de site ! Je dis un grand bravo au créateur de zoombox ! Par contre, j'essaye de l'utiliser uniquement sur des images en jpeg avec un lien <a> contenant un lien <img>, lien amenant sur ma page présente (en faites, je veux juste que quand la personne clique, zoombox fonctionne sur l'image choisie). Ça ne marche pas... J'aimerais juste savoir si, et d'une, zoombox peut fonctionner avec le système demandé ou si j'ai juste fait une erreur dans le chemin à changé.

Merci de vos réponses

Ps : Je dis également un grand bravo aux créateurs du site et tous les tutoriels postés qui m'ont aidé a faire mon site !

Beheadoth Il y a 2 ans Répondre

Bonjour
Tout d'abord je vous remercie pour l'excellent travail que vous fait avec la zoombox

Ma question est la suivant: Comment afficher le contenu d'un page html dans la zoombox avec un scroll vertical?

En fait, j'ai un lien avec zoombox qui pointe vers un fichier .html qui ne contient que du texte, quand on clique sur le lien ma zoombox affiche bien le contenu de la page dans les dimensions que j'ai paramétré (rel="zoombox 700 600"), mais elle n'affiche pas le contenu se trouvant plus bas dans ma page html, donc il me faudrait un scroll pour pouvoir l'afficher.

merci pour votre aide

Nico71 Il y a 2 ans Répondre

Problème résolu avec Firebug... le problème venait des tableaux dans le fiche CSS...

Nico71 Il y a 2 ans Répondre

Bonjour ! J'ai un problème avec ma zoombox. Tout marche parfaitement bien mais une barre blanche se colle juste en dessous, à l'emplacement du titre de la zoombox. Quelqu'un a une idée pour la faire disparaitre ?

Bloodyred Il y a 2 ans Répondre

Bonsoir! après avoir lu et relu tous les commentaires de ce tuto je n'ai pas trouvé solution à mon problème.
Zoombox marche très bien sous Firefox, mais ne marche pas du tout sous Internet Explorer (aucun des IE).
J'ai bien téléchargé les bons documents etc, donc je ne sais pas d'ou vien le probleme :s.
Ya til sinon possibilité d'avoir une fonction qui permet de désactiver la fontion ZoomBox quand on est sur IE ? pour affiché tout simplement l'image.

Merci d'avance

Bloodyred Il y a 2 ans - Répondre

Bon après acharnement je pense avoir trouvé... en faite j'utilise le thème LigthBox ducou ca marchais pas du tout sur IE car dans le Thème qui est dans le Script il manquais un <div id="zoombox"> \ ducou bah ca marche nikel sous IE6 aussi ! voilou

Baptiste Il y a 2 ans Répondre

Oui un diapo serait pas mal!

tontonrimka Il y a 2 ans Répondre

Je me demandais (comme zoombox permettais les jonctions de type rel="zoombox[AZEERT]" pourquoi pas developper une fonction de diaporama ? en tuto

Jutix Il y a 2 ans Répondre

On dirait Fancy Box... Mais en mieux ;-)
Bien jouer !

fou Il y a 2 ans Répondre

Bonjour à tous et toute.
Un grand merci pour tous les tuto que tu fais, car ils sont très bien fais, grâce à tes tuto j'ai commencé a apprendre plein de chose tour en allant a mon rythme.

Mais j'ai une petite question, voila j'ai mis Zoombox sur mon site, tout fonctionne parfaitement sans aucun problème, mais j'ai lu aussi qu'on savais lire des fichiers mp3 et FLV Mais je n'ai pas trouvé les lignes à mettre dans mon fichier pour savoir lire un fichier mp3.

Est ce que quelqu'un saurait me dire quel fichier je dois appeler pour que je sache lire se type de fichier?

Un grand merci d'avance.

pomix Il y a 2 ans Répondre

youpiiiii c'est bon ça marche ! merci !

pomix Il y a 2 ans Répondre

merci pour tous les tutoriels que tu fais ! je suis étudiant et grâce à toi j'apprends à mon rythme et je parle de ton site à toute ma promo car tu le mérite !
Voici mon essai de site web http://perso.numericable.fr/anthony.aguillon/Contact.html et tu remarquera que quand je clic sur "test" pour ouvrir une photo de macbook avec zoombox et bien cela ne marche pas l'image se trouve tout en bas ... qu'ai-je fait de mal ?
merci d'avance si tu trouve la solution

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

pako974 Il y a 2 ans Répondre

Un grand merci pour toutes les vidéos et ressources que tu publies, elles me sont très utiles !

Encore merci et bonne continuation !
Pako

Yo Il y a 2 ans Répondre

pour lire les flv il faut mettre le lien depuis la racine de ton site exemple :

http://exemple.fr/video/exemple.flv

faut mettre un chemin absolu et non relatif en tt cas c'est comme ca que j'ai reussi a le faire marcher

Siloa Il y a 2 ans Répondre

Salut.

Merci pour ce tuto. Le style est vraiment sympa mais je n'arrive pas à lire les FLV et c'est bien dommage. Le tuto dit embarquer un lecteur FLV, mais la vidéo ne se lance pas
Quelqu'un peut aider ? J'ai le même problème qu'Ogur en fait

PiGI Il y a 2 ans Répondre

@ jamal, buburoi, ogur111, Nero et Grafikart ;-)

Moi aussi je commençais à désespérer de ne pouvoir lire des FLV et j'ai finalement trouvé où est l'erreur : dans le fichier zoombox.js ligne 17, j'ai mis un p minuscule au premier "FLVPlayer:" ou bien à la ligne 438 un P majuscule à "zoombox.FLVplayer"

Merci pour ce module quoiqu'il en soit :-)

Laurrow Il y a 2 ans Répondre

Salut Graphikart,

Je tiens déjà à te remercier pour ton site et tes tutoriaux qui sont très bien fait (clair et précis).
Je suis en train de réaliser le site de ma commune. J'ai inséré grâce à ton tuto le menu accordéon et je suis en train de mettre en place le module zoombox. J'ai réussi à le mettre, comme tu peux le voir, dans l'article de la cdc du maine normand mais lorsque je clique sur le lien la zoombox se lance avec son contenu mais j'ai le module recherche qui s'affiche en premier plan. as tu une idée pour la remettre en dernier plan.

Merci et encore bravo

Grafikart Il y a 2 ans

Au niveau de ton CSS il faut que tu regarde le z-index de ta boite de recherche, elle doit avoir un z-index supérieur à zoombox ce qui la place devant.

Laurrow Il y a 2 ans - Répondre

C'est bien ca, j'ai modifié le z-index, j'ai mis la même valeur que la zoombox, et cela a marché.
Merci à toi;

Nero Il y a 2 ans Répondre

Salut Graphikart,

Bravo pour ce Zoombox ! je l'adore il est carrément mieux que les lightbox ou shadowbox etc

Mais j'ai un petit souci avec le lecteur flv. La petite image de chargement reste alors que ma vidéo est déjà lancée mais ce me le fait pas sur toute les vidéos

Comment pourrais régler ce problème ?

Merci et encore bravo

Clem Il y a 2 ans Répondre

Du coup c'est bon, le problème est que j'appelais le javascript jquery en dernier dans mon head, c'est à dire avant de celui de zoombox. Donc le js zoombox qui a besoin du js jquery ne pouvait pas fonctionner... J'ai quand même mis une demie journée pour trouver !
Merci quand même et félicitation pour tes tutos !

Clem Il y a 2 ans Répondre

Salut Grafikart, j'ai intégrer zoombox sur un de mes sites sauf qu'il n'apparaît pas. Je ne comprends pas j'ai bien suivi ton tuto vidéo. J'utilise du jquery pour faire de la transparence d'images, est ce que cela peut interférer avec zoombox ?
http://soundwaveinaustralia.fr

Grafikart Il y a 2 ans - Répondre

Lorsque que je clique sur une des image de ta galerie je vois bien l'effet zoombox qui marche.

PrettyGreen Il y a 2 ans Répondre

Bravo ! Merci pour tout, ton site est dans mes favoris et ne rique pas d'y sortir =)

flasounet Il y a 2 ans Répondre

SVP quelle version de JQUERY faut il installer? et ou doit on le télécharger?
D'avance merci beaucoup

Amicalement

Grafikart Il y a 2 ans - Répondre

N'importe qu'elle version de jQuery, pour zoombox le lien est en haut de la page.

Marioshi Il y a 2 ans Répondre

Trop bien, je vais tout de suite le tester

marsupilamie Il y a 2 ans Répondre

Désolée pour le double post mais c'est bon, mon problème est résolu....

marsupilamie Il y a 2 ans Répondre

Bonjour,
tout d'abord, je suis bien d'accord avec tout le monde, ce que tu fais est vraiment génial, très pro, très bien expliqué....Merci !

Ensuite, j'aurais une question car j'ai un petit problème et je cherche depuis des jours, je n'arrive pas à le résoudre... J'ai mis en place, à l'aide de tes tutos (bien sûr ;-) ) une galerie d'images avec zoombox. Tout est nickel sauf que sous IE7, comme j'ai pas mal de photos, les photos dépassent de la div malgré un scrollbar vertical. Quand le scrollbar est en haut, les images dépassent en bas (passent par dessus mon footer) et quand le scrollbar est en bas, les images dépassent en haut (passent par dessus le header)... Est-ce que quelqu'un sait d'où ça vient??? Merci d'avance pour votre aide.

lo Il y a 2 ans Répondre

bonjour

j ai un petit probleme sur la zoom box, la barre en bas pour faire suivant précédent ne s'affiche pas sauf le fond avec des bordure

KaKuZa` Il y a 2 ans Répondre

Sympas comme Module je previendrai quand je m'en sert ^^

Nouipoz Il y a 2 ans Répondre

Merci beaucoup , je vais essayer :P

lyesdays Il y a 2 ans Répondre

yO, je suis trop content car ça a fonctionné bizarrement mais surement =D je l'ai testé une dernière fois pour après vous envoyer le lien et ça a marché, regardz http://shippuden.isgreat.org/scan.html
j'ai du enlevé le probleme accidentellement ou bien il s'est corrigé tt seul , j'en sais rien :D en tout cas j'ai hate d'essayer le paramètre galerie

donc merci énormément et bn continuation

lyesdays Il y a 2 ans Répondre

bonjour,

d'abord, je vous félicite pour ce très pratique Zoombox =D , cependant moi j'arrive même pas à le voir en action , "juste une fois :-( " j'ai tout essayé, avant de penser à poser cette question...
ma page html contient d'autres truc dans le <head> je me demande c'est bien la cause , c'est ici http://shippuden.isgreat.org/Untitled-1.html

voilà merci d'avance,

Grafikart Il y a 2 ans - Répondre

Normalement ça peut cohabiter, tu aurais pas un exemple de la page en action ? avec le head le body et tout ?

ogur111 Il y a 2 ans Répondre

Bonjour à tous et merci à Grafikart pour cette vidéo, cependant j'ai une petite remarque ! il m'est impossible de lire avec le player livré des vidéos FLV !
Chez moi la même manipulation ne marche pas !! quelqu'un aurait il une idée, je trouve dommage que ce soit la seul chose qui ne marche pas ... Merci d'avance

Grafikart Il y a 2 ans - Répondre

Bizarre, Tu pourrais envoyé un lien avec la page qui marche pas ?

dreadstock Il y a 2 ans Répondre

Bonjour, Merci pour le tuto. Petite question comment peut on devenir membre premium.

Merci

leknoppix Il y a 2 ans Répondre

Quelqu'un aurait-il un moyen de faire fonctionnner correctement la transparence sous ie6?

leknoppix Il y a 2 ans - Répondre

Désolé pour ce double post mais j'ai à priorie trouver la solution:
http://www.babylon-design.com/site/index.php/2007/11/13/204-png-transparents-ie6-en-css-sans-javascript

Mac_n_Jack Il y a 2 ans Répondre

loool toujours pas mais merci du coup de main quand même

leknoppix Il y a 2 ans

Pour répondre à ton problème, faudrait récupérer la valeur générer par screen.width dans une variable php et la mettre dans rel="zoombox <?php echo $variable; ?> 600"

leknoppix Il y a 2 ans - Répondre

Tu y ai arrivé?

leknoppix Il y a 2 ans Répondre

rel="zoombox <?php echo("<script type='text/javascript' language='javascript'>
document.write(screen.width);
</script>"); ?> 600"

Mac_n_Jack Il y a 2 ans Répondre

ca marche pas ca me permet bien de récupérer la taille de ma fenêtre mais je n'arrive pas a utiliser ces données.

leknoppix Il y a 2 ans Répondre

rel="zoombox echo("<script type='text/javascript' language='javascript'>
document.write(screen.width);
</script>"); 600"

Attention j'ai pas testé.

Mac_n_Jack Il y a 2 ans Répondre

Re bonjour Grafikart, toujours pas trouvé la solution au problème de "clignotement" c'est très étrange!! Ensuite je n'ai toujours pas de solution pour afficher un site web correctement dans zoombox avec une taille maximale qui s'adapte en fonction des écran utilisé.

leknoppix Il y a 2 ans Répondre

@grafikart: je suis en train de mettre en place zoombox sur un de mes projets et je souhaiterais lancé à l'affichage de la page une fenetre zoombox. j'ai beau lire et relire le code source ainsi que le tutoriel sur la création d'un mini zoombox, je ne vois pas comment faire.
Te serais-t-il possible de m'indiquer comment faire.

29.02 Il y a 2 ans

Salut, détaille un peu plus ton problème pour qu'on puisse t'aider.
Que veux tu afficher dans la zoombox ?
Quel est ton élément déclencheur ?

Cordialement

Grafikart Il y a 2 ans

Si j'ai bien compris tu veux lancer zoombox dès le chargement de la page ? Si c'est le cas il n'y a pas encore de fonction pour le faire mais je suis en train de concevoir une fonction qui te permettra de réaliser ce que tu veux.

leknoppix Il y a 2 ans - Répondre

Merci pour cette réponse. Suite au mail que je t'ai envoyé Grafikart, je me suis dit que, si le visiteur était sous ie6, ben d'afficher une zoombox avec une page que j'ai créé (http://grada.u7n.org/sitecocom/upgradeplease.html) pour avertir l'utilisation que son explorateur est périmé. En gros lorsqu'il chargera la page, s'il est sous ie6, le zoombox s'affichera avec cette page. S'il ne veut pas faire un upgrade du navigateur, ben il n'aura qu'à cliquer sur la croix pour fermer la box.

Mac_n_Jack Il y a 2 ans Répondre

Excuse moi a nouveau du double post mais le souci vient maintenant de la taille de la box ne correspond pas aux format du site. Je sais qu'il est possible de passer des dimensions en paramètre mais le problème avec cette solution c'est qu'elle ne s'adapte pas aux format de l'écran.

Mac_n_Jack Il y a 2 ans Répondre

Effectivement ce la vient de l'utilisation des flèches mais je n'ai pas réussis a identifier le problème. C'est très aléatoire.

Mac_n_Jack Il y a 2 ans Répondre

Je tiens à signaler que ton zoombox est d'une qualité et efficacité rare. Tout fonctionne, tout le temps avec beaucoup de formats.

Merci pour l'info. (Est-ce que cela t'arrive que la box ce mette à clignoter? Si oui, pour quelle raison?)

Grafikart Il y a 2 ans

Il me semble qu'elle clignote lorsqu'on utilise les fléches du clavier mais je n'en suis pas sûr. Je n'arrive pas à identifier la cause de ce clignotement (si tu arrive à le déclencher volontairement ça m'intéresse).

olea Il y a 8 mois - Répondre

Bonjour,

Ce problème a-t-il été réglé depuis ?

J'ai le même souci : la zoombox qui clignote quand je navigue avec le clavier. En général, la première série de photo défile sans problème et le clignotement surgit dès la seconde série. La première photo s'affiche alors normalement et lorsque j'appuie sur la flèche droite, on passe à la troisième et la zoombox se met à clignoter. Si j'appuie à nouveau sur la flèche droite, on passe à la cinquième. En fermant la box, mon site plante et je suis obligée de recharger la page. Je ne trouve pas d'aide sur le net ou alors aucune solution proposée n'a fonctionné...

En tout cas, bravo pour cet outil fort pratique.

Mac_n_Jack Il y a 2 ans Répondre

Comment insérer un site web entier dans zoombox ?

Grafikart Il y a 2 ans - Répondre

Pour ajouter un site entier il te suffit de mettre le lien vers le site avec rel="zoombox" et ton site sera alors chargé avec zoombox

Alex Il y a 2 ans Répondre

J'ai résolu mon problème, je ne mettait pas mon zoombox.init(); au bon endroit, il faut le faire juste après avoir appelé une image !

Merci et encore bravo !

Alex Il y a 2 ans Répondre

Bonjour et félicitation pour ton travail ! c'est vraiment au top !

Mais, j'ai un problème lors de l'affichage de ton module. J'affiche le contenu de ma page en ajax et le script php appelé par l'ajax me renvoi les images avec des liens vers mes images, ainsi que le "rel = "zoombox", mais toute la partie zoombox est totalement absente.

Lorsque je copie le code qui est généré par mon script et que je le colle sur mon index.php, la partie zoombox fonctionne.

Pourrais tu me donner une piste ou un début de solution stp !

Merci !

Alex.

SAMY-HACKER Il y a 2 ans Répondre

Vraiment Ces tros cool ce que ta fait

leknoppix Il y a 2 ans Répondre

Bonne nouvelle pour tous, je suis parvenu à faire fonctionner zoombox sous ie6. Je ne met pas la solution dans un post car je pense que c'est loin d'être la meilleur, un peu lourde à mon gout. J'ai envoyé la solution à grafikart pour qu'il teste et qu'il l'améliore. Cependant un des problèmes est donc au niveau des png. Vive IE6. Non je blague.
@Grafikart: si tu n'as pas reçu mes explications, n'hésite pas à me contacter.

Grafikart Il y a 2 ans

Message bien reçu j'analyse ça dès que je peux.

leknoppix Il y a 2 ans - Répondre

Oki, n'hésite pas si tu as un truc que tu ne comprends pas. (ça m'étonnerait !!!!
Pour la transparence pour ie6, je pense que la meilleure solution est <barree>de détruire ie6 (non c'est très difficule et interdit) </barree> de faire les images en gif, moins chiant que les hack png que je n'arrive jamais à faire fonctionner (si tu y arrives, faire un mini tuto dessus).

Bon courage.

blogityourself Il y a 2 ans Répondre

Super mais par contre, il ne semble pas compatible avec le plugin wordpress Featured Content Gallery Une solution peut être ?

leknoppix Il y a 2 ans Répondre

@Apache: Il faudrait que tu lises les 10 premiers commentaires, c'est indiqué dedans.

Apache Il y a 2 ans - Répondre

Oups autant pour moi j'ai mal lu les commentaires :/

Merci bien

Apache Il y a 2 ans Répondre

Salut,

J'aurais aimer savoir quel code utiliser pour que zoombox ne soit pas activer pour ie6. Quel code mettre entre les condition html?

Merci beaucoup

buburoi Il y a 2 ans Répondre

Merci pour ce tuto. Tout marche bien sauf pour le format FLV...ça passe pas..Une idée?
Merci d'avance.

Laolis Il y a 2 ans Répondre

Super comme tuto, ca faisait des mois que je recherchais cet effet, franchement super !
Merci beaucoup et continu comme ça !

Justin Il y a 3 ans Répondre

Salut !

J'utilise Zoombox et j'en suis très satisfait, tu fais vraiment du beau boulot, impressionnant par rapport à d'autres sites où on trouve des tutos truffés d'erreurs !
Par contre, sur ta page Zoombox, le lien de contact pointe vers ton ancien nom de domaine

Ciao

N4vros Il y a 3 ans Répondre

Super tuto et super module j'ai pu parfaitement l'intégrer a CMS, très simple d'utilisation et très performant que du bonheur merci !

talandria Il y a 3 ans Répondre

Un seul mot ....FELICITATION ... tu es le meilleur !!!
j'adore me ballader sur ton site , qui m'inspire bcp dans mon travail ....

Encore Bravo , et merci bonne continuation .....

Talandria

Cams Il y a 3 ans Répondre

Cool j'attends la mise à jour avec impatience alors !

Grafikart Il y a 3 ans Répondre

@Cams : Pas pour le moment mais l'intégration d'une fonction comme ceci est prévue.

Cams Il y a 3 ans Répondre

Félicitation pour ce superbe script !

J'aimerais l'utiliser à partir d'un site en flash, est-ce possible de lancer Zoombox depuis un bouton flash ?

Merci d'avance. ;-)

wiwi Il y a 3 ans Répondre

Salut, pareil pour moi l'anim flash ce charge pas pour le reste pas de prob merci en tout cas pour l'appli elle est vraiment sympa à pluch

mr-info Il y a 3 ans Répondre

une solutions pour régler ce problème?
j'avoue être un peu largué...

Grafikart Il y a 3 ans Répondre

Par défaut lors du lancement de l'animation les éléments flash sont caché car ils prennent le dessus sur l'HTML. En résumé ton animation flash apparaitrait au dessus de zoombox.

mr-info Il y a 3 ans Répondre

en effet, sympa cette appli,
mais, une petite question....
quand mon image s'ouvre, mon menu flash (du coup en arrière plan) disparait!!!

jamal Il y a 3 ans Répondre

merci c tres top mais mon fichier flv marche pas l'animation se lance mais sans lecteur

Ange03 Il y a 3 ans Répondre

Désolé,

la version de mon WinZip était entrain de me jouer des sales tours...
Tout est ok maintenant.

Merci bien.

Laink Il y a 3 ans Répondre

Très sympa ce player. Léger, rapide, esthétique. Merci

Yann Il y a 3 ans Répondre

Salut.

Concernant les conditions d'utilisation de ton appli ?

Tulifer Il y a 3 ans Répondre

Bonjour, j'adore je cherchais sa depuis un bon moment .
Est ce que sa marche aussi sur les images ?

Grafikart Il y a 3 ans Répondre

@Helix : Tu utilise de l'Ajax, Donc il faut relancer zoombox dès que tu ajoute du contenu à la page. Pour cela lance la fonction zoombox.init() après avoir chargé le contenu en Ajax.

Raiiz0r Il y a 3 ans Répondre

@Helix : Ce ne serait pas les target="blank" qui font tout merder ?

Helix Il y a 3 ans Répondre

@Grafikart :

C'est ici sur mon site http://helixmagic.free.fr/index2.php , dans la section presse. J'ai mis des liens cliquables vers les images mais il n'y a pas d'ouverture de zoombox.

Merci d'avance pour ton aide.

Grafikart Il y a 3 ans Répondre

@Steve: Pour IE6 il ne gère pas bien les PNG transparent ni certain positionnement donc l'adapter est trop pénible. En revanche, tu peux le désactiver pour les possesseur d'IE6 gràce au condition HTML et comme ça eux seront dirigé vers le lien, ce qui ne représente pas un problème d'ergonomie majeur.

@Chris: Longue histoire mais je donnais des cours particulier de math et j'ai découvert que c'était sympa de voir les autres progresser et j'ai compris le potentiel que pouvait représenter un partage comme celui que je propose. Ca permet aussi d'avoir des retour sur ce que je fais, si certains utilisent les mêmes méthode ou pas.

@Helix: Si tu donne un lien ça me permettrait d'identifier plus facilement ton souci.

Helix Il y a 3 ans Répondre

Merci beaucoup pour ce tuto, mais j'ai un léger soucis, c'est que j'ai beau tout essayé au niveau des chemins, rien ne fonctionne, ça ne m'ouvre pas de fenêtre zoombox donc là j'avoue que je comprend pas. Si quelqu'un peut m'aider.

Merci.

Chris Il y a 3 ans Répondre

Merci vraiment pour tout tes tutoriels, j'étudie php, mysql javascript xhtml et css depuis quelques mois et tes vidéos me font vraiment avancer et comprendre plus vite. Etant au chômage, je compte proposer plus tard mes services pour créer des sites web.

Mais j'ai une question : pourquoi fait-tu ça ? Tu as la fibre pédagogique ? C'est dans un soucis qu'internet soit plus sûr, mieux construit, plus accessible ? Bon, bref, c'est vraiment excellent tout ce que tu fais, et merci beaucoup.

Est-ce que tu connais le site du zéro ? Tu dois connaître, c'est bête, j'ai beaucoup appris grâce à leurs tuto aussi. Très bonne continuation.

Steve Il y a 3 ans Répondre


Bonjour,

@Wan972 : Je le sais qu'il est obsolete mais tu à énormement de visiteurs qui l'utilise encore il me faut des script compatible et étant donné que zoombox est une perle ça me ferait chier de pas l'utiliser a cause qu'il ne soit pas compatible IE6.

Merci d'avance

Wan972 Il y a 3 ans Répondre

Salut à tous !!!

Je reviens après une longue absence et que vois-je ?
Des bons tutos tous chauts qui attendent que je les déguste lol ^^

Bref, Graphikart surper simpa ton flash à l'acceuil ( c innovant, tu passes à un autre niveau. Celui d'un professionnel)

En tout cas merci pour ce tuto, assez pratique (j'attendai une petit mise à jour pour le zoombox et voilà que je suis servi lol)

Steve : ton IE6 est OBSOLETE lol passe sur FIREFOX. Bon, sérieux, ton ie6 est vieux. Installe la dernière version IE. car actuellement les deux navigateurs se rapprochent.
@Raiizor: ton zoombox fonctionne parfaitement (je suis sur FF et vista)

Raiiz0r Il y a 3 ans Répondre

@Weby : Bah mon javascript est activé :s
Ça me fait pareil sur mes deux autres pc (xp et vista)...

Steve Il y a 3 ans Répondre

Salut, est-ce que Grafikart pourrais nous expliquer si c'est normal que zoombox soit inactif sous IE6 avec les images et les vidéos dailymotion svp, merci d'avance

ilyesn Il y a 3 ans Répondre

C'est bon nouveau design fini : http://opluffy.free.fr/

Weby Il y a 3 ans Répondre

@Raiiz0r : si si :-) je vois bien les vidéos sur Firefox (Mac).
N'as tu pas désactivé le javascript de ton FF pour faire un test ou un truc comme ça ?...

Raiiz0r Il y a 3 ans Répondre

Bonjour,
Je refais ma demande car je me suis trompé ^^
En faite, zoombox installé sur mon site ne marche pas sous firefox sinon, il marche niquel sous Opéra, Chrome, Safari...
Avez-vous une idée du pourquoi du comment ?
Lien : http://pavillonnoir.power-heberg.com/index2.php?page=brikabrak

ilyesn Il y a 3 ans Répondre

Mince me suis trompé c'était pour le diaporama. Désolé.

ilyesn Il y a 3 ans Répondre

@Steve : salut déjà en faite j'ai une solution pour ton problème du moins pour les images car j'ai jamais essayer pour la vidéo. Voilà une de mes gallery : http://opluffy.free.fr/gallerie/art.php.

Pour que sa fonctionne il faut que tu change les class du tutoriel en simple fonction php. éxtrait du code pour que tu comprenne mieux :

function creerMin($img,$chemin,$nom,$mlargeur=100,$mhauteur=100){
// On supprime l'extension du nom
$nom = substr($nom,0,-4);
// On récupère les dimensions de l'image
$dimension=getimagesize($img);
...

Je crois que IE6 n'accepte pas les class. Voilà
Cependant sous IE6 la transparence ne marche pas.

Steve Il y a 3 ans Répondre

Toujours pas de news vis a vis de IE6 ? Car mon soucis est toujour sprésent, merci d'avance

ilyesn Il y a 3 ans Répondre

Merci Weby j'avais trouver un tutoriel semblabe :
Sinon voilà le résultat http://opluffy.free.fr/SITEDESIGN/index.php
Toujours en construction bien sûr.

Raiiz0r Il y a 3 ans Répondre

@Weby : Non, mais en faite on les vois ^^ Mais on peux pas lancer la lecture ni rien... Enfin des fois j'y arrive mais ça merde quoi =D

Weby Il y a 3 ans Répondre

@ ilyesn : tu peux utiliser une image d'arrière plan pour simuler la colonne ou utiliser javascript. Pour la première solution, regarde les <a href="http://www.alsacreations.com/static/gabarits/liste.html ">GABARITS sur le site d'Alsacreations</a> (modèles 5 à 8). Pour la deuxième, un "boss" en JS sera mieux placé que moi pour t'aider...

@ Raiiz0r : Je vois bien les commandes sur ton lien.

Raiiz0r Il y a 3 ans Répondre

Bonjour,
Tout d'abord, niquel le tuto (comme tout les autre ^^) =D'
Euh, sinon, j'ai un petit problème... ^^
En faite, les actions habituelles (pause, lecture, avance de la lecture...) ne sont pas disponibles.
Voici le lien : http://pavillonnoir.power-heberg.com/index2.php?page=brikabrak
Voilà, si vous savez quel est le problème... :p

Et encore merci pour ces tutos :D

ilyesn Il y a 3 ans Répondre

Salut, tout le monde.
J'aurait de l'aide en CSS.
En faite je suis en train de créer un nouveau design pour mon site web. Et donc j'ai un menu à gauche et un container ou il y a mes news. J'aimerait pouvoir avoir la même taille en hauteur de mon container pour le menu autrement dit que l'auteur de mon menu se modifie automatiquement lorsque mon container change de taille.
SVP help me. Je ne trouve pas.

steve Il y a 3 ans Répondre

@Thibault : Regarde bien le lien que j'ai mis dans mon profil, je suis le tuto et la vidéo dailymotion n'est prise en compte sous IE6, ça reste un lien normal ...

Après je ne sais pas si c'est normal que la vidéo ne soit pas lu, si vous avez des avis je suis preneur et merci encore à grafikart, il me plait bien ce script

Donc même en suivant le tuto, chez moi IE6 ne prends pas en compte zoombox

Merci d'avance de votre aide dans la résolution de ce facheux problème ( grrr a mort IE6 )

ilyesn Il y a 3 ans Répondre

félicitation pour ton nouveau gadget flash sur la page d'accueil c'est cool ^^.

Weby Il y a 3 ans Répondre

Merci pour le super tuto !!!
Je vais m'en servir souvent ;-)

<em>Une idée de sujet</em> : un espace membre/client avec une page personnalisée pour chaque client/membre (info compte,...)

Je ne sais pas vous, mais moi j'aimerais bien savoir faire ça et tes tutos sont tellement clairs que je suis sur de tout comprendre ;-) (Même payant sur Weecast par exemple...)

Merci pour ton superbe travail !!! Bonne continuation,
Cordialement,
Weby

PS : Moi aussi je suis étonné de revoir windows (l'interface Mac me manque, et il me semble que la qualité vidéo est meilleur lorsque tu capture avec le logiciel mac... A vérifier).

Thibault Il y a 3 ans Répondre

@steve : Tu n'as pas besoin de ça ! Tu fais le tuto comme expliqué car ce système fonctionne très bien sous IE6, 7 et 8
Donc tu ne te prends pas la tête et tu inclues ton Javascript normalement !

steve Il y a 3 ans Répondre

Quelqu'un a une idée de ce qu'il faut mettre entre <!--[if !IE 6]> et <![endif]--> pour que ca soit compatible IE6 ? merci d'avance

DiGui Il y a 3 ans Répondre

Comme d'habitude parfait

super_g2 Il y a 3 ans Répondre

@sorrow : ce genre de galeries est courant pour ce genre de script mais clair très pratique

Sorrow Il y a 3 ans Répondre

Moi j'ai apprecier le fait de pouvoir faire une galerie comme celle-ci :

<a href="../images/productions/maps/awp_dusty/screens/001.jpg" rel="zoombox[awp_dusty]" title="awp_dusty"><img src="../images/productions/maps/awp_dusty/miniatures/0002.jpg" alt="awp_dusty" /></a></div>
<a href="../images/productions/maps/awp_dusty/screens/002.jpg" rel="zoombox[awp_dusty]" title="awp_dusty"></a>
<a href="../images/productions/maps/awp_dusty/screens/003.jpg" rel="zoombox[awp_dusty]" title="awp_dusty"></a>
<a href="../images/productions/maps/awp_dusty/screens/004.jpg" rel="zoombox[awp_dusty]" title="awp_dusty"></a>

bast_65 Il y a 3 ans Répondre

@Thibault: Moi j'utilise IETester sur windows.

Thibault Il y a 3 ans Répondre

Vraiment un excellent module, propre, facile d'utilisation, rien à redire !

Je te donne juste une suggestion : Il faut qu'il puisse tourner sous IE 6... En effet encore beaucoup trop de personnes sont dessus et ce n'est pas négligeable !

PS : Je viens de l'installer sur mon site, et avec le test IEtabs (module firefox) ça fonctionne très bien... Si quelqu'un sait comment installer IE6 :p

Bonne journée :D !

bast_65 Il y a 3 ans Répondre

Petite question, combien de temps tu a mis pour programmer zoombox ? Tu est partie de zero ou a partir d'un code deja existant ?

super_g2 Il y a 3 ans Répondre

[quote]Je ne suis plus sur mon Macbook mais sur ma tour qui est sous Seven et ya pas photo niveau performance par rapport aux macs[/quote]

qu'entends-tu par "pas photo niveau perfs"? car je trouve que mon Mac tourne plutot bien
sinon, un outil pour remplacer coda, textmate, l'intégration du X11 etc. sous Windows?

leknoppix Il y a 3 ans Répondre

Le jour où il y aura un windows meilleur que ubuntu et que macosx, je veux bien faire le tour de la france à poil

Lyes Il y a 3 ans Répondre

Juste un autre petite question, il est stable ton se7en ? xD
Car on m'a dit "IL est Géniiaaal!! c'est mieuux que ton uubnntuu !!!"...
mais j'en doute ..

steve Il y a 3 ans Répondre

Bonjour, j'ai un petit soucis sous IE6 ( oui beaucoup l'ont encore ... )

Que faut-il mettre entre <!--[if !IE 6]> et <![endif]-->

J'ai tenter avec :

<!--[if !IE 6]>
<script type="text/javascript" src="zoombox/jquery.js"></script>
<script type="text/javascript" src="zoombox/zoombox.js"></script>
<![endif]-->

Mais cela n'as pas l'air de fonctionner, merci d'avance de votre aide et superbe travail bravo, grafikart est un des meilleurs site web sur les tutos pratiques et sympa

Grafikart Il y a 3 ans Répondre

@Lyes et Remus : Je ne suis plus sur mon Macbook mais sur ma tour qui est sous Seven et ya pas photo niveau performance par rapport aux macs

@Remus : Tu peux le mettre sous wordpress mais il faut aller l'importer dans ton thème manuellement, en attendant que je commence à développer des plugins wordpress...

Remus Il y a 3 ans Répondre

Petite présentation très utile néanmoins il était facile de comprendre l'utilisation de ton programme après avoir visionné ta vidéo sur la création d'une galerie.

Ce que je ne comprend pas dans ta vidéo c'est pourquoi VISTA ?! Aller dans pas longtemps ont vas goutter à Snow depuis le temps qu'ils en parle.

Question bête ton programme peut être utilisé sur une plateforme Wordpress?

Lyes Il y a 3 ans Répondre

PS:(eh oui je l'ai oublié en haut désolé xD) T'es retourné sur windaube ???? ça m'étonne O_o

Lyes Il y a 3 ans Répondre

Merci pour le tuto, juste que..il n'y toujours pas de lien sur le site pour y accéder...
tu pourrais peut-être le mettre dans la Sidebar ^^

Ravi Il y a 3 ans Répondre

Merci beaucoup ^^

leknoppix Il y a 3 ans Répondre

g trouvé

window.parent.zoombox.close();

Harry Il y a 3 ans Répondre

Héhé on est passé sur Windows Se7en ? \o/
Tes premières réactions ? ^^'

-------

Concernant le tutoriel je connaissait déjà ^^

leknoppix Il y a 3 ans Répondre

question, voila j'utilise zoombox pour faire apparaitre un formulaire. Jusque là pas de problème. Je voudrais savoir comment faire pour d'une part fermer la boxzoom et d'autre part pur actualiser automatiquement la page appelante. Est ce déjà possible?

Grafikart Il y a 3 ans Répondre

@Jasse29 : Dailymotion met un petit moment avant de mettre en HD et c'est vrai qu'en HQ c'est pas tip top.

@Visual3D : Ce navigateur m'exaspère, au pire tu met une condition
<!--[if !IE 6]>
tu importe les scripts
<![endif]-->
Comme ça ça ne les gènera pas

@Shelton : C'est intype, un éditeur en Alpha (instable) mais qui est très très prometteur.

Shelton Il y a 3 ans Répondre

ZoomBox trop cool, franchement tu est trop fort.
Une petit question c'est quoi l'éditeur de texte que tu utilise ?
Sinon encore félicitation c'est du bon boulot. :D

Visual3D Il y a 3 ans Répondre

Salut! Dommage que la box ne fonctionne pas sur IE6 (il y a quand même un sacré nombre d'internautes qui utilise encore ce "navigateur")

Jasse29 Il y a 3 ans Répondre

Bonsoir,
Comme d'habitude, ce tutoriel est non seulement bien fait mais aussi très intéressant. Seul petit bémol : la qualité de la vidéo (même en HD) est tout juste passable.
M'enfin, le principal c'est que l'on comprenne le fonctionnement de Zoombox !

super_g2 Il y a 3 ans Répondre

ah ben enfin, tu te décides à faire un ti tuto sur ta belle production GG car bien pratique pour qui veut utiliser des lightbox sans réclamer trop de ressources au client web de l'utilisateur, je conseille ce .js à tous

enjoy

leknoppix Il y a 3 ans Répondre

merci, mais connaissait deja et utilisé souvent.
Bonne continuation

chataoui Il y a 3 ans Répondre

bravo encore une fois et merci

Babou Il y a 3 ans Répondre

1er commentaires ! :o
Bref, bonne explication, merci à toi.
Bye.

Laisser un commentaire

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