WebSite X5Help Center

 
Francesco A.
Francesco A.
User

Slide show di immagini in js  it

Auteur : Francesco A.
Visité 1667, Followers 1, Partagé 0  

Buongiorno, vorrei inserie nella mia home una slide show di immagini tipo questa: http://www.owlgraphic.com/owlcarousel/

Ho provato a cercare di studiare i vari passaggi ma non riesco a capire dove inserire i codici (html, js) e i file. Qualcuno di santa pazienza potrebbe aiutarmi?

Posté le
5 RéPONSES
Skeggia 12
Skeggia 12
Moderator

il codice javascript lo racchiudi tra i tag <script> codice codice</script> e lo metti nelle proprietà della pagina sezione esperto, prima della chiusura del tag head...il codice html in un oggetto html o in intestazione o in una cella sulla griglia di pagina e il codice css in  tab esperto di un ogg. html nella griglia di pagina... gli inserimenti di base sono questi, poi, potrebbe essere che qualcosa possa essere messo diversamente, intanto prova così...

Lire plus
Posté le de Skeggia 12
Francesco A.
Francesco A.
User
Auteur

Ok ma supponendo volessi eseguire un esempio tipo quello del link che ho postato, i passi sono 3:

1. Load jQuery and include Owl Carousel plugin files

To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included.

  1. <!-- Important Owl stylesheet -->
  2. <linkrel="stylesheet"href="owl-carousel/owl.carousel.css">
  3.  
  4. <!-- Default Theme -->
  5. <linkrel="stylesheet"href="owl-carousel/owl.theme.css">
  6.  
  7. <!-- jQuery 1.7+ -->
  8. <scriptsrc="jquery-1.9.1.min.js"></script>
  9.  
  10. <!-- Include js plugin -->
  11. <scriptsrc="assets/owl-carousel/owl.carousel.js"></script>

Questo è il codice css che devo inserire nella sezione esperto dell'oggetto html allegando i 3 file: owl.carousel.css, owl.theme.css, owl.carousel.js.

Le stringhe 7 e 8 se ho capito bene posso pure omettere di inserirle visto che website ha già implementato il jquery giusto o le devo inserire comunque?

--------------------------------------------------------------------------------------

2. Set up your HTML

You don't need any special markup. All you need is to wrap your divs(owl works with any type element) inside the container element <div class="owl-carousel">. Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file.

  1. <divid="owl-example"class="owl-carousel">
  2. <div> Your Content </div>
  3. <div> Your Content </div>
  4. <div> Your Content </div>
  5. <div> Your Content </div>
  6. <div> Your Content </div>
  7. <div> Your Content </div>
  8. <div> Your Content </div>
  9. ...
  10. </div>

Questo è il codice che devo incollare dentro l'oggetto html, al posto di "Your Content" cosa devo scrivere? Il collegamento alle immagini o cosa?

--------------------------------------------------------------------------------------

3. Call the plugin

Now call the Owl initializer function and your carousel is ready.

  1. $(document).ready(function(){
  2.  
  3. $("#owl-example").owlCarousel();
  4.  
  5. });

Questo ultimo codice dove devo inserirlo?

Lire plus
Posté le de Francesco A.
Skeggia 12
Skeggia 12
Moderator

andiamo per ordine...

1) devi inserire le righe del gruppo 1 (coma hai giustamente detto senza la 7 e la 8 che sono già inserite da website) nelle proprietà pagina, sezione esperto e poi allegare i file dichiarati da queste righe, con gli stessi percorsi, in un ogg. html (lo stesso in cui inserisci le righe del punto 2) nella sezione esperto, parte bassa...

2) queste righe nel corpo di un ogg. html... al posto di Your content devi inserire le tue immagini con il percorso (io caricherei le immagini in una cartella sul tuo dominio con ftp esterno e qui metterei il percorso assoluto ("http:\\www.tuosito.it/immagini/nomeimg.jpg")) in modo da alleggerire poi il trasferimento del sito in rete...

3) questo codice scritto tra i tag <script> e </script> dovrebbe andare in proprietà pagina, sezione esperto, ma alcune volte (il più delle volte), va inserito in fondo al codice html nell'oggetto html, sempre racchiuso tra i tag che ti ho citato...è da verificare...

questo dovrebbe essere, se non ho dimenticato qualcosa o questo plugin ha regole un po' diverse dai soliti...non ti resta che provare...

Lire plus
Posté le de Skeggia 12
Francesco A.
Francesco A.
User
Auteur

Ok, grazie mille per la pazienza. Un ultima cosa, il codice js così scritto, in quale pagina del progetto lo incollo?

// Can also be used with $(document).ready()

$(window).load(function()

{  $('.flexslider').flexslider({    

animation: "slide"  });});

Lo devo incollare così com'è oppure devo scrivere qualche altra riga di comando?

Lire plus
Posté le de Francesco A.
Skeggia 12
Skeggia 12
Moderator

lo devi racchiudere tra i tag

<script>codice codice</script>

e "dovrebbe" andare a fine codice html...

ma alcuni plugin lo puoi mettere anche in sezione esperto proprietà pagina, non è sempre uguale...

ciao

Lire plus
Posté le de Skeggia 12