Ouverture d'une image en pop-up

Bonjour,

J'aimerais réussir à ouvrir les images de la page ci-dessous en pop-up à l'intérieur même de la page Web déjà ouverte.

C'est à dire qu'une fois sur la page des créations, la souris, une fois sur la vignette, montre la création intégralement dans la même div que l'étiquette (ce qui est le cas actuellement). Mais qu'il soit possible ensuite de cliquer sur cette vignette pour ouvrir une petite fenêtre (animation transition) avec la création en taille originale.

Pourriez-vous me dire comment ajouter ça à ma vignette ?

http://www.aurelienhamel.fr/sites/PHP2/logo.php

Merci
Modifié par Stéphanie W. (20 May 2013 - 17:15)

Colorbox est très souple au niveau personnalisation. Par exemple tu as des composants en PNG que tu peux mettre aux couleurs que tu veux.

J'ai choisi Colorbox car avec d'autres (par exemple Fancybox) j'avais des soucis de compatibilité avec certaines versions de navigateurs.

Colorbox permet aussi soit d'adapter l'image popup à la taille de la fenêtre du navigateur, soit d'ouvrir une image plus grande à sa taille réelle (obligeant donc à scroller) mais utile par exemple pour restituer une coupure de presse dont la taille doit être lisible.

Pour supprimer le cadre bleu, présent par défaut sur toute image pointant vers un lien, il suffit d'ajouter border="0", si c'est bien de ça dont tu parles.

Effectivement, Colorbox semble à la base destiné à afficher une galerie de photos, il y a donc une navigation entre chaque image. Pour ouvrir une image isolée qui ne permette pas de naviguer vers la suivante, pour ma part j'ai déclaré autant de "group" que de photos isolées sur ma page, avec chacun strictement les mêmes caractéristiques.

                                    $(".group1").colorbox({rel:'group1'});
				$(".group2").colorbox({rel:'group2'});
				$(".group3").colorbox({rel:'group3'});
				$(".group4").colorbox({rel:'group4'});
				$(".group5").colorbox({rel:'group5'});
				$(".group6").colorbox({rel:'group6'});
				$(".group7").colorbox({rel:'group7'});

Je ne sais pas s'il y a une solution plus rationnelle, mais celle-ci fonctionne.

Je n'ai pas compris ta troisième question.
Modifié par themadwizard (21 May 2013 - 23:28)

Ok, je vais essayer.

Par contre avec Firebug j'ai deux messages d'erreurs :

a écrit :
TypeError: f is undefined

...ak);var c=-1;function ao(ay){if(ay<0){ay=0}if(s){s.loadTtip(ay)}J(ar.get(c)).rem...

a écrit :
wowslider.js (ligne 11) TypeError: jQuery.colorbox is undefined

jQuery.extend(jQuery.colorbox.settings, {

Et quand je navigue sur mon site, j'ai des "freezes" parfois...

=> www.aurelienhamel.fr

Je ne peux pas t'aider sur ces deux points.

Par contre, peu de monde a un affichage 1920 x 1280 donc tu devrais paramétrer Colorbox pour adapter la taille du popup à la fenêtre du navigateur. Dans le fichier jquery.colorbox.js, cherche le paramètre maxHeight. Moi j'ai mis :

maxHeight: "95%",

Je ne vois pas la croix de fermeture sur tes popups. C'est un choix perso, ou alors tu as oublié de copier le fichier controls.png ?

Tu n'as pas besoin de ces lignes si tu ouvres juste tes images :

$(".ajax").colorbox();
				$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
				$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
				$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
				$(".inline").colorbox({inline:true, width:"50%"});
				$(".callbacks").colorbox({
					onOpen:function(){ alert('onOpen: colorbox is about to open'); },
					onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
					onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
					onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
					onClosed:function(){ alert('onClosed: colorbox has completely closed'); }

Modifié par themadwizard (22 May 2013 - 16:23)

Pour la croix de fermeture, elle n'apparait pas malgré le fichier que j'avais déjà mis en place.

Il me semble qu'elle apparaît en bas à droite dans la barre blanche de mes images.

Bonjour,

pour ton bouton close je pense que ce sera mieux comme ca si tu le veux effectivement en bas a droite toujours mieux qu'un text-indent foireux et pas besoin de width si il prend automatiquement la bonne taille non?

#cboxClose {
    position: absolute;
    bottom: 0px;
    right: 0px;
    height: 25px;
    background: url("file:///C|/Users/AURLIE%7E1/AppData/Local/Temp/Rar$DRa0.557/colorbox-master/example1/images/controls.png") no-repeat;
}