Come sappiamo con jQuery è possibile realizzare tantissimi effetti che possono migliorare il nostro sito web. In questo tutorial vogliamo mostrarvi com’è possibile creare uno slider orizzontale e verticale delle nostre pagine.
Andiamo ad analizzare il codice:

HTML

<div id="portfolio">
    <div id="background"></div>
    <div class="arrows">
        <a href="#" class="up">Up</a>
        <a href="#" class="down">Down</a>
        <a href="#" class="prev">Previous</a>
        <a href="#" class="next">Next</a>
    </div>
    <div class="gallery">
        <div class="inside">
            <div class="item">
                <div><img src="images/1.jpg" alt="image1" /></div>
                <div><img src="images/2.jpg" alt="image2" /></div>
                <div><img src="images/3.jpg" alt="image3" /></div>
            </div>
            <div class="item">
                <div><img src="images/4.jpg" alt="image4" /></div>
                <div><img src="images/5.jpg" alt="image5" /></div>
            </div>
            <div class="item">
                <div><img src="images/6.jpg" alt="image6" /></div>
                <div><img src="images/7.jpg" alt="image7" /></div>
                ...
            </div>
            <div class="item">
                ...
            </div>
        </div>
    </div>
</div>

CSS

Come primo passo si andrà a definire il contenitore principale:

#portfolio {
    position:fixed;
    top:50%;
    left:50%;
    z-index:1;
    width:1000px;
    height:500px;
    margin:-250px 0 0 -500px;
}

Lo sfondo sarà fisso:

#background {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2;
    background:url(../images/bg.png) no-repeat center;
}

La galleria avrà una posizione assoluta

#portfolio .gallery,
#portfolio .gallery .inside {
    position:absolute;
    top:0;
    left:0;
}

Ed ovviamente faremo occupare il 100% dello spazio al div

#portfolio .gallery {
    width:100%;
    height:100%;
    overflow:hidden;
}

diamo uno z-index di 1.

#portfolio .gallery .inside {
    z-index:1;
}

Ed ora inseriamo le frecce

#portfolio .arrows a {
    position:absolute;
    z-index:3;
    width:32px;
    height:32px;
    background-image:url(../images/arrows.png);
    background-repeat:no-repeat;
    outline:none;
    text-indent:-9999px;
}
 

Diamo uno stile alle frecce

#portfolio .arrows .prev,
#portfolio .arrows .up {
    display:none;
}

#portfolio .arrows .up,
#portfolio .arrows .down {
    left:50%;
    margin-left:-16px;
}

#portfolio .arrows .prev,
#portfolio .arrows .next {
    top:180px;
}

#portfolio .arrows .up {
    background-position:0 -64px;
    top:20px;
}

#portfolio .arrows .down {
    background-position:0 -96px;
    bottom:120px;
}

#portfolio .arrows .prev {
    background-position:0 -32px;
    left:60px;
}

#portfolio .arrows .next {
    background-position:0 0;
    right:60px;
}

#portfolio .arrows .up:hover {
    background-position:-32px -64px;
}

#portfolio .arrows .down:hover {
    background-position:-32px -96px;
}

#portfolio .arrows .next:hover {
    background-position:-32px 0;
}

#portfolio .arrows .prev:hover {
    background-position:-32px -32px;
}

#portfolio .item {
    position:absolute;
    top:0;
    width:1000px;
    height:400px;
}

posizioniamo adesso il wrapper con valore assoluto e che possa occupare tutto lo spazio

#portfolio .item div {
    position:absolute;
    left:0;
    width:100%;
    height:100%;
}

Inoltre bisogna centrare l’immagine

#portfolio .item div img {
    position:absolute;
    top:0;
    left:50%;
    margin-left:-300px;
}

#portfolio .paths {
    position:absolute;
    bottom:60px;
    left:50%;
    margin-left:-30px;
    z-index:4;
}

#portfolio .paths div {
    position:absolute;
    top:0;
}

#portfolio .paths a {
    background:#333;
    display:block;
    position:absolute;
    left:0;
    outline:none;
}

#portfolio .paths a:hover,
#portfolio .paths .active {
    background:#fff;
}

Javascript

Inserire questo codice nell’header della pagina

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/portfolio.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>

var o = {
    init: function(){
        this.portfolio.init();
    },
    portfolio: {
        data: {
        },
        init: function(){
            $('#portfolio').portfolio(o.portfolio.data);
        }
    }
}

$(function(){ o.init(); });

$('#portfolio').portfolio({
    image: {
        width: 600,
        height: 400,
        margin: 20
    },
    path: {
        width: 10,
        height: 10,
        marginTop: 5,
        marginLeft: 5
    },
    animationSpeed: 400
});

Scaricate qui la demo

Leggi anche: