Sujet Précédent Sujet Suivant

Zoomer image dans meme fenetre avec effet transparence arriere

Résolu/Fermé
manchelo Messages postés 323 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 janvier 2023 - 14 juil. 2015 à 00:11
thevectorcode Messages postés 1 Date d'inscription lundi 9 octobre 2023 Statut Membre Dernière intervention 10 octobre 2023 - 10 oct. 2023 à 12:15
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 :)


A voir également:

5 réponses

Réponse 1 / 5
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
14 juil. 2015 à 00:27
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
manchelo Messages postés 323 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 janvier 2023 5
14 juil. 2015 à 00:47
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... :)
0
thevectorcode Messages postés 1 Date d'inscription lundi 9 octobre 2023 Statut Membre Dernière intervention 10 octobre 2023
10 oct. 2023 à 12:15

This is awesome and very useful information! Thanks for always sharing you ideas they are greatly appreciated feel free to reach us out for your  professional logo design services in UK related query.

0
Réponse 2 / 5
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
14 juil. 2015 à 00:54
oui il y a des lightbox pour tout contenu et pas uniquement des images
0
manchelo Messages postés 323 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 janvier 2023 5
Modifié par manchelo le 14/07/2015 à 09:46
Bonjour,

alors voilà, je bidouille ma page html et ai pu obtenir quelque chose de presque potable.
En fait, quand je clique sur une image, la fenêtre lightbox s'active, mais en moins d'1sec, l'image se charge dans une nouvelle fenêtre.
Je n'arrive pas à voir d'où cela peut provenir ?

Voici le bout de code sur lequel je travaille :
<html>
<head>
<title>Quick Simple Light Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style type="text/css">

body
{
font-family: Helvetica, Arial;
}

.backdrop
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:#000;
opacity: .0;
filter:alpha(opacity=0);
z-index:50;
display:none;
}


.box
{
position:absolute;
top:20%;
left:30%;
width:1280px;
height:720px;
background:#ffffff;
z-index:51;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 5px #444444;
-webkit-box-shadow:0px 0px 5px #444444;
box-shadow:0px 0px 5px #444444;
display:none;
}

.close
{
float:right;
margin-right:6px;
cursor:pointer;
}

</style>

<script type="text/javascript">

$(document).ready(function(){

$('.lightbox').click(function(){
$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
$('.box').animate({'opacity':'1.00'}, 300, 'linear');
$('.backdrop, .box').css('display', 'block');
});

$('.close').click(function(){
close_box();
});

$('.backdrop').click(function(){
close_box();
});

});

function close_box()
{
$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
$('.backdrop, .box').css('display', 'none');
});
}

</script>

</head>
<body>
<a href="#" class="lightbox">#</a>


<div class="backdrop"></div>
<div class="box"><div class="close">x</div>#</div>

</body>
</html>


<!-- ********* CUSTOM PAGE HEAD CODE (start) *******-->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,800,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<div class="grid">
<figure class="effect-sarah">
<img src="img/41.jpg" alt="img41"/>
<figcaption>
<h2>TITRE <span>Titre2</span></h2>
<p>Descriptif.</p>

<body>
<a href="img/41.jpg" class="lightbox">img/41.jpg</a>

<div class="backdrop"></div>
<div class="box"><div class="close">x</div>Descriptif.</div>

</body>
</figcaption>
</figure>


Merci d'avance pour votre aide :)
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
14 juil. 2015 à 15:18
Salut
c'est normal car tu as mis un <a href a ton image donc ca suit naturellement le lien ...
<a href="img/41.jpg" class="lightbox">img/41.jpg</a>
De plus ton code est incompréhensible car il y a plusieurs <body></body> et de mauvaises imbrications de tag
ex
</body>
</figcaption>
</figure>
0
manchelo Messages postés 323 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 janvier 2023 5
15 juil. 2015 à 12:14
Merci pour ton com :)

Mais si je ne dois pas mettre de balise <a href, il faut mettre quoi à la place ? Parce que là je sèche ?

Il ne doit y avoir qu'un seul body en tête et bas de page ?
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 15/07/2015 à 13:05
juste
<img class="lightbox" src="img/41.jpg" alt="description de l'image">
pour body oui un seul
0
manchelo Messages postés 323 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 janvier 2023 5
15 juil. 2015 à 13:41
Je vois vraiment pas quel body enlever ?
mes images sont dupliqué l'une par dessus l'autre et on ne peut pas les ouvrir dans une lightbox.
Est ce qu'il faut un fichier css avec ou un js ?
ça me dépasse complètement du coup je te met le html entier :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--page generated by WebAcappella-->
<!-- 2015-07-13T23:54:47 ****-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7;IE=EmulateIE9" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="generator" content="WebAcappella 4.6.12 professional (OSX) #510a"/>
<title>Guillaume Estrade, graphiste, freelance, independant, designer, illustrateur, paris, 75</title>
<meta name="keywords" content="Brochure, carte de visite, charte graphique, faire-part, logo, affiche, album, packaging, enseigne, image"/>
<meta name="description" content="illustration, signaletique, print, illustrator, photoshop, indesign"/>

<style type="text/css">
body{margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;background-image:url('bandeau.jpg');background-repeat: repeat-x;background-color:#999999;}
</style>
<link rel="stylesheet" type="text/css" href="wa_global_style.css"/>
<script type="text/javascript" src="jquery.js?v=86c"></script>
<script type="text/javascript">
var waJSQuery = jQuery.noConflict();
</script>
<script type="text/javascript" src="webacappella_core.js?v=1ups"></script>
<!--[if lte IE 8]><script type="text/javascript" src="excanvas.js?v=1f2a"></script>
<![endif]-->
<!--[if lte IE 8]><script type="text/javascript" src="webacappella_patch_ie8.js?v=tc5"></script>
<![endif]-->
<script type="text/javascript">
document.write("\u003cscript type='text/javascript' src='wa_site_global_settings.js?v=1hqqkk206clo1y"+urlSuffixe(0)+"'>\u003c/script>");
</script>
<script type="text/javascript" src="jquery.mousewheel.js?v=use"></script>
<link href="webacappella.css?v=10nl" rel="stylesheet" type="text/css" media="all"/>
<!--[if lte IE 7]>
<link href="webacappella_ie.css?v=1tjn" rel="stylesheet" type="text/css" media="all"/>
<![endif]-->
<script type="text/javascript" src="webacappella_tools.js?v=blf"></script>

<html>
<head>
<title>Quick Simple Light Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style type="text/css">

body
{
font-family: Helvetica, Arial;
}

.backdrop
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:#000;
opacity: .0;
filter:alpha(opacity=0);
z-index:50;
display:none;
}


.box
{
position:absolute;
top:20%;
left:30%;
width:1280px;
height:720px;
background:#ffffff;
z-index:51;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 5px #444444;
-webkit-box-shadow:0px 0px 5px #444444;
box-shadow:0px 0px 5px #444444;
display:none;
}

.close
{
float:right;
margin-right:6px;
cursor:pointer;
}

</style>

<script type="text/javascript">

$(document).ready(function(){

$('.lightbox').click(function(){
$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
$('.box').animate({'opacity':'1.00'}, 300, 'linear');
$('.backdrop, .box').css('display', 'block');
});

$('.close').click(function(){
close_box();
});

$('.backdrop').click(function(){
close_box();
});

});

function close_box()
{
$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
$('.backdrop, .box').css('display', 'none');
});
}

</script>

</head>
<body>
<img class="lightbox" src="#" alt="#">


<div class="backdrop"></div>
<div class="box"><div class="close">x</div>#</div>

</body>
</html>


<!-- ********* CUSTOM PAGE HEAD CODE (start) *******-->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,800,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<div class="grid">
<figure class="effect-sarah2">
<img src="img/41.jpg" alt="img41"/>
<figcaption>
<h2>TITRE <span>Titre2</span></h2>
<p>Descriptif.</p>
<img class="lightbox" src="img/41.jpg" alt="Descriptif.">
</figcaption>
</figure>
<figure class="effect-sarah2">
<img src="img/42.jpg" alt="img42"/>
<figcaption>
<h2>TITRE <span>Titre2</span></h2>
<p>Descriptif.</p>
<img class="lightbox" src="img/42.jpg" alt="Descriptif.">
</figcaption>
</figure>
<figure class="effect-sarah">
<img src="img/43.jpg" alt="img43"/>
<figcaption>
<h2>TITRE <span>Titre2</span></h2>
<p>Descriptif.</p>
<img class="lightbox" src="img/43.jpg" alt="Descriptif.">
</figcaption>
</figure>
</div>

