Tutoriel Vidéo jQuery : Réaliser une Pop-in avec jQuery

camachomarco12 Il y a 3 jours Répondre

Franchement, merci beaucoup
Ca faisait une semaine que je cherchais desesperement, mais là, niquel
:)
Merci beaucoup

maxopoil Il y a 1 mois Répondre

Bonjour,

Encore novice dans tout cela j'ai commencer à apprendre HTML CSS...

C'était la première fois que je touchais à des notions comme Jquery, le tuto est très bien expliquer mais après avoir avoir visionner le tuto une dizaine de fois je n'ai toujours pas le bon rendu.

Je ne comprend pas mes pages se superposent @loader, conteneur etc... Mon "mybox.js" ne se lie pas à mon doc html même en racine.

Existe t'il une section aide ou poster un sujet complet avec mon code etc...dans l'espoir qu'une bonne âme vienne me sauver ?

Je check beaucoup de vos tutos, et pour un novice cela m'apporte beaucoup,merci.

Ranguren Il y a 3 mois Répondre

Magnifique tutoriel! Fonctionne admirablement.
J'aurais tout de même une question ou plutôt j'aimerai savoir si c'est possible d'avoir un complément de tuto!
Je cherche à insérer un texte qui sera unique à chacune de mes images, mais surtout
un système de suivant précédent.
Pour avoir un système de diaporama en pop-in donc.
Serais-t'il possible d'avoir une aide, une redirection ou un tutoriel à venir sur une méthode pour afficher cela.
Bon après c'est une petite demande, Grand bravo encore j'adore votre site et le fait profiter au maximum de personne, continuez comme sa surtout.

dan_vdb@hotmail.com Il y a 8 mois Répondre

Bonjour,

Super tuto !

J'aurais voulu savoir si il était possible de mettre, par exemple, un formulaire PHP dans ce pop-in afin de pouvoir se connecter ou quelque chose dans le genre.

Merci

hug Il y a 1 an Répondre

Les images n'apparaissent pas sous chrome, y a t il un moyen de régler ça?

MErci

ben62224 Il y a 1 an Répondre

Je me pose la même question que Starvin

Starvin Il y a 1 an Répondre

Merci au raton pour cette super video !
Une question néanmoins, que faut il modifier pour faire afficher en light-box une page html en frame ou overflow à la place d'une image ?

merci beaucoup

kimo Il y a 1 an Répondre

vraiment c'est joli

ThermO Il y a 2 ans Répondre

Salut, est t'il possible de remplacer l'image par du texte ou un formulaire de contact ?
Merci beaucoup pour tes tutos.

monkeydluffy Il y a 2 ans Répondre

Bonsoir encore un gros bravo pour Grafikart, le tuto est très bien présenté.

J'ai ajouté un div dans la box et j'affiche des informations tels que la hauteur et largeur. Est-ce qu'on peut récupérer la taille de l'image en octets ?

Merci encore pour le taf que vous fournissez ^^

nico Il y a 2 ans Répondre

trop bien comme d'hab...
- le code est propre et tout à l'air si simple.
top quoi

la chose Il y a 2 ans Répondre

trop bien ! mais j'espere que tu vas faire un tuto qui explique commen faire un bouton next et prev et n array qui selectionne toutes les images...
enfin bon, tes tutos sont toujours aussi pros !

jarod Il y a 2 ans Répondre

Tout simplement ...passionnant. Tes tutoriels sont clairs et agréables à suivre, tu transmets le plaisir d'en apprendre d'avantage, merci.

michelo34 Il y a 2 ans Répondre

bonjour, excellent tuto, mais j'ai une question d'ordre technique, ce tuto est impec pour mettre une image dedans, moi je souhaiterais que quand je clique sur le lien la popin s'ouvre et qu'il y ai une page dedans, en clair j'aimerais afficher un formulaire a l'intérieur et exécuter le traitement de celui ci a l'intérieur, est ce possible? merci beaucoup

leo Il y a 2 ans Répondre

Trop balaise... Beau boulot, encore une fois

qs Il y a 2 ans Répondre

qs

Marcounet Il y a 2 ans Répondre

Que de choses apprises en 48 minutes !!!
Ce tutoriel est si riche que ça m'a donné plein d'idées pour d'autres applications qui n'ont rien à voir avec le sujet abordé ici.
De plus j'ai l'impression de retenir beaucoup plus facilement les infos données dans le cadre d'un tutoriel vidéo plutôt qu'en lisant un tutoriel écrit.
Merci pour tout, tu me fais découvrir plein de choses :-)

juli1m Il y a 2 ans Répondre

Salut,

Super tutoriel, j'ai appris pas mal de trucs. D'habitude je bosse avec une web agency, mis pour cette fois, j'ai dû me débrouiller par moi même pour faire une popin.

