UTILIZZO PLUGIN
Scrivi le tue richieste di aiuto nella sezione relativa.
Posta qui eventuali problemi con i plugin di jQuery
- Questo topic ha 3 risposte, 2 partecipanti ed è stato aggiornato l'ultima volta 9 anni, 10 mesi fa da
ariannaari.
Stai visualizzando 4 post - dal 1 a 4 (di 4 totali)
- Post
ariannaariBuonasera ragazzi… chiedo scusa in anticipo perchè la mia domanda è di una ignoranza pazzesca, e spero voi possiate farmi capire qualcosa.
Sto costruendo un sito a scopo didattico, html-css-php classico, e avrei bisogno di inserire uno slider di immagini. Ho visto che ci sono molti plugin JQuery in rete che lo realizzano, ma, posto che non so niente di niente di javascript e di JQuery, vorrei sapere come utilizzare questi plugin pronti. Nel senso, io che non ne so niente, posso utilizzarli belli e pronti così? Come li inserisco nella mia pagina html?
Se utilizzo la copia on-line di jquery e aggiungo la riga
`<script language=”javascript” type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
nella mia pagina html, come faccio ad usare poi il plugin?
Per esempio il plugin scaricabile a questo link:
http://www.html.it/script/thumbnail-e-slideshow-con-effetto-dissolvenza-con-galleriffic/Non so se la mia domanda è chiara.
jqueryitaliaChiarissima Ariannna 😛
Diciamo che è tutto abbastanza semplice.
Dopo aver scaricato il plugin Gallerific, devi caricare i fogli stile necessari ed i javascript nell’HEAD della tua pagina (jQuery lo carichiamo attraverso una CDN per ottimizzare le prestazioni).<link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" /> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script type="text/javascript" src="js/jquery.galleriffic.js"></script> <script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
Sempre nell’HEAD andari ad inserire il codice per far funzionare il plugin in questo modo:
<script> 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>Una volta creata la lista delle immagini ed il contenitore per lo slidshow dovrebbe apparire e funzionare tutto.
Puoi fare riferimento a questa pagina di esempio che ho creato per te.ariannaariInnanzitutto grazie mille per l’interesse, davvero.
Allora, ho provato ad inserire nella mia pagina il codice da te indicato, ma c’è qualcosa che non va. Innanzitutto volevo chiederti:XHTML
<link rel=”stylesheet” href=”css/galleriffic-2.css” type=”text/css” />
<script src=”//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js”></script>
<script type=”text/javascript” src=”js/jquery.galleriffic.js”></script>
<script type=”text/javascript” src=”js/jquery.opacityrollover.js”></script>Qui ti inserisci solo uno dei tanti fogli di stile disponibili… devo inserire solo questo o anche gli altri, uno ad uno?
Poi, nella pagina di esempio, nella cella in alto a destra invece c’è un css… sarebbe il file chiamato basic? Allora devo inserire anche quello?Altra cosa… modificata la mia pagina, quando vado a caricare io vedo titolo e poi elenco delle foto, una ad una, tra l’altro dimensionate male, mentre non vedo lo slider… ti posto il codice intero della ma pagina, io tra l’altro utilizzo anche un altro css per altri elementi della mia pagina, ma anche se tolgo il link a questo css, il risultato è lo stesso, per il div che riguarda le foto.
questo è index.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Home - Gemaca Costruzioni</title> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" href="css/basic-2.css" type="text/css" /> <link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" /> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script type="text/javascript" src="js/jquery.galleriffic.js"></script> <script type="text/javascript" src="js/jquery.opacityrollover.js"></script> <script> 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> </head> <body id="home"> <div id="sfondo"> <div id="logo"> <img src="immagini/loghino.gif" alt="Gemaca Costruzioni - Impresa Edile"/> </div> <div id="menu"> <ul> <li id="mhome"><a href="index.php"> Home </a></li> <li id="mchi"><a href="chisiamo.php"> Chi siamo </a></li> <li id="mfoto"><a href="foto.php"> Foto </a></li> <li id="mcont"><a href="contattaci.php"> Contattaci </a></li> </ul> </div> <div id="contenuti"> <div id="container"> <h1>Thumbnail e slideshow con effetto dissolvenza con Galleriffic</h1> <!-- 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 id="link"> </div> <div id="anteprima_foto"> </div> </div> </div> </body> </html>e questo è main.css:
body { margin: 0px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCC', endColorstr='#4F4F4F'); /* per Internet Explorer */ background: -webkit-gradient(linear, left top, left bottom, from(#4F4F4F), to(#fff)); /* per browser webkit come Safari */ background: -moz-linear-gradient(top, #4F4F4F, #fff); /* per firefox 3.6+ */ height: 800px; } #sfondo { position: relative; margin: auto; text-align:center; width: 70%; height: 90%; background-color: white; } #logo { margin: auto; margin-top:20px; padding-top: 10px; text-align:center; width: 100%; height: 140px; background-color: white; } #menu { position: relative; background-color: red; margin: 0px; margin-top:0px; margin-bottom:0px; text-align:center; width: 100%; height: 40px; } #menu ul{ list-style-type: none; margin-top: 4px; color: White; height: 100%; width: 90%; } #menu li {margin: 0;padding: 0 ; height: 100%; width: 25%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none; color : white; text-align:center; float:center; } #menu li, #menu a{ float: left; margin: auto; text-align:center; height: 100%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none; font-size: 18px; color: White; } #menu a {color: White; margin-top: 8px; width: 100%; } #menu a:hover {background-color: #B20000; float: left; margin: auto; margin-top: 0px; height: 100%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none; font-variant: small-caps; font-size: 24px; color: White; } /* #menu li, #menu a:hover{background-position: 0 -30px; color : white; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 20px; color: Black; } body#home li#mhome a, body#chi li#mchi a, body#foto li#mfoto a, body#cont li#mcont a { background-position: 0 -60px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 20px; color: White; } */ /* #contenuti { margin-left: 50%; } #contenuti ul{width: 800px; margin: 0;margin-left: -400px; padding: 0; } #contenuti li{list-style: none; margin: 0;padding: 0, width: 100%} #contenuti li, #contenuti a{float: left;width: 400px;height: 100px} #contenuti a{text-decoration: none} #contenuti li, #contenuti a:hover{background-position: 0 -100px} */Cos’è che ho sbagliato? Ancora grazie mille per l’enorme aiuto =)
ariannaariHo provato a fare alcune modifiche… e così mi funziona… allora, index.php diventa:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Home - Gemaca Costruzioni</title> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" href="css/galleriffic-2_ok.css" type="text/css" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/jquery.galleriffic.js"></script> <script type="text/javascript" src="js/jquery.opacityrollover.js"></script> <script> 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> </head> <body id="home"> <div id="sfondo"> <div id="logo"> <img src="immagini/loghino.gif" alt="Gemaca Costruzioni - Impresa Edile"/> </div> <div id="menu"> <ul> <li id="mhome"><a href="index.php"> Home </a></li> <li id="mchi"><a href="chisiamo.php"> Chi siamo </a></li> <li id="mfoto"><a href="foto.php"> Foto </a></li> <li id="mcont"><a href="contattaci.php"> Contattaci </a></li> </ul> </div> <div id="container"> <h1>Thumbnail e slideshow con effetto dissolvenza con Galleriffic</h1> <!-- 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 id="link"> </div> <div id="anteprima_foto"> </div> </div> </body> </html>in cui galleriffic-2_ok.css è proprio il codice del riquadro in alto a destra del tuo esempio!
Ora devo aggiustare i dettagli! Grazie infinite davvero. Penso che ti chiederò una mano per un altro plugin!
Stai visualizzando 4 post - dal 1 a 4 (di 4 totali)
- Devi essere connesso per rispondere a questo topic.