<script>
// For Demo purposes only
[].slice.call( document.querySelectorAll('a[href="#"') ).forEach( function(el) {
el.addEventListener( 'click', function(ev) { ev.preventDefault(); } );
} );
</script>
</body>
</html>
<!-- ********* CUSTOM PAGE HEAD CODE (end) *******-->

<script type="text/javascript">
waJSQuery(function() {
initializeWA_JQuery()
});
</script>
<script type="text/javascript">
var waWebFontDescription={families:[
]}
</script>

</head>
<body><div id='wa-dialog-container' class='wa-fullscreen-contenair' style='position:absolute;z-index:52000;'></div><div id='html-centered' style='position:relative;width:100%;z-index:200;'><div id='is-global-layer' class='wa-main-page-contenair' style='position:relative;z-index:200;top:0px;width:1371px;;text-align:left;margin:0 auto; '><div style="position:absolute;top:1px;left:0px;width:1px;height:1px;"><a name="anchor-top"> </a></div>
<a href="signaletique.html" onclick="return waOnClick('signaletique.html',{})" style="cursor:pointer;" ><img src="bt_signaletique1.png?v=1tr9fwk1utfx6v" alt="" class="wa-img wa-comp param[over(bt_signaletique2.png?v=1tr9ick1utfx6v)]" style="position:absolute;z-index:10040;left:749px;top:80px;width:110px;height:40px;border:0px;"/></a><a href="print.html" onclick="return waOnClick('print.html',{})" style="cursor:pointer;" ><img src="bt_print1.png?v=1h3a8c5kik6dtaw" alt="" class="wa-img wa-comp param[over(bt_print2.png?v=1h3aas5kik6dtaw)]" style="position:absolute;z-index:10036;left:629px;top:80px;width:110px;height:40px;border:0px;"/></a><a href="a_propos.html" onclick="return waOnClick('a_propos.html',{})" style="cursor:pointer;" ><img src="bt_apropos1.png?v=1r664s5kik5h032" alt="" class="wa-img wa-comp param[over(bt_apropos2.png?v=1r66785kik5h032)]" style="position:absolute;z-index:10028;left:509px;top:29px;width:110px;height:40px;border:0px;"/></a><a href="contact.html" onclick="return waOnClick('contact.html',{})" style="cursor:pointer;" ><img src="bt_contact1.png?v=1twm8c5kik5f9ll" alt="" class="wa-img wa-comp param[over(bt_contact2.png?v=1twmas5kik5f9ll)]" style="position:absolute;z-index:10024;left:869px;top:29px;width:110px;height:40px;border:0px;"/></a><a href="realisations.html" onclick="return waOnClick('realisations.html',{})" style="cursor:pointer;" ><img src="bt_realisations1.png?v=1wqljg5kik5eqmw" alt="" class="wa-img wa-comp param[over(bt_realisations2.png?v=1wqllw5kik5jzxq)]" style="position:absolute;z-index:10020;left:749px;top:29px;width:110px;height:40px;border:0px;"/></a><a href="services.html" onclick="return waOnClick('services.html',{})" style="cursor:pointer;" ><img src="bt_services1.png?v=1pwnt85kik5d56y" alt="" class="wa-img wa-comp param[over(bt_services2.png?v=1pwnvo5kik5d56y)]" style="position:absolute;z-index:10016;left:629px;top:29px;width:110px;height:40px;border:0px;"/></a><a href="index.html" onclick="return waOnClick('index.html',{})" style="cursor:pointer;" ><img src="bt_accueil1.png?v=1gvn9o5kik590vd" alt="" class="wa-img wa-comp param[over(bt_accueil2.png?v=1gvnc45kik590vd)]" style="position:absolute;z-index:10012;left:389px;top:29px;width:110px;height:40px;border:0px;"/></a><div onclick="return waOnClick('https://www.facebook.com/louisetmargot?fref=ts',{'targ':'_blank'})" class="wa-button-link wa-comp param[bord(rgba(40,40,40,0)) inner_bord(rgba(73,73,73,0)) bg(rgba(61,61,61,0) rgba(61,61,61,0)) u(0) bg_img(facebook2.png?v=1lttvkk1ppz6v2) img() ]" style="position:absolute;z-index:10008;left:1180px;top:10px;width:50px;height:50px;;cursor:pointer;cursor:hand;text-decoration:none;"><div class="waButInner" style="position:absolute;left:1px;top:1px;padding:0px;margin:0px;width:46px;height:46px;border:1px solid rgba(110,110,110,0);-moz-border-radius:7px;border-radius:7px;-webkit-border-radius:7px;" ></div>
<button class="wa-button param[grad(rgba(92,92,92,0)) border(rgba(61,61,61,0)) inborder(rgba(110,110,110,0)) ]" style="overflow: hidden; position:static;margin:0px;padding:0px;width:50px;height:50px;-moz-border-radius:7px;border-radius:7px;-webkit-border-radius:7px;border:0px;text-align:center;background-image:url('facebook.png?v=1lttlk5kh53962o');background-size:50px 50px;cursor:pointer;font-weight:normal;font-size:12px;color:#ffffff;font-family:'Arial';" >
</button>
</div><div style="position:absolute;z-index:10004;left:90px;top:40px;width:240px;height:20px;border:0px;background:rgba(0,0,0,0);overflow:hidden;" class="wa-comp wa-text wa-bg-gradient param[grad(rgba(0,0,0,0)) border(0 #969696)] " ><div style="position:absolute;z-index:10;line-height:1.2;margin:2px;top:0px;left:0px;width:238px;height:18px;word-wrap:break-word;overflow-y:auto;overflow-x:hidden;" ><div align="left"><span style="font-family:'Arial';font-size:14px;font-weight:bold;color:#ffffff;" >ILLUSTRATION...</span></div></div></div><img src="fond-illustration.png?v=1ts2ock1uteh08" alt="" class="wa-img wa-comp " style="position:absolute;z-index:10000;left:27px;top:17px;width:1318px;height:104px;border:0px;"/><div style="position:absolute;top:180px;left:0px;width:1px;height:1px;" ><a name="anchor-bottom"> </a></div>
<div id='dynmenu-container' style='position:absolute;z-index:51000;'></div></div>
</div> <!--end html-centered-->
<script type="text/javascript">
<!--
document.webaca_page_option_background=0
document.webaca_page_background_img_size=[100,140]
document.webaca_page_is_centered=true;
document.webaca_width_page=1371;
document.webaca_height_page=200;
document.webaca_banner_height=0;
document.webaca_is_preview=true;
var wa_global_market = {markets:new Array(),id_modif_dlg_js:''};
Translator.m_lang="fr";
Translator.m_languages={}
Translator.m_lang_for_filename="";
function wa_timeout(_fct,_time,p1,p2,p3){return setTimeout(_fct,_time,p1,p2,p3)}
function wa_evaluate(_s){return eval(_s)}
function IS_onload(){
IS_onload_WA();
}
-->
</script>
<script type="text/javascript" src='wa_common_messages_fr.js?v='></script>
<script type="text/javascript">
<!--
WA_loadMessages();
-->
</script>
<script type="text/javascript">
<!--
-->
</script>
</body>
</html>
0
Réponse 3 / 5
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 16/07/2015 à 14:27
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.
0
manchelo Messages postés 323 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 janvier 2023 5
16 juil. 2015 à 17:04
Salut :)

