Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2249 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  comment ajouter la croix pour fermer lightbox

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

comment ajouter la croix pour fermer lightbox

n°2189714
sonaca
Posté le 11-05-2013 à 21:06:08  profilanswer
 


 
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

mood
Publicité
Posté le 11-05-2013 à 21:06:08  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  comment ajouter la croix pour fermer lightbox

 

Sujets relatifs
Script sous R: ajouter une valeur en début de listeje n'arrive pas à ajouter des servers web sous netbeans
Ajouter un champ dans une tablePb pour fermer programme avec touche clavier. (VB)
Petit problème avec Lightbox 2ajouter pub dans une appli windows desktop
ajouter une exeption a mon scriptAjouter une ligne non complète
Ajouter le BOM dans un streamFermer une fenêtre PHP
Plus de sujets relatifs à : comment ajouter la croix pour fermer lightbox

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.362 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR