Comment fermer une lightbox avec une croix

Fermé

flexi2202 - 12 mai 2013 à 11:59
flexi2202 - 13 mai 2013 à 12:43

bonjour a tous
voila j ai enfin pu integre jquery.galleriffic.js
la gallerie focntionne a merveille sur mon site
seul petit bemol lorsque je clique sur Download Original, quii sert a rendre l image original plein ecran , il n y a
pas de croix a l interieur pour la fermer
je solicite donc votre aide pou m expliquer comment ajuter cette croix pour fermer et en mem temps mettre un bouton
suivante et precedente
lerci de votre aide
voici mon code html
et j ai utiliser jquery 1,9
et bien sur jquery.galleriffic.js

<html>
<head>
<title>Test Arty</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<script type="text/javascript" src="http:"></script>
<script type="text/javascript" src="http:"></script>
<script type="text/javascript" src="http://la-peche"></script>


<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>

<style>
html, body {
margin:0;
padding:0;
}
body{
text-align: center;
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
background-color: #eee;
color: #444;
font-size: 75%;
}
a{
color: #27D;
text-decoration: none;
}
a:focus, a:hover, a:active {
text-decoration: underline;
}
p, li {
line-height: 1.8em;
}
h1, h2 {
font-family: "Trebuchet MS", Verdana, sans-serif;
margin: 0 0 10px 0;
letter-spacing:-1px;
}
h1 {
padding: 0;
font-size: 3em;
color: #333;
}
h2 {
padding-top: 10px;
font-size:2em;
}
pre {
font-size: 1.2em;
line-height: 1.2em;
overflow-x: auto;
}
div#page {
width: 900px;
background-color: #fff;
margin: 0 auto;
text-align: left;
border-color: #ddd;
border-style: none solid solid;
border-width: medium 1px 1px;
}
div#container {
padding: 20px;
}
div#ads {
clear: both;
padding: 12px 0 12px 66px;
}
div#footer {
clear: both;
color: #777;
margin: 0 auto;
padding: 20px 0 40px;
text-align: center;
}
div.content {
/* The display of content is enabled using jQuery so that the slideshow content won't display unless

javascript is enabled. */
display: none;
float: right;
width: 550px;
}
div.content a, div.navigation a {
text-decoration: none;
color: #777;
}
div.content a:focus, div.content a:hover, div.content a:active {
text-decoration: underline;
}
div.controls {
margin-top: 5px;
height: 23px;
}
div.controls a {
padding: 5px;
}
div.ss-controls {
float: left;
}
div.nav-controls {
float: right;
}
div.slideshow-container {
position: relative;
clear: both;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
position: absolute;
top: 0;
left: 0;
background-image: url('loader.gif');
background-repeat: no-repeat;
background-position: center;
width: 550px;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {

}
div.slideshow span.image-wrapper {
display: block;
position: absolute;
top: 0;
left: 0;
}
div.slideshow a.advance-link {
display: block;
width: 550px;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
text-align: center;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
text-decoration: none;
}
div.slideshow img {
vertical-align: middle;
border: 1px solid #ccc;
}
div.download {
float: right;
}
div.caption-container {
position: relative;
clear: left;
height: 75px;
}
span.image-caption {
display: block;
position: absolute;
width: 550px;
top: 0;
left: 0;
}
div.caption {
padding: 12px;
}
div.image-title {
font-weight: bold;
font-size: 1.4em;
}
div.image-desc {
line-height: 1.3em;
padding-top: 12px;
}
div.navigation {
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless

javascript is enabled. */
}
ul.thumbs {
clear: both;
margin: 0;
padding: 0;
}
ul.thumbs li {
float: left;
padding: 0;
margin: 5px 10px 5px 0;
list-style: none;
}
a.thumb {
padding: 2px;
display: block;
border: 1px solid #ccc;
}
ul.thumbs li.selected a.thumb {
background: #000;
}
a.thumb:focus {
outline: none;
}
ul.thumbs img {
border: none;
display: block;
}
div.pagination {
clear: both;
}
div.navigation div.top {
margin-bottom: 12px;
height: 11px;
}
div.navigation div.bottom {
margin-top: 12px;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
display: block;
float: left;
margin-right: 2px;
padding: 4px 7px 2px 7px;
border: 1px solid #ccc;
}
div.pagination a:hover {
background-color: #eee;
text-decoration: none;
}
div.pagination span.current {
font-weight: bold;
background-color: #000;
border-color: #000;
color: #fff;
}
div.pagination span.ellipsis {
border: none;
padding: 5px 0 3px 2px;
}

</style>
</head>
<body>
<div id="page">
<div id="container">
<h1><a href="index.html">Arty pour comment ça marche</a></h1>
<h2>Galerie simplissime</h2>


<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container"></div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
<a class="thumb" name="leaf"

href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title

#0" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #0</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" name="drop"

href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1">
<img src="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9_s.jpg" alt="Title

#1" />
</a>
<div class="caption">
Any html can be placed here ...
</div>
</li>

<li>
<a class="thumb" name="bigleaf"

href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title

#2" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2093/2538168854_f75e408156_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #2</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" name="lizard"

href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">
<img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title

#3" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #3</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg"

title="Title #4">
<img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title

#4" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #4</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg"

title="Title #5">
<img src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg" alt="Title

#5" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #5</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg"

title="Title #6">
<img src="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_s.jpg" alt="Title

#6" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #6</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg"

title="Title #7">
<img src="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23_s.jpg" alt="Title

#7" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm4.static.flickr.com/3205/2538164270_c7d1646ecf_o.jpg">Download

Original</a>
</div>
<div class="image-title">Title #7</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg"

title="Title #8">
<img src="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_s.jpg" alt="Title

#8" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #8</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg"

title="Title #9">
<img src="http://farm3.static.flickr.com/2315/2537343449_f933be8036_s.jpg" alt="Title

#9" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2315/2537343449_f933be8036_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #9</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg"

title="Title #10">
<img src="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_s.jpg" alt="Title

#10" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #10</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg"

title="Title #11">
<img src="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_s.jpg" alt="Title

#11" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #11</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg"

title="Title #12">
<img src="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_s.jpg" alt="Title

#12" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #12</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg"

title="Title #13">
<img src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg" alt="Title

#13" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #13</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg"

title="Title #14">
<img src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg" alt="Title

#14" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2041/2083498578_114e117aab_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #14</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663.jpg"

title="Title #15">
<img src="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_s.jpg" alt="Title

#15" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #15</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="http://farm3.static.flickr.com/2014/2083478274_26775114dc.jpg"

title="Title #16">
<img src="http://farm3.static.flickr.com/2014/2083478274_26775114dc_s.jpg" alt="Title

#16" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2014/2083478274_26775114dc_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #16</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="http://farm3.static.flickr.com/2194/2083464534_122e849241.jpg"

title="Title #17">
<img src="http://farm3.static.flickr.com/2194/2083464534_122e849241_s.jpg" alt="Title

#17" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2194/2083464534_122e849241_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #17</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e.jpg"

title="Title #18">
<img src="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_s.jpg" alt="Title

#18" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #18</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="http://farm3.static.flickr.com/2375/2538172432_3343a47341.jpg"

title="Title #19">
<img src="http://farm3.static.flickr.com/2375/2538172432_3343a47341_s.jpg" alt="Title

#19" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2375/2538172432_3343a47341_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #19</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f.jpg"

title="Title #20">
<img src="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_s.jpg" alt="Title

#20" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #20</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34.jpg"

title="Title #21">
<img src="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_s.jpg" alt="Title

#21" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #21</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a.jpg"

title="Title #22">
<img src="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_s.jpg" alt="Title

#22" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #22</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6.jpg"

title="Title #23">
<img src="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_s.jpg" alt="Title

#23" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_b.jpg">Download

Original</a>
</div>
<div class="image-title">Title #23</div>
<div class="image-desc">Description</div>
</div>
</li>
</ul>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div id="footer">© 2009 Trent Foley</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');

// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});

// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '< Previous Photo',
nextLinkText: 'Next Photo >',
nextPageLinkText: 'Next >',
prevPageLinkText: '< Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>
</body>
</html>

un tres grand lerci pour l aide

A voir également:

Comment fermer une lightbox avec une croix
Croix sur snap - Forum Snapchat
Croix chrétienne emoji ✓ - Forum Clavier
Comment fermer un compte facebook - Guide
Signification rectangle avec croix dedans - Forum Nokia
Fermer compte paypal - Guide

5 réponses

Réponse 1 / 5

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
12 mai 2013 à 12:27

Hello,

Le lien download original ouvre l'image originale, l'utilisateur quitte donc ta galerie. Le seul moyen d'y revenir est d'utiliser le bouton précédent de ton navigateur, puisqu'il est là pour ça.

Ce que tu pourrais faire c'est coupler ta galerie avec une lightbox afin de pouvoir afficher ton image en grande taille sans pour autant quitter la galerie.

Cette solution te conviendrait-elle ?

Réponse 2 / 5

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
12 mai 2013 à 12:31

avant toute chose un grand merci
oui bien sur cette solution me conviens tant que ma gallerie de base ne bouge , mais si l image qui est appellee par download original s ouvre dans une lightbox cela serait génial

Réponse 3 / 5

flexi2202
13 mai 2013 à 12:27

bonjour
petit up

Réponse 4 / 5

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
13 mai 2013 à 12:39

Hello,

scuse pour mon absence, je m'occupe de toi ce soir

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

Posez votre question

Réponse 5 / 5

flexi2202
13 mai 2013 à 12:43

bonjour
ah ok ,merci pour aide , c est gentil a ce soir alors

Discussions similaires

A quoi correspond cette croix sur snapchat

Savoir si je suis bloqué par une personne sur snap chat

smyley rectangulaire

Comment faire le signe de croix (chrétiens) ?

comment savoir qu'une personne nous a supprimé Snapchat

Discussions similaires

Newsletters