Merci pour toutes tes indications.
183 c'est vraiment énorme en effet.
Je vais me tourner vers un cms dans ce cas. Peut être wordpress ou ez publish, vu qu'ils sont bien notés.
C'est vrai que webacappella me frustre car trop limité.

En attendant, le mieux c'est de retaper un code propre apparemment...
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 16/07/2015 à 18:29
sinon comme je suis gentil voila un code pour ta lightbox
a remplacer par ce que tu as mis

css (ligne 47 à 86) dans la balise <style> 
.backdrop
  {
   position:absolute;
   top:0px;
   left:0px;
   width:100%;
   height:100%;
   background:#000;
   opacity: .0;
   filter:alpha(opacity=0);
   z-index:50;
  }

.box1 {
    position:absolute;
    width:100%;
    height:100%;
    text-align:center;
}
  .box
  {
   position:relative;
            display:inline-block;
            vertical-align:middle;
   margin:0 auto;
   width:500px;
   height:auto;
   background:#ffffff;
   z-index:51;
   padding:10px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -moz-box-shadow:0px 0px 5px #444444;
   -webkit-box-shadow:0px 0px 5px #444444;
   box-shadow:0px 0px 5px #444444;
  }
    .box img {
        width:100%;
    }

  .close
  {
   cursor:pointer;
  }


jquery (ligne 92 à 115) dans la balise <script> 
$(document).ready(function(){
   
    $('.lightbox').click(function(){
                    var imagesrc = $(this).attr("src");
                    var image1 = '<div class=\"backdrop\"></div><div class=\"box1\"><div class=\"box\"><img src=\"'+imagesrc+'\"><div class=\"close\"><p>fermer</p></div></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();
    });    
   })


pour les erreurs c'est du principalement aux head body etc en trop et à une mauvaise déclaration de doctype (pas du html 5)
0
manchelo Messages postés 323 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 janvier 2023 5
16 juil. 2015 à 18:49
Merci bcp pour ton assistance :)
C'est très aimable de ta part

Après j'ai corrigé les head et body en trop, puis j'ai replacé le code que tu m'as transmis.
Il n'y a que le doctype qui n'est pas en html 5 car j'imagine que la structure grammaticale n'est plus la même entre le 1.0 et le 5 ?
Malheureusement, les "corrections" :) ont bloqué l'animation de la page et donc la légende ne s'active plus.

Je vais continuer de trifouiller le code mais si vraiment je n'y arrive pas malgré toute ton implication et tes conseils, je reviendrai à du blank monotone :)

En tout cas merci d'avoir déjà pris autant de temps pour moi, ça fait plais ! :)
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 16/07/2015 à 20:12
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
0
manchelo Messages postés 323 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 janvier 2023 5
17 juil. 2015 à 09:58
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
0
Réponse 4 / 5
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
18 juil. 2015 à 16:09
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


0
manchelo Messages postés 323 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 janvier 2023 5
18 juil. 2015 à 17:46
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 :)
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 20/07/2015 à 16:47
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
manchelo
31 juil. 2015 à 15:06
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...
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
31 juil. 2015 à 15:43
re salut
on dirait que tu as 2 fois </head> <body>
ligne 125 et ligne 138
ne garde que le 138
en test (une page faite avec 2 img + effets sarah) l'arrière plan assombri marche je pense que ca vient des 2 body
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
31 juil. 2015 à 16:36
j'ai trouvé pourquoi pas d' arrière plan grrrrr
ligne 48 

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


enlève <style> car c'est déja dans une balise style et donc les règles .backdrop ne s'éxecutent plus
après tu peux mettre le sujet en résolu
et ouf !!!
0
manchelo Messages postés 323 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 janvier 2023 5
31 juil. 2015 à 17:05
:)
Tu m'as bien fait rire mais je te remercie pour ta patience :)
ça fonctionne bien grâce à toi.

Je vais regarder s'il existe d'autres lightbox qui me plaisent d'avantage pour remplacer celle actuelle.

Je mets comme résolu :)
Merci encore animostab :)
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
31 juil. 2015 à 17:13
pour modifier tu joue sur
background et padding et border-radius de .box img
et sur
padding color background et border-radius etc ... de .close p span
bon, c'est pas pour critiquer mais vu ton niveau ca m'etonnerais que tu arrive a mettre en place un plugin jquery de lightbox
0
manchelo
3 août 2015 à 21:06
Salut :)

Bon alors le site est à jour mais manque de bol, ça marche qu'avec mozilla.

J'ai testé avec internet explorer, safari... Les lightbox marchent pas.
Faut encore que je teste chrome mais de toute façon si y'a déjà 2 explorers qui fonctionnent pas, ça va pas le faire...
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Mettre une image à l'arrière plan et la rendre transparente
Sss97 -
Sss97 -

2 réponses