comment ajouter la croix pour fermer lightbox

comment ajouter la croix pour fermer lightbox - HTML/CSS - Programmation

Marsh Posté le 11-05-2013 à 21:06:08    


 
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 :
  1. <html>
  2.        <head>
  3.           <title>Test Arty</title>
  4.                   <meta content="text/html; charset=utf-8" http-equiv="content-type">
  5.                     <script type="text/javascript" src="http:"></script>
  6.           <script type="text/javascript" src="http:"></script>
  7.           <script type="text/javascript" src="http://la-peche"></script>
  8.          
  9.           <!-- We only want the thunbnails to display when javascript is disabled -->
  10.           <script type="text/javascript">
  11.              document.write('<style>.noscript { display: none; }</style>');
  12.           </script>
  14.                     <style>
  15.     html, body {
  16.        margin:0;
  17.        padding:0;
  18.     }
  19.     body{
  20.        text-align: center;
  21.        font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
  22.        background-color: #eee;
  23.        color: #444;
  24.        font-size: 75%;
  25.     }
  26.     a{
  27.        color: #27D;
  28.        text-decoration: none;
  29.     }
  30.     a:focus, a:hover, a:active {
  31.        text-decoration: underline;
  32.     }
  33.     p, li {
  34.        line-height: 1.8em;
  35.     }
  36.     h1, h2 {
  37.        font-family: "Trebuchet MS", Verdana, sans-serif;
  38.        margin: 0 0 10px 0;
  39.        letter-spacing:-1px;
  40.     }
  41.     h1 {
  42.        padding: 0;
  43.        font-size: 3em;
  44.        color: #333;
  45.     }
  46.     h2 {
  47.        padding-top: 10px;
  48.        font-size:2em;
  49.     }
  50.     pre {
  51.        font-size: 1.2em;
  52.        line-height: 1.2em;
  53.        overflow-x: auto;
  54.     }
  55.     div#page {
  56.        width: 900px;
  57.        background-color: #fff;
  58.        margin: 0 auto;
  59.        text-align: left;
  60.        border-color: #ddd;
  61.        border-style: none solid solid;
  62.        border-width: medium 1px 1px;
  63.     }
  64.     div#container {
  65.        padding: 20px;
  66.     }
  67.     div#ads {
  68.        clear: both;
  69.        padding: 12px 0 12px 66px;
  70.     }
  71.     div#footer {
  72.        clear: both;
  73.        color: #777;
  74.        margin: 0 auto;
  75.        padding: 20px 0 40px;
  76.        text-align: center;
  77.     }
  78.     div.content {
  79.        /* The display of content is enabled using jQuery so that the slideshow content won't display unless  
  81. javascript is enabled. */
  82.        display: none;
  83.        float: right;
  84.        width: 550px;
  85.     }
  86.     div.content a, div.navigation a {
  87.        text-decoration: none;
  88.        color: #777;
  89.     }
  90.     div.content a:focus, div.content a:hover, div.content a:active {
  91.        text-decoration: underline;
  92.     }
  93.     div.controls {
  94.        margin-top: 5px;
  95.        height: 23px;
  96.     }
  97.     div.controls a {
  98.        padding: 5px;
  99.     }
  100.     div.ss-controls {
  101.        float: left;
  102.     }
  103.     div.nav-controls {
  104.        float: right;
  105.     }
  106.     div.slideshow-container {
  107.        position: relative;
  108.        clear: both;
  109.        height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
  110.     }
  111.     div.loader {
  112.        position: absolute;
  113.        top: 0;
  114.        left: 0;
  115.        background-image: url('loader.gif');
  116.        background-repeat: no-repeat;
  117.        background-position: center;
  118.        width: 550px;
  119.        height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
  120.     }
  121.     div.slideshow {
  123.     }
  124.     div.slideshow span.image-wrapper {
  125.        display: block;
  126.        position: absolute;
  127.        top: 0;
  128.        left: 0;
  129.     }
  130.     div.slideshow a.advance-link {
  131.        display: block;
  132.        width: 550px;
  133.        height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
  134.        line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
  135.        text-align: center;
  136.     }
  137.     div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
  138.        text-decoration: none;
  139.     }
  140.     div.slideshow img {
  141.        vertical-align: middle;
  142.        border: 1px solid #ccc;
  143.     }
  144.     div.download {
  145.        float: right;
  146.     }
  147.     div.caption-container {
  148.        position: relative;
  149.        clear: left;
  150.        height: 75px;
  151.     }
  152.     span.image-caption {
  153.        display: block;
  154.        position: absolute;
  155.        width: 550px;
  156.        top: 0;
  157.        left: 0;
  158.     }
  159.     div.caption {
  160.        padding: 12px;
  161.     }
  162.     div.image-title {
  163.        font-weight: bold;
  164.        font-size: 1.4em;
  165.     }
  166.     div.image-desc {
  167.        line-height: 1.3em;
  168.        padding-top: 12px;
  169.     }
  170.     div.navigation {
  171.        /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless  
  173. javascript is enabled. */
  174.     }
  175.     ul.thumbs {
  176.        clear: both;
  177.        margin: 0;
  178.        padding: 0;
  179.     }
  180.     ul.thumbs li {
  181.        float: left;
  182.        padding: 0;
  183.        margin: 5px 10px 5px 0;
  184.        list-style: none;
  185.     }
  186.     a.thumb {
  187.        padding: 2px;
  188.        display: block;
  189.        border: 1px solid #ccc;
  190.     }
  191.     ul.thumbs li.selected a.thumb {
  192.        background: #000;
  193.     }
  194.     a.thumb:focus {
  195.        outline: none;
  196.     }
  197.     ul.thumbs img {
  198.        border: none;
  199.        display: block;
  200.     }
  201.     div.pagination {
  202.        clear: both;
  203.     }
  204.     div.navigation div.top {
  205.        margin-bottom: 12px;
  206.        height: 11px;
  207.     }
  208.     div.navigation div.bottom {
  209.        margin-top: 12px;
  210.     }
  211.     div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
  212.        display: block;
  213.        float: left;
  214.        margin-right: 2px;
  215.        padding: 4px 7px 2px 7px;
  216.        border: 1px solid #ccc;
  217.     }
  218.     div.pagination a:hover {
  219.        background-color: #eee;
  220.        text-decoration: none;
  221.     }
  222.     div.pagination span.current {
  223.        font-weight: bold;
  224.        background-color: #000;
  225.        border-color: #000;
  226.        color: #fff;
  227.     }
  228.     div.pagination span.ellipsis {
  229.        border: none;
  230.        padding: 5px 0 3px 2px;
  231.     }
  233.                     </style>
  234.        </head>
  235.        <body>
  236.           <div id="page">
  237.              <div id="container">
  238.                 <h1><a href="index.html">Arty pour comment ça marche</a></h1>
  239.                 <h2>Galerie simplissime</h2>
  241.                 <!-- Start Advanced Gallery Html Containers -->
  242.                 <div id="gallery" class="content">
  243.                    <div id="controls" class="controls"></div>
  244.                    <div class="slideshow-container">
  245.                       <div id="loading" class="loader"></div>
  246.                       <div id="slideshow" class="slideshow"></div>
  247.                    </div>
  248.                    <div id="caption" class="caption-container"></div>
  249.                 </div>
  250.                 <div id="thumbs" class="navigation">
  251.                    <ul class="thumbs noscript">
  252.                       <li>
  253.                          <a class="thumb" name="leaf"
  255. href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
  256.                             <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title
  258. #0" />
  259.                          </a>
  260.                          <div class="caption">
  261.                             <div class="download">
  262.                                <a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download
  264. Original</a>
  265.                             </div>
  266.                             <div class="image-title">Title #0</div>
  267.                             <div class="image-desc">Description</div>
  268.                          </div>
  269.                       </li>
  271.                       <li>
  272.                          <a class="thumb" name="drop"
  274. href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1">
  275.                             <img src="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9_s.jpg" alt="Title
  277. #1" />
  278.                          </a>
  279.                          <div class="caption">
  280.                             Any html can be placed here ...
  281.                          </div>
  282.                       </li>
  284.                       <li>
  285.                          <a class="thumb" name="bigleaf"
  287. href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
  288.                             <img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title
  290. #2" />
  291.                          </a>
  292.                          <div class="caption">
  293.                             <div class="download">
  294.                                <a href="http://farm3.static.flickr.com/2093/2538168854_f75e408156_b.jpg">Download
  296. Original</a>
  297.                             </div>
  298.                             <div class="image-title">Title #2</div>
  299.                             <div class="image-desc">Description</div>
  300.                          </div>
  301.                       </li>
  303.                       <li>
  304.                          <a class="thumb" name="lizard"
  306. href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">
  307.                             <img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title
  309. #3" />
  310.                          </a>
  311.                          <div class="caption">
  312.                             <div class="download">
  313.                                <a href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_b.jpg">Download
  315. Original</a>
  316.                             </div>
  317.                             <div class="image-title">Title #3</div>
  318.                             <div class="image-desc">Description</div>
  319.                          </div>
  320.                       </li>
  322.                       <li>
  323.                          <a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg"
  325. title="Title #4">
  326.                             <img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title
  328. #4" />
  329.                          </a>
  330.                          <div class="caption">
  331.                             <div class="download">
  332.                                <a href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_b.jpg">Download
  334. Original</a>
  335.                             </div>
  336.                             <div class="image-title">Title #4</div>
  337.                             <div class="image-desc">Description</div>
  338.                          </div>
  339.                       </li>
  341.                       <li>
  342.                          <a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg"
  344. title="Title #5">
  345.                             <img src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg" alt="Title
  347. #5" />
  348.                          </a>
  349.                          <div class="caption">
  350.                             <div class="download">
  351.                                <a href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_b.jpg">Download
  353. Original</a>
  354.                             </div>
  355.                             <div class="image-title">Title #5</div>
  356.                             <div class="image-desc">Description</div>
  357.                          </div>
  358.                       </li>
  360.                       <li>
  361.                          <a class="thumb" href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg"
  363. title="Title #6">
  364.                             <img src="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_s.jpg" alt="Title
  366. #6" />
  367.                          </a>
  368.                          <div class="caption">
  369.                             <div class="download">
  370.                                <a href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_b.jpg">Download
  372. Original</a>
  373.                             </div>
  374.                             <div class="image-title">Title #6</div>
  375.                             <div class="image-desc">Description</div>
  376.                          </div>
  377.                       </li>
  379.                       <li>
  380.                          <a class="thumb" href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg"
  382. title="Title #7">
  383.                             <img src="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23_s.jpg" alt="Title
  385. #7" />
  386.                          </a>
  387.                          <div class="caption">
  388.                             <div class="download">
  389.                                <a href="http://farm4.static.flickr.com/3205/2538164270_c7d1646ecf_o.jpg">Download
  391. Original</a>
  392.                             </div>
  393.                             <div class="image-title">Title #7</div>
  394.                             <div class="image-desc">Description</div>
  395.                          </div>
  396.                       </li>
  398.                       <li>
  399.                          <a class="thumb" href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg"
  401. title="Title #8">
  402.                             <img src="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_s.jpg" alt="Title
  404. #8" />
  405.                          </a>
  406.                          <div class="caption">
  407.                             <div class="download">
  408.                                <a href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_b.jpg">Download
  410. Original</a>
  411.                             </div>
  412.                             <div class="image-title">Title #8</div>
  413.                             <div class="image-desc">Description</div>
  414.                          </div>
  415.                       </li>
  417.                       <li>
  418.                          <a class="thumb" href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg"
  420. title="Title #9">
  421.                             <img src="http://farm3.static.flickr.com/2315/2537343449_f933be8036_s.jpg" alt="Title
  423. #9" />
  424.                          </a>
  425.                          <div class="caption">
  426.                             <div class="download">
  427.                                <a href="http://farm3.static.flickr.com/2315/2537343449_f933be8036_b.jpg">Download
  429. Original</a>
  430.                             </div>
  431.                             <div class="image-title">Title #9</div>
  432.                             <div class="image-desc">Description</div>
  433.                          </div>
  434.                       </li>
  436.                       <li>
  437.                          <a class="thumb" href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg"
  439. title="Title #10">
  440.                             <img src="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_s.jpg" alt="Title
  442. #10" />
  443.                          </a>
  444.                          <div class="caption">
  445.                             <div class="download">
  446.                                <a href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_b.jpg">Download
  448. Original</a>
  449.                             </div>
  450.                             <div class="image-title">Title #10</div>
  451.                             <div class="image-desc">Description</div>
  452.                          </div>
  453.                       </li>
  455.                       <li>
  456.                          <a class="thumb" href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg"
  458. title="Title #11">
  459.                             <img src="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_s.jpg" alt="Title
  461. #11" />
  462.                          </a>
  463.                          <div class="caption">
  464.                             <div class="download">
  465.                                <a href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_b.jpg">Download
  467. Original</a>
  468.                             </div>
  469.                             <div class="image-title">Title #11</div>
  470.                             <div class="image-desc">Description</div>
  471.                          </div>
  472.                       </li>
  474.                       <li>
  475.                          <a class="thumb" href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg"
  477. title="Title #12">
  478.                             <img src="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_s.jpg" alt="Title
  480. #12" />
  481.                          </a>
  482.                          <div class="caption">
  483.                             <div class="download">
  484.                                <a href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_b.jpg">Download
  486. Original</a>
  487.                             </div>
  488.                             <div class="image-title">Title #12</div>
  489.                             <div class="image-desc">Description</div>
  490.                          </div>
  491.                       </li>
  493.                       <li>
  494.                          <a class="thumb" href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg"
  496. title="Title #13">
  497.                             <img src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg" alt="Title
  499. #13" />
  500.                          </a>
  501.                          <div class="caption">
  502.                             <div class="download">
  503.                                <a href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_b.jpg">Download
  505. Original</a>
  506.                             </div>
  507.                             <div class="image-title">Title #13</div>
  508.                             <div class="image-desc">Description</div>
  509.                          </div>
  510.                       </li>
  512.                       <li>
  513.                          <a class="thumb" href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg"
  515. title="Title #14">
  516.                             <img src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg" alt="Title
  518. #14" />
  519.                          </a>
  520.                          <div class="caption">
  521.                             <div class="download">
  522.                                <a href="http://farm3.static.flickr.com/2041/2083498578_114e117aab_b.jpg">Download
  524. Original</a>
  525.                             </div>
  526.                             <div class="image-title">Title #14</div>
  527.                             <div class="image-desc">Description</div>
  528.                          </div>
  529.                       </li>
  531.                       <li>
  532.                          <a class="thumb" href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663.jpg"
  534. title="Title #15">
  535.                             <img src="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_s.jpg" alt="Title
  537. #15" />
  538.                          </a>
  539.                          <div class="caption">
  540.                             <div class="download">
  541.                                <a href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_b.jpg">Download
  543. Original</a>
  544.                             </div>
  545.                             <div class="image-title">Title #15</div>
  546.                             <div class="image-desc">Description</div>
  547.                          </div>
  548.                       </li>
  550.                       <li>
  551.                          <a class="thumb" href="http://farm3.static.flickr.com/2014/2083478274_26775114dc.jpg"
  553. title="Title #16">
  554.                             <img src="http://farm3.static.flickr.com/2014/2083478274_26775114dc_s.jpg" alt="Title
  556. #16" />
  557.                          </a>
  558.                          <div class="caption">
  559.                             <div class="download">
  560.                                <a href="http://farm3.static.flickr.com/2014/2083478274_26775114dc_b.jpg">Download
  562. Original</a>
  563.                             </div>
  564.                             <div class="image-title">Title #16</div>
  565.                             <div class="image-desc">Description</div>
  566.                          </div>
  567.                       </li>
  569.                       <li>
  570.                          <a class="thumb" href="http://farm3.static.flickr.com/2194/2083464534_122e849241.jpg"
  572. title="Title #17">
  573.                             <img src="http://farm3.static.flickr.com/2194/2083464534_122e849241_s.jpg" alt="Title
  575. #17" />
  576.                          </a>
  577.                          <div class="caption">
  578.                             <div class="download">
  579.                                <a href="http://farm3.static.flickr.com/2194/2083464534_122e849241_b.jpg">Download
  581. Original</a>
  582.                             </div>
  583.                             <div class="image-title">Title #17</div>
  584.                             <div class="image-desc">Description</div>
  585.                          </div>
  586.                       </li>
  588.                       <li>
  589.                          <a class="thumb" href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e.jpg"
  591. title="Title #18">
  592.                             <img src="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_s.jpg" alt="Title
  594. #18" />
  595.                          </a>
  596.                          <div class="caption">
  597.                             <div class="download">
  598.                                <a href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_b.jpg">Download
  600. Original</a>
  601.                             </div>
  602.                             <div class="image-title">Title #18</div>
  603.                             <div class="image-desc">Description</div>
  604.                          </div>
  605.                       </li>
  607.                       <li>
  608.                          <a class="thumb" href="http://farm3.static.flickr.com/2375/2538172432_3343a47341.jpg"
  610. title="Title #19">
  611.                             <img src="http://farm3.static.flickr.com/2375/2538172432_3343a47341_s.jpg" alt="Title
  613. #19" />
  614.                          </a>
  615.                          <div class="caption">
  616.                             <div class="download">
  617.                                <a href="http://farm3.static.flickr.com/2375/2538172432_3343a47341_b.jpg">Download
  619. Original</a>
  620.                             </div>
  621.                             <div class="image-title">Title #19</div>
  622.                             <div class="image-desc">Description</div>
  623.                          </div>
  624.                       </li>
  626.                       <li>
  627.                          <a class="thumb" href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f.jpg"
  629. title="Title #20">
  630.                             <img src="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_s.jpg" alt="Title
  632. #20" />
  633.                          </a>
  634.                          <div class="caption">
  635.                             <div class="download">
  636.                                <a href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_b.jpg">Download
  638. Original</a>
  639.                             </div>
  640.                             <div class="image-title">Title #20</div>
  641.                             <div class="image-desc">Description</div>
  642.                          </div>
  643.                       </li>
  645.                       <li>
  646.                          <a class="thumb" href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34.jpg"
  648. title="Title #21">
  649.                             <img src="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_s.jpg" alt="Title
  651. #21" />
  652.                          </a>
  653.                          <div class="caption">
  654.                             <div class="download">
  655.                                <a href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_b.jpg">Download
  657. Original</a>
  658.                             </div>
  659.                             <div class="image-title">Title #21</div>
  660.                             <div class="image-desc">Description</div>
  661.                          </div>
  662.                       </li>
  664.                       <li>
  665.                          <a class="thumb" href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a.jpg"
  667. title="Title #22">
  668.                             <img src="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_s.jpg" alt="Title
  670. #22" />
  671.                          </a>
  672.                          <div class="caption">
  673.                             <div class="download">
  674.                                <a href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_b.jpg">Download
  676. Original</a>
  677.                             </div>
  678.                             <div class="image-title">Title #22</div>
  679.                             <div class="image-desc">Description</div>
  680.                          </div>
  681.                       </li>
  683.                       <li>
  684.                          <a class="thumb" href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6.jpg"
  686. title="Title #23">
  687.                             <img src="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_s.jpg" alt="Title
  689. #23" />
  690.                          </a>
  691.                          <div class="caption">
  692.                             <div class="download">
  693.                                <a href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_b.jpg">Download
  695. Original</a>
  696.                             </div>
  697.                             <div class="image-title">Title #23</div>
  698.                             <div class="image-desc">Description</div>
  699.                          </div>
  700.                       </li>
  701.                    </ul>
  702.                 </div>
  703.                 <div style="clear: both;"></div>
  704.              </div>
  705.           </div>
  706.           <div id="footer">© 2009 Trent Foley</div>
  707.           <script type="text/javascript">
  708.              jQuery(document).ready(function($) {
  709.                 // We only want these styles applied when javascript is enabled
  710.                 $('div.navigation').css({'width' : '300px', 'float' : 'left'});
  711.                 $('div.content').css('display', 'block');
  713.                 // Initially set opacity on thumbs and add
  714.                 // additional styling for hover effect on thumbs
  715.                 var onMouseOutOpacity = 0.67;
  716.                 $('#thumbs ul.thumbs li').opacityrollover({
  717.                    mouseOutOpacity:  onMouseOutOpacity,
  718.                    mouseOverOpacity:  1.0,
  719.                    fadeSpeed:        'fast',
  720.                    exemptionSelector: '.selected'
  721.                 });
  722.                
  723.                 // Initialize Advanced Galleriffic Gallery
  724.                 var gallery = $('#thumbs').galleriffic({
  725.                    delay:                    2500,
  726.                    numThumbs:                15,
  727.                    preloadAhead:              10,
  728.                    enableTopPager:            true,
  729.                    enableBottomPager:        true,
  730.                    maxPagesToShow:            7,
  731.                    imageContainerSel:        '#slideshow',
  732.                    controlsContainerSel:      '#controls',
  733.                    captionContainerSel:      '#caption',
  734.                    loadingContainerSel:      '#loading',
  735.                    renderSSControls:          true,
  736.                    renderNavControls:        true,
  737.                    playLinkText:              'Play Slideshow',
  738.                    pauseLinkText:            'Pause Slideshow',
  739.                    prevLinkText:              '‹ Previous Photo',
  740.                    nextLinkText:              'Next Photo ›',
  741.                    nextPageLinkText:          'Next ›',
  742.                    prevPageLinkText:          '‹ Prev',
  743.                    enableHistory:            false,
  744.                    autoStart:                false,
  745.                    syncTransitions:          true,
  746.                    defaultTransitionDuration: 900,
  747.                    onSlideChange:            function(prevIndex, nextIndex) {
  748.                       // 'this' refers to the gallery, which is an extension of $('#thumbs')
  749.                       this.find('ul.thumbs').children()
  750.                          .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
  751.                          .eq(nextIndex).fadeTo('fast', 1.0);
  752.                    },
  753.                    onPageTransitionOut:      function(callback) {
  754.                       this.fadeTo('fast', 0.0, callback);
  755.                    },
  756.                    onPageTransitionIn:        function() {
  757.                       this.fadeTo('fast', 1.0);
  758.                    }
  759.                 });
  760.              });
  761.           </script>
  762.        </body>
  763.     </html>


 
un tres grand lerci pour l aide

Reply

Marsh Posté le 11-05-2013 à 21:06:08   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed