Zoomer image dans meme fenetre avec effet transparence arriere [Résolu/Fermé]

Signaler
Messages postés
323
Date d'inscription
jeudi 29 janvier 2009
Statut
Membre
Dernière intervention
15 novembre 2020
-
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
-
Bonsoir :)

après pas mal de recherches je n'ai pas trouvé de réponse clair.
Je souhaiterai , lors que je clique sur une image parmi une sélection, que celle-ci s'ouvre par dessus ladite sélection en taille réelle. Avec un assombrissement de la page en cours afin d'avoir l'illusion que l'image que l'on a ouverte est bien au premier plan.

Il existe de nombreux site web qui utilise cette méthode d'affichage que j'apprécie bcp.
Mais je ne trouve pas de code à mettre dans la balise head.
Certains parlent d'inclure du css, d'autre du js par le biais de jquery. Et enfin, il y a ceux qui pensent que quelques lignes de code dans le html, suffirait.

Les seuls choses que j'ai obtenu en testant plusieurs code sont des pop-up très moches.

Si vous savez comment s'y prendre, ou même seulement quelques bouts de codes que je pourrai réassembler, merci d'avance :)


5 réponses

Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
655
Salut
la plupart du temps c'est du jquery
le truc s'appelle une lightbox
donc va voir du coté des lightbox jquery
ex https://lokeshdhakar.com/projects/lightbox2/
mais il en existe des dizaines
recherche google lightbox
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
323
Date d'inscription
jeudi 29 janvier 2009
Statut
Membre
Dernière intervention
15 novembre 2020
3
Bien vu :) je connaissais pas le terme lightbox.
Merci pour l'info :)

Dis moi, il est possible d'inclure une lightbox à un ensemble d'images animées de ce genre ?
https://tontonduweb.com/previews/mosaiqueimage/

ça sent bon la goupille... :)
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
655
oui il y a des lightbox pour tout contenu et pas uniquement des images
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
655
pourrais tu envoyer l'url (adresse) de la page
parce que décortiquer du code minifié sans indentation ca je ne fais pas
donc --> adresse de la page et code non minifié (genre pas tout collé)

la structure d'une page doit être comme cela

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> 
<head>
ici les meta balises, l'appel aux scripts externes
l'appel aux css externes
</head>
<body>
le code de ce qui s'affiche
</body>
</html>
Messages postés
323
Date d'inscription
jeudi 29 janvier 2009
Statut
Membre
Dernière intervention
15 novembre 2020
3
je peux te passer l'adresse du site en mp si tu veux :)
Messages postés
323
Date d'inscription
jeudi 29 janvier 2009
Statut
Membre
Dernière intervention
15 novembre 2020
3
et comme dit plus haut, j'utilise un plugin d'album photo acheté ici :
https://tontonduweb.com/previews/mosaiqueimage/

Je le trouve pas mal et voulais garder kk éléments

Après c'est un site fait avec webacappella.
Pour les lightbox, je trifouille les fichier html

Tiens moi au courant, merci :)
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
655
Pas de MP, donnes l'adresse de la page avec la lightbox sans le http ici
Messages postés
323
Date d'inscription
jeudi 29 janvier 2009
Statut
Membre
Dernière intervention
15 novembre 2020
3
Excuses, j'ai du m'absenter un moment.

Voilà l'adresse de la page que tu demandes :)
imageincom.com/illustration.html

J'ai fait des tests sur les 1ere images seulement.
Le reste s'ouvre juste avec un blank

Mais la lightbox est bien plus intéressante dans ce cas, car les utilisateurs peuvent rester sur la même page. C'est plus intuitif. :)
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
655
Re Salut
bon déjà ta page
183 erreurs au validateur w3c
https://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fimageincom.com%2Fillustration.html

donc a corriger

tu fais appel 2 fois a une bibliothèque jquery donc c'est en conflit
ligne 17 jquery 1.7.1
ligne 39 jquery 1.5.1

ensuite pour la structure de page
ligne 36 / ligne 119 <html> a enlever
ligne 37 <head> a enlever
ligne 119 après <![endif]--> ajoute </head>
ligne 411 </body> a enlever
ligne 412 </html> a enlever
ligne 425 </head> a enlever
ligne 426 <body> a enlever

