Quantcast

Slideshow js

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Slideshow js

bl88
This post was updated on .
Salve, non riesco proprio a far funzionare le slide con script..
e non riesco nemmeno a capire dove sbaglio.. probabilmente quando incapsulo il codice in xml..

Adesso ho scaricato Slideshow 2 da qui http://www.lachiavenelpozzo.com/come-fare-a/slideshow

Mi trovo la cartella con dentro s3Slider.js e s3SliderPacked.js e 3 html da esempio.
Quale file devo caricare negli allegati?
Devo poi modificare uno degli html?

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Saideshow js

Silvana
Administrator
Devi caricare negli allegati i due file.js
Quindi prelevi l'indirizzo di ognuno dei due (togliendo la parte dopo l'estensione) e lo sostituisci nel file.html relativo al modello di slideshow che vuoi utilizzare.
Naturalmente, dovrai inserire anche gli indirizzi delle immagini dove indicato.
Fatto questo, incapsuli il codice html, come sai e lo carichi anch'esso negli allegati. Prelevi il suo codice (sempre togliendo la parte dopo l'estensione) e carichi lo slideshow nella pagina del sito da inserisci->altri gadget->gadget in base a URL.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Saideshow js

bl88
Questo è l'html 1... c'è solo s3Slider.js, l'altro no...
ho sostituito qui </script><script type="text/javascript" src="s3Slider.js"> mettendo il link. Le foto devono essere per forza 410x300? Perché quelle che ho caricato sono più grandi _________________________________________________________________________________ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>s3Slider jQuery plugin</title> <!-- CSS --> <style type="text/css" media="screen"> #slider { width: 410px; /* important to be same as image width */ height: 300px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ } #sliderContent { width: 410px; /* important to be same as image width or wider */ position: absolute; top: 0; margin-left: 0; } .sliderImage { float: left; position: relative; display: none; } .sliderImage span { position: absolute; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 384px; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none; } .clear { clear: both; } .sliderImage span strong { font-size: 14px; } .top { top: 0; left: 0; } .bottom { bottom: 0; left: 0; } ul { list-style-type: none;} </style> <!-- JavaScripts--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="s3Slider.js"></script><script type="text/javascript"> $(document).ready(function() { $('#slider').s3Slider({ timeOut: 3000 }); }); </script></head>

<body>

   

Example 1

    <p>This show the layer appears from top or bottom.</p>
    <div id="slider">
        <ul id="sliderContent">
            <li class="sliderImage">
                1
                <strong>Title text 1</strong><br />Content text...
            </li>
            <li class="sliderImage">
                2
                <strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...
            </li>
            <li class="sliderImage">
                3
                <strong>Title text 2</strong><br />Content text...
            </li>
            <li class="sliderImage">
                4
                <strong>Title text 2</strong><br />Content text...
            </li>
            <li class="sliderImage">
                5
                <strong>Title text 2</strong><br />Content text...
            </li>
            <div class="clear sliderImage"></div>
        </ul>
    </div>
   

</body>
</html>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Saideshow js

Silvana
Administrator
Si`, e` vero, un js non serve, pare, non so perche` l'hanno messo. Lo slide funziona senza, quindi ignoralo.

Per quanto riguarda le immagini, devi impostare le stesse misure qui:

   #slider {
    width: 410px; /* important to be same as image width */
    height: 300px; /* important to be same as image height */
    position: relative; /* important */
        overflow: hidden; /* important */
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Saideshow js

bl88
Non va... dal sito http://www.serie3.info/s3slider dice che c'è bisogno del jQuery?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Saideshow js

Silvana
Administrator
No, forse ho capito. Nel codice c'e` un altro file.js che viene incorporato tramite l'indirizzo esteso. Si tratta di questo:

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

Non ha un indirizzo certificato e i browser non lo accettano, perche` i siti Google sono tutti certificati. In poche parole, i link devono iniziare con https e non con http.
Quello che devi fare e` andare al link del javascript che ti ho indicato. Si aprira` la schermata con tutto il codice. Lo copi e lo incolli in un file di testo che rinominerai dando l'estensione .js
Carichi questo file.js negli allegati come hai fatto con l'altro. Il resto lo sai..
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Saideshow js

bl88
Grazie
Loading...