Comment fermer une lightbox avec une croix

flexi2202 -  
 flexi2202 -
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>

<!-- We only want the thunbnails to display when javascript is disabled -->
<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>

<!-- Start Advanced Gallery Html Containers -->
<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



5 réponses

Réponse 1 / 5
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
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 ?
1
Réponse 2 / 5
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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
0
Réponse 3 / 5
flexi2202
 
bonjour
petit up
0
Réponse 4 / 5
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
Hello,

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

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

Posez votre question
Réponse 5 / 5
flexi2202
 
bonjour
ah ok ,merci pour aide , c est gentil a ce soir alors
0

Discussions similaires

A quoi correspond cette croix sur snapchat
Sbnet -
Doucesensible -

8 réponses
que signifie les petits rectangles blancs à la fin de mes sms ?
krystina1207 -
Arman -

6 réponses
comment savoir qu'une personne nous a supprimé Snapchat
ano -
HAD -

8 réponses
Snap - croix grise
Thenou35210 -
Radinoz -

1 réponse
Savoir si je suis bloqué par une personne sur snap chat
Jkl33 -
Vii -

10 réponses