tu utilises les tag <figure> et <figcaption> dans une page xhtml 1.0 : ces tag sont des tags html 5 cela ne doit pas être utilisé dans du xhtml 1.0 transitional (voir ta déclaration de doctype ligne 1

les balises img de ton menu ont un tag de fermeture </img> donc retirer ce tag
la bonne déclaration est <img src=" ....... /> pour le xhtml 1.0

Ensuite le script de ta lightbox (ligne 90 à 117) ne fonctionnera pas car
- 2 fois jquery
- pas de div .box ou .dropbox dans ton code (avec l'image dedans)
- si il y en avait au clic ca ouvrirait toutes les div .box ou .dropbox

tu devrais utiliser une gallerie utilisant litghbox
ex
http://visuallightbox.com/index.html (generateur de galerie avec lightbox)
https://codecondo.com/free-jquery-photo-gallery-lightbox-plugins/ (liste de plugin)

En fait tu devrais laisser tomber webaccapella et apprendre html + css car ta page reflète l'utilisation d'un logiciel WYSIWYG sans connaissance de base en html css ou sinon utiliser un cms, il en existe des spécialisés pour ta catégorie professionnelle ex
https://www.zenphoto.org/


cordialement


Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
655
bon j'ai été voir
ligne 116 à 120 <img class="lightbox" ....... <div class="close">x</div>#</div> a supprimer c'est ce qui empeche ton animation
ensuite
ligne 38 <title>Quick Simple Light Box</title> a supprimer
ligne 115 <body> a supprimer
ligne 134 avant <div class="grid"> ajouter <body>

enfin
dans .dropbox ligne 57 mets z-index:99998;
dans .box ligne 75 mets z-index: 99999;

après tu pourra modifier les margin et width de .box selon ta convenance

voila testé avec l'extention firebug de firefox ca marche sur ton site

donc résolu et merci et heureusement que j'aime bien les graphistes et illustrateurs
Messages postés
323
Date d'inscription
jeudi 29 janvier 2009
Statut
Membre
Dernière intervention
15 novembre 2020
3
Trop fort ! :)
un grand merci à toi
Tes corrections permettent bien d'afficher les lightbox avec un contenu.
Et l'anime remarche aussi :)

Mais par contre, je ne pige pas pourquoi les 3 premières images sont en doublon ?
(j'ai testé qu'avec les 3 premières)
On ne peut cliquer sur le doublon du bas pour activer la lightbox mais pas celui du haut...
C'est bizarre ce truc...

Et la lightbox s'ouvre en petit alors que le width de la box img est à 100%
Il faut que j'applique une taille en px au lieu du pourcentage ?

Pourquoi t'aimes les graphistes et illustrateurs? :)
Moi j'aime bien les intermittents du spectacle :) Ma prof d'Aiki en est une et elle est trop cool
Messages postés
323
Date d'inscription
jeudi 29 janvier 2009
Statut
Membre
Dernière intervention
15 novembre 2020
3
Bon alors, j'ai finit par trouver la ligne permettant d'augmenter la largeur de la boite.
Je l'ai mise à 1280px mais finalement j'crois que je vais la réduire un peu, sinon les petits écran n'en profiteront pas.
Mais tant pis pour tous ce qui est smartphone et tablette. Les résolutions sont trop petites.

Mais je n'arrive toujours pas à trouver pourquoi les images sont dupliquées ? C'est un véritable mystère... Peut être qu'il y a conflit entre l'anim et le miniature ? Surement une autre ligne à déplacer, supprimer ou modifier ?

Je continue de fouiller le code et rechercher d'autres solutions :)
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
655
C'est parce que l'image tu l'as mise dans figure et dans figcaption

    <figure class="effect-sarah2">
     <img src="img/41.jpg" alt="img41"/>
     <figcaption>
      <h2>VECTORIEL <span>Nenuphar</span></h2>
      <p>Illustration faite à partir de vecteur.</p>
     <img class="lightbox" src="img/41.jpg" alt="Descriptif.">
     </figcaption>
    </figure>


il faudrait que ce soit comme ca

    <figure class="effect-sarah2">
     <img class="lightbox" src="img/41.jpg" alt="Nenuphar vectoriel"/>
     <figcaption>
      <h2>VECTORIEL <span>Nenuphar</span></h2>
      <p>Illustration faite à partir de vecteur.</p>
     </figcaption>
    </figure>


dernier truc

ligne 113 le </head> il n'est pas bien placé

il faut le mettre comme ca (juste avant body) ligne 125

 ... <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>


sinon je ne suis pas artiste intermittent mais artiste permanent (artiste de compagnie en CDI)
je fais un peu de graphisme mais sans photoshop (trop cher j'utilise Gimp)
et ma nièce est graphiste freelance pro
Messages postés
323
Date d'inscription
jeudi 29 janvier 2009
Statut
Membre
Dernière intervention
15 novembre 2020
3
Apparemment faudrait laisser la ligne

<img class="lightbox" src="img/41.jpg" alt="Descriptif.">


Parce que sans ça, la lightbox ne s'ouvre plus.
Mais ne pas avoir de dénominateur comme img/nombre.jpg responsable de la duplication.

Y'a un autre truc qui me chiffonne, c'est justement à propos des lightbox. Elles restent constament en tête de page. Du coup, si on veut ouvrir une image en bas de page, en cliquant dessus on ne la voit pas s'ouvrir. On est obligé de remonter pour voir la lightbox.

Je sais que tu m'as déjà beaucoup aidé jusque là et merci beaucoup. Peut être pourrais tu m'indiquer pour cette question, une réponse plus vague pour m'obliger à comprendre par moi même :)


Ta spécialité, ce sont les enfants ? En tout cas, tu as l'air d'être très apprécié :)
Je comprends pourquoi :)
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
655
pour la lightbox fixée
tu peux mettre
position:fixed; dans le style .box1
par contre le problème sur les petit ecrans (exemple ordinateur portable sur lequel je suis en ce moment) impossible de tout voir et surtout de fermer la lightbox.
donc un script qui recupère la largeur d'écran et adapte la largeur de lightbox par rapport a ca est nécessaire
d'autre part il n'est pas possible de cliquer sur d'autres images pour un effet lightbox donc oublie ca
pour le reste il faudrait que je sache ou est le css et le script de l'effet (animation gallerie) car pour l'instant je n'ai pas vu ou il était.
Enfin
Je ne suis pas chez moi en ce moment donc je n'ai pas les outils qu'il faut
lundi ou mardi je retourne


Messages postés
323
Date d'inscription
jeudi 29 janvier 2009
Statut
Membre
Dernière intervention
15 novembre 2020
3
Salut :)

Oui il y a 3 fichiers css séparés pour la galerie.
Le plugin était vendu comme ça.

Je dois aussi m'absenter durant 1 semaine alors je ne pourrai pas non plus te répondre avant un moment.

Je vais revenir sur un fichier propre et recommencerai plus tard pour la lightbox.

Pour les css, si cela est possible je te les enverrai ou copierai le code :)
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
655
voila

après la ligne 43 tu rajoute ca

    <style>
.backdrop
{
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background:#000;
opacity: 0.8;
z-index:99997;
}

.box1 {
position:fixed;
width:100%;
height:100%;
text-align:center;
line-height: 100%;
}
.box
{
position:relative;
display:inline-block;
vertical-align:middle;
margin:0 auto;
background:transparent;
z-index:99999;
padding:10px;
height:80%;
width:80%;
z-index:99998;
}
.box img {
height:100%;
padding:10px;
background:#89c2d3;
border-radius: 5px;
margin:0;
}

.close p
{
cursor:pointer;
text-align:center;
margin:10px 0 0 0;
}
.close p span {
background:#89c2d3;
font-size:16px;
font-weight:bold;
border-radius: 5px 5px 0 0;
padding:5px;
margin:0;
color:#6f6666;
}


</style>

<script type="text/javascript">
$(document).ready(function(){

$('figure.effect-sarah2, figure.effect-sarah').live("click",function(){
var imagesrc = $("img",this).attr("src");
var image1 = '<div class=\"backdrop\"></div><div class=\"box1\"><div class=\"box\"><div class=\"close\"><p><span>Fermer</span></p></div><img src=\"'+imagesrc+'\"></div></div>';
$("body").prepend(image1);
$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
$('.box').animate({'opacity':'1.00'}, 300, 'linear');
});

$(".close p").live("click", function(){
$(".backdrop, .box, .box1").remove();
});
})

</script>
</head>
<body>


et evidemment retirer les liens vers les images dans les caption
Salut animostab :)

Merci bcp pour ton aide, ça marche. Faut que je mette tout à jour maintenant :)

Bon le cadre est pas très beau, le "fermer" non plus lol et y'a pas d'arrière plan assombri mais c'est déjà un excellent début !
J'vais reprendre là où ça en était :)

Sachant qu'entre temps, j'ai changé un peu le site...
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
655
Ok dans .box1 rajoute apres la ligne 69
z-index:99999;
et ca marchera sur chrome (et safari qui à le meme moteur de rendu que chrome --> webkit)
IE OK
firefox OK

tu as encore
un </body></html> ligne 423 et 424 qui n'ont rien a faire la
un </head><body> ligne 437 et 438 qui n'ont rien a faire la
Messages postés
323
Date d'inscription
jeudi 29 janvier 2009
Statut
Membre
Dernière intervention
15 novembre 2020
3
Non mais mec !
T'es un tueur pro ! :)

Mais que veux dire "z-index" ?
Je croyais que cette ligne ajoutait un ref colorimétrique mais sans le "#"...
Bon... On se moque pas :)

Faut que je fasse les tests sur IE Mais Safari marche, Chrome et Opéra aussi :)
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
655
z-index : ordre de superposition des div, quand elles sont l'une au dessus de l'autre plus la valeur est grande plus c'est au dessus (un peu comme les calques dans photoshop)
On dirait bien que le moteur webkit ne prend pas l'héritage de z-index pour un div enfant quand son parent est en position absolute alors que moz le prend (j'aurais appris un truc)
sinon sous IE ca marche aussi
Messages postés
323
Date d'inscription
jeudi 29 janvier 2009
Statut
Membre
Dernière intervention
15 novembre 2020
3
D'accord j'ai pigé :)

Oui, ça marche avec IE. Du moins les anciennes version.
J'ai demandé dans mon entourage de tester sur les derniers IE fonctionnels sur windows 8 car je n'ai que vista...

En tout cas, bravo à toi :)

Cette fois on peut dire que c'est résolu :)
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
655
sur windows 8 IE (10 et edge) ---> OK
Et bien @+