Vous n'êtes pas identifié.

Annonce

#1 comment ajouter une croix pour fermer sur ma gallerie du 12-05-2013 21:45:00

flexi2202
c00lnaute nouveau
Date d'inscription: 12-05-2013
Messages: 1

comment ajouter une croix pour fermer sur ma gallerie

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

Code:

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

j ai une piste on me dis que cela est possible en le couplant a une lihtbox mais comment faire

un tres grand merci pour l aide


Hors ligne

 

12-05-2013 21:45:00

Mister $$$


Propulsé par PunBB
© Copyright 2007
Forum créer un site

Partenaires de « créer un site internet »