Il me reste une problématique sous IE : cacher le scroll vertical tant que la popin est affichée (je n'ai jamais de scroll horizontal). Pour Firefox, le overflow:hidden sur l'élément body fonctionne à merveille. Si tu as un tuyau, je suis preneur.

darkn1ko Il y a 2 ans Répondre

vaut mieux le faire soit même avec de l aide sinon t apprends pas grand chose.
au début tu vas avoir du mal mais c est mieux

rojhin Il y a 2 ans Répondre

salut !
je me lance ds l apprentissage de jquery et javoue qu avoir la possibilite de trouver les sources des tutaux serait tres tres intreressant!

MogWaï Il y a 3 ans Répondre

Bonjour Grafikart,
J'adore tes tutos, en général je les digères plutôt bien et je prend un plaisir à modifier le code lui rajouter des options, changer le design, faire la même chose mais autrement. Dans le cas présent, j'appelle à l'aide ! Le site que je développe est une sorte de facebook prive pour une asso. Vous serez tous informé à ça publication. J'en suis assez fier. Tout fonctionne à peu près. Mais pour le design c'est une autre histoire. Je souhaite utiliser ce system mais il ne doit pas contenir d'image mais du html et même peut être du php. Je pense qu'avec ta div "Ils l'ont utilisé" tu as la réponse a mon probleme.

Coordialement,

MogWaï

Gus Il y a 3 ans Répondre

J'aurais beaucoup aimé suivre ce tuto mais la qualité de la vidéo est rès médiocre, ce qui fait que je ne parviens pas à voir le code tapé. Dommage !

matt Il y a 3 ans Répondre

Vraiment bien !

Dommage que ca ne marche pas sur IE8

Fraize Il y a 3 ans Répondre

omg ... best tuts ever :D
vraiment, moi qui pensait que je ne ferai jamais de zoombox !
merci

BIPBIP Il y a 3 ans Répondre

Très bon tuto, mais bon, l'écran est flou :'(

lakim Il y a 3 ans Répondre

et bien tout d'abord je tiens à vous que vous faites un travail formidable et en scrutant la toile du web je n'ai pu trouver de tutoriaux mieux que les vôtres.

Graphiste de base je me suis rendu vite compte que je devais toucher au monde merveilleux n'ait au moins effrayant de la programmation "cela dit heureusement que grafikart est la" et bien je vous souhaite une bonne continuation

un tit tutorial sur Htaccess ça serait tip top

mica94 Il y a 3 ans Répondre

Bonjour,
ce tuto est excellent, et marche impecc sur firefox.
Mais sur IE(meme IE8), j'ai une erreur javascript "non implemente" sur le :
self=this;

Y a t-il une solution ?

Merci

buburoi Il y a 3 ans Répondre

Super Site et super tuto...Malheureusement on ne voit pas bien sur la vidéo...Serait-il possible d'avoir le js? Ce serait super!
Merci pour le partage.
CDLT.

BnW Il y a 3 ans Répondre

Super tutoriel merci beaucoup je n'aurais pas imaginé que cela puisse être fait aussi facilement (en même temps je n'avais pas cherché à le faire :p). Enfin super tuto comme d'habitude !

Sinon pour répondre à NiGro il me semble que c'est Komodo Edit 5 (j'utilise le même) avec des couleurs personalisés.

Cordialement

NiGro Il y a 3 ans Répondre

Salut,
Bravo pour le tuto
Dit moi GrafikArt - avec quel éditeur ta codé pour ce tuto ??

noa Il y a 3 ans Répondre

C'est pas pour critiqué mais la vidéo certes elle est bien mais pourquoi elle est aussi deg ? on voit pas bien je trouve sauf erreur de ma part

Babou Il y a 3 ans Répondre

Super tuto, merci à toi Ca va servir pour tout le monde !

Iron Il y a 3 ans Répondre

Salut,

Super tuto mais j'ai un pb sur Firefox car a partir du redimensionnement, plus rien ne fonctionne et sur IE, j'ai une erreur indiquée sur mon fichier Jquery.js alors que je n'ai touché a rien

Serait-il possible d'avoir ton fichier mybox.js stp ? car je suis pratiquement certain que j'ai fait une erreur mais je ne trouve pas où

Merci d'avance !

ilyesn Il y a 3 ans Répondre

Yep. Merci et bonne continuation.

Flomito Il y a 3 ans Répondre

Super tutoriel. La qualité est juste un peu mauvaise.
Merci à toi :D

Raptor02 Il y a 3 ans Répondre

Génial, comme toujours, mais chez moi (safari), le positionnement par rapport à la fenêtre ne fonctionne pas.
Et sous firefox, l'image ne se charge pas, ainsi que le loader...

Shin Il y a 3 ans Répondre

Snif ce tuto arrive quelques semaines après que je me sois lancé dans mon propre script.
Bon c'est forcément moins fonctionnel mais ça aura le mérite d'être personnel, et maintenant que je viens de voir celui-ci je vais pouvoir corriger tous mes bug.

Un grand merci donc pour ce magnifique tuto extrêmement utile pour tous les développeurs qui se soucient du design de leurs sites web =)!

Sixte Il y a 3 ans Répondre

bravo, super tuto

Syl20 Il y a 3 ans Répondre

Encore un très bon tuto ! Merci

Didi Il y a 3 ans Répondre

Merci pour ce tutoriel gratuit apporteur d'une grande richesse

Fedora Il y a 3 ans Répondre

toujours EXPERT

polo45 Il y a 3 ans Répondre

Tuto super Sympa mais on voit très mal le code sur la vidéo c'est dommage ...

Galdon Il y a 3 ans Répondre

Probablement le meilleur tuto javascript de ce site, merci.

C'est de plus en plus utilisé (ex: facebook).

Vinc Il y a 3 ans Répondre

La vidéo est de mauvaise qualité puisque que Dailymotion met un certain temps pour traiter la vidéos en HD, attend quelques jours et ça sera bon.

Merci pour ce tutoriel même si le temps entre les tutos est plutôt long, mais comme on dit " plus on attend et mieux c'est"

basketteur-33 Il y a 3 ans Répondre

tres bon tuto comme toujour, Merci

doo Il y a 3 ans Répondre

mais la vidéo est de mauvaise qualité ;-(

doo Il y a 3 ans Répondre

merci comme toujours!!

lioninho Il y a 3 ans Répondre

Rien à dire génial