Slideshow jQuery su immagini di background

Abbiamo visto come posizionare un’immagine di background nel nostro sito, prima con jQuery, in seguito con MooTools. Ma se non volessimo un’immagine statica, bensì un dinamico slideshow ad animare le nostre pagine? marcofolio.net ci viene incontro con questo favoloso script, di facilissima implementazione. Creiamo in nostro index.html e richiamiamo per prima cosa nell’<head> il file Css, appositamente creato e posizionato nella relativa cartella css, e nominiamolo style.css.

Ed ecco il relativo Css.

/* BASIC RESET */

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

/* HTML ELEMENTS */
body { background-color:#1b2940; font:62.5% Georgia,'Times New Roman',serif; letter-spacing:1; }

/* COMMON CLASSES */
.break { clear:both; }

/* HEADER */
#header { height:600px; }
.headerimg { background-position: center top; background-repeat: no-repeat; width:100%; height:600px; position:absolute; }

/* NAVIGATION */
#nav-outer { height:110px; padding-top:11px; position:relative; top:24px; background-image:url("../images/headerbg.png"); }
#navigation { height:100px; width:960px; margin:0 auto; background-image:url("../images/logo.png"); background-position:top left; background-repeat:no-repeat; }

/* SEARCH */
#search { background-color:#051733; float:right; width:220px; padding:10px; }
#searchtxt { padding:3px; width:150px; }
#searchbtn { border:1px solid #eee !important; background-color:#CD2B3A; color:#eee; padding:3px; margin-left:5px; }

/* MENU */
#menu { position:relative; top:85px; }
#menu ul { list-style:none; }
#menu ul li { display:inline; font-variant:small-caps; font-size:12px; }
#menu ul li a { color:white; text-decoration:none; font-weight:bold; padding-right:20px; }
#menu ul li a:hover { text-decoration:underline; }

/* HEADER TEXT */
#headertxt { width:960px; margin:0 auto; clear:both; position:relative; top:74px; }
#firstline { background-image:url("../images/textbg.png"); color:#333; font-size:40px; padding:4px 13px 7px; float:left; display:block; }
#secondline { background-image:url("../images/textbg.png"); color:#CD2B3A; text-decoration:none; font-size:60px; padding:0 13px 10px; float:left; display:block; clear:both; }
#secondline:hover { text-decoration:underline; color:#7F000C; }

.pictured { background-color:#CC3333; color:#FFF; font-size:12px; padding:9px 16px; text-transform:uppercase; float:left; display:block; clear:both; margin-top:10px; }
.pictured a { font-size:16px; font-style:italic; letter-spacing:0; text-transform:none; color:#FFF; text-decoration:none; }
.pictured a:hover { text-decoration:underline; }

/* CONTROLS */
.btn { height:32px; width:32px; float:left; cursor:pointer; }
#back { background-image:url("../images/btn_back.png"); }
#next { background-image:url("../images/btn_next.png"); }
#control { background-image:url("../images/btn_pause.png"); }

/* HEADER HAVIGATION */
#headernav-outer { position:relative; top:400px; margin:0 auto; width:960px; }
#headernav { padding-left:864px; }

/* CONTENT */
#content { color:#575757; background-color:#eee; }
#content p { padding:10px 20px; font-size:16px; width:960px; margin:0 auto; }
#content p a { text-decoration:none; color:#CD2B3A; }
#content p a:hover { text-decoration:underline; color:#7F000C; }

Richiamiamo il plugin jQuery da un link esterno.

Infine il javascript specifico, al seguente link, posizionato nella cartella js.

Infine , l’html da inserire all’interno del tag> <body>

Home
Portfolio
Contatti

Pictured:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ante turpis, vehicula sed hendrerit nec, facilisis nec augue. In hac habitasse platea dictumst. Maecenas vitae massa urna, at cursus felis. Ut orci nisi, convallis eget viverra eget, porta eu sem. Nulla ante enim, placerat id aliquam in, tristique ac nisl. In non vulputate orci. Maecenas elementum aliquam tortor, eget ultricies odio egestas at. Etiam a luctus leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam ut sapien orci. Cras bibendum velit vel augue blandit viverra. Praesent vel arcu enim, sed fringilla arcu.

Integer risus mauris, rhoncus ut dapibus et, cursus vel velit. Donec tempus congue sem, vitae ultrices tortor hendrerit quis.

Per intervenire sul numero di foto/immagini che vogliamo caricare, apriamo il file script.js, e analizziamo la seguente porzione dello script.

var photos = [ {

"title" : "Stairs",
 "image" : "vacation.jpg",
 "url" : "http://www.sxc.hu/photo/1271909",
 "firstline" : "Going on",
 "secondline" : "vacation?"
 }, {
 "title" : "Office Appartments",
 "image" : "work.jpg",
 "url" : "http://www.sxc.hu/photo/1265695",
 "firstline" : "Or still busy at",
 "secondline" : "work?"
 }, {
 "title" : "Mountainbiking",
 "image" : "biking.jpg",
 "url" : "http://www.sxc.hu/photo/1221065",
 "firstline" : "Get out and be",
 "secondline" : "active"
 }, {
 "title" : "Mountains Landscape",
 "image" : "nature.jpg",
 "url" : "http://www.sxc.hu/photo/1271915",
 "firstline" : "Take a fresh breath of",
 "secondline" : "nature"
 }, {
 "title" : "Italian pizza",
 "image" : "food.jpg",
 "url" : "http://www.sxc.hu/photo/1042413",
 "firstline" : "Enjoy some delicious",
 "secondline" : "food"
 }
];

Aggiungiamo o togliamo immagini copiando e incollando o cancellando la seguente parte di script, sostituendo il titolo con quello della vostra immagine.

, {

"title" : "Tua Immagine",
 "image" : "TuaImmagine.jpg",
 "url" : "http://TuaImmagine",
 "firstline" : "Lorem Ipsum",
 "secondline" : "Tua Immagine"
 }

All’interno del pacchetto in download trovate tutte le risorse, comprese le immagini che naturalmente sostituirete con le vostre.