Nel caso in cui dovessi inserire il tuo slider in un sito web su base HTML o con un sistema di gestione contenuti diverso da Wordpress, potrebbe essere necessario esportare il codice HTML dello slider. Il codice HTML generato da cssSlider potrà essere utilizzato all'interno di qualsiasi sistema di gestione contenuti e si potrà modificarlo direttamente.
Una volta completata la creazione del tuo slider, dopo aver aggiunto tutte le immagini che vuoi utilizzare, dopo aver selezionato la skin e l'effetto di transizione e aggiunto titoli e didascalie, potrai esportare tutto il codice HTML nei modi seguenti:
Clicca sul pulsante 'Save HTML' sulla barra di navigazione in alto.
Seleziona una cartella in cui salvare l'esportazione HTML e poi clicca su 'save'.
Utilizzare l'HTML
Il codice HTML principale si troverà in un file chiamato 'cssslider.html'. Questo file contiene una pagina HTML completa, pronta per essere interpretata da un browser senza bisogno di alcuna modifica o intervento.
Puoi usare questa pagina come base per una singola, semplice pagina web, aggiungendo altri contenuti, come titolo, testo e link.
La situazione più comune, però, è quella in cui copierai il cssSlider su una tua pagina web già esistente.
Se vuoi copiare lo slider in una pagina HTML pre-esistente, assicurati che tutto ciò che copi si trovi tra:
<!-- Start cssSlider.com -->
e:
<!-- End cssSlider.com -->
Dovrai copiare quelle righe di codice nella posizione corretta per lo slider nel tuo codice HTML, ad esempio in un header div. Ricorda che lo slider è pienamente reattivo, quindi si ridimensionerà per adattarsi allo spazio disponibile sullo schermo.
Risoluzione dei problemi dell'HTML
Se dopo aver copiato l'HTML riscontri ancora dei problemi, controlla le seguenti sezioni:
<link rel="stylesheet" href="engine1/style.css">
<!--[if IE]><link rel="stylesheet" href="engine1/ie.css"><![endif]-->
<!--[if lte IE 9]><script type="text/javascript" src="engine1/ie.js"></script><![endif]-->
I collegamenti presenti in queste righe riportano a degli stylesheet contenuti in una cartella a parte chiamata engine [ID del tuo slider]. Se cambi il nome della cartella o la sposti dovrai modificare i link nella maniera corrispondente.
<div class="img"><img src="data1/images/istock_000000654343xsmall.jpg" style="width: 100%;"></div>
Questi sono i link delle immagini della presentazione e anche queste sono contenute in una cartella specifica chiamata 'data [ID del tuo slider]'. Allo stesso modo, se sposti o rinomini le cartelle, dovrai aggiornare il link. Il consiglio è di tenere tutte le immagini della presentazione in una cartella separata per poterle localizzare sempre facilmente.
<div class="img"><img src='data1/tooltips/istock_000000654343xsmall.jpg' alt='iStock_000000654343XSmall' title='iStock_000000654343XSmall' /></div>
Nella stessa cartella 'data [ID del tuo slider]' c'è una sottocartella in cui sono contenute le immagini di anteprima (thumbnail). Se la tua presentazione prevede l'uso di anteprime immagine quando si punta il mouse sui puntini di navigazione, quelle anteprime vengono messe qui. Di nuovo, se rinomini o sposti la cartella dovrai aggiornare il link.
