Per inserire uno JQuery Slider scorrevole dobbiamo procedere con:
- L'inserimento dei codici sul foglio HTML
- L'inserimento del codice sul Widget HTML/JavaScript
Procediamo con l'inserimento del codice sul foglio html, andiamo su Design → Modifica HTML, e Espandete i modelli widget (consiglio sempre di salvare una copia del vostro Template prima di modificare HTML), cerchiamo con la ricerca veloce (CTRL+F) il codice ]]></b:skin> e subito prima incolliamo il seguente codice
#jFlowSlide{ background:#f8f8f8; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#000000; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }
.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }
.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#000000; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }
.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }
.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }
(In questo codice si possono modificare i colori di sfondo.)
Dopodichè cerchiamo </head> e subito prima incolliamo l'altro codice
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script language='javascript' src='http://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/jquery.flow.1.2.auto.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#myController").jFlow({
slides: "#slides",
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlide", // must be id, use # sign
selectedWrapper: "jFlowSelected", // just pure text, no sign
auto: true, //auto change slide, default true
width: "610px",
height: "235px",
duration: 100,
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext" // must be class, use . sign
});
});
</script>
<script language='javascript' src='http://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/jquery.flow.1.2.auto.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#myController").jFlow({
slides: "#slides",
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlide", // must be id, use # sign
selectedWrapper: "jFlowSelected", // just pure text, no sign
auto: true, //auto change slide, default true
width: "610px",
height: "235px",
duration: 100,
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext" // must be class, use . sign
});
});
</script>
(In questo codice si possono modificare la larghezza, l'altezza e la velocità di durata, ma prima di tutto scarichiamo http://sites.google.com/site/freeblo...ow.1.2.auto.js, lo modifichiamo come vogliamo noi e lo carichiamo su Google site.)
Adesso clicchiamo su salva modello.
Infine torniamo su Elementi pagina → Aggiungi un gadget → HTML/JavaScript. E aggiungiamo il codice riportato di seguito
<div class="jflow-content-slider">
<div id="slides">
<div class="slide-thumbnail">
<img alt="" src="LINK IMMAGINE"/>
</div>
<div class="slide-details">
<span style="font-size: large;"><b> TITOLO DEL POST </b></span>
<div class="description">
<div id="slides">
<!-- Inizio 1 -->
<div class="slide-wrapper"><div class="slide-thumbnail">
<img alt="" src="LINK IMMAGINE"/>
</div>
<div class="slide-details">
<span style="font-size: large;"><b> TITOLO DEL POST </b></span>
<div class="description">
TEXT DEL POST
</div>
</div>
<div class="clear"></div>
</div>
<!-- Fine 1 -->
<!-- Inizio 2 -->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="LINK IMMAGINE"/>
</div>
<div class="slide-details">
<span style="font-size: large;"><b> TITOLO DEL POST </b></span>
<div class="description">
TEXT DEL POST
</div>
</div>
<div class="clear"></div>
</div>
<!-- Fine 2 -->
<!-- Inizio 3 -->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="LINK IMMAGINE"/>
</div>
<div class="slide-details">
<span style="font-size: large;"><b> TITOLO DEL POST </b></span>
<div class="description">
TEXT DEL POST
</div>
</div>
<div class="clear"></div>
</div>
<!-- Fine 3 -->
X 4
X 5
X 6
X 7
<!-- È possibile aggiungere diapositive che vuoi di sopra di questa linea -->
</div>
<div id="myController">
<span class="jFlowPrev">Prev</span>
<span class="jFlowControl">1</span>
<span class="jFlowControl">2</span>
<span class="jFlowControl">3</span>
<!-- Aumentare questi numeri con l'aumento nel numero di diapositive di sopra -->
<span class="jFlowNext">Next</span>
</div>
<div class="clear"></div>
</div>
Nell'ultimo codice qua sopra citato le stringhe in rosso vengono sostituite con:
- src="LINK IMMAGINE" (con l'URL dell'immagine da inserire)
- TITOLO DEL POST / TEXT DEL POST
- X 4, 5, 6, 7 per aggiungere altri diapositive.
- A continuare su <span class="jFlowControl">3</span> aggiungere altre stringhe in base a quanti diapositivi abbiamo aggiunto ad es. jFlowControl">4/5/6</sp
0 commenti:
Posta un commento
Proponi un'idea, segnalaci un problema.
Entra a far parte di CS3, pubblica i tuoi articoli.
Scrivi un commento!