jQuery: portfolio espandibile

Un portfolio espandibile è un tipo di portfolio in cui gli elementi sono disposti su una griglia. Cliccando su ciascun elemento si apre una riga sottostante che mostra i dettagli dell'elemento selezionato. La sua implementazione è relativamente semplice con jQuery.

Partiamo dalla struttura HTML. Abbiamo tre elementi su ciascuna riga e dopo ogni riga troviamo un elemento vuoto che sarà popolato di volta in volta con i contenuti HTML presi dalla voce corrispondente contenuta in una lista non ordinata. Per collegare l'elemento corrente con la voce di lista corrispondente usiamo gli attributi data di HTML5.

Ciascuno di questi attributi presenta l'indice numerico della voce di lista:

<div id="portfolio">
    <div class="row">
        <div class="item" data-rel="0">1</div>
        <div class="item" data-rel="1">2</div>
        <div class="item" data-rel="2">3</div>
    </div>
    <div class="details"></div>
    <div class="row">
        <div class="item" data-rel="3">4</div>
        <div class="item" data-rel="4">5</div>
        <div class="item" data-rel="5">6</div>
    </div>
    <div class="details"></div>
    <ul id="portfolio-details">
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

Con i CSS dobbiamo nascondere sia l'elemento vuoto che la lista non ordinata:

#portfolio {
    margin: 2em 0;
    width: 100%;
}

#portfolio div.row {
    margin-bottom: 1em;
    height: 15em;
}

#portfolio div.details {
    display: none;
    padding: 5%;
    margin: 0.5em;
    background: #f5f5f4;
}

#portfolio div.row div.item {
    width: 30%;
    float: left;
    height: 100%;
    margin: 0 1.5%;
    background: #eee;
    text-align: center;
    font-size: 4em;
    line-height: 4;
    cursor: pointer;
}

#portfolio #portfolio-details {
    position: absolute;
    top: -9999px;
}​

Con jQuery dobbiamo eseguire un'azione su ciascun elemento di una riga. Questa azione dovrà:

1. nascondere tutti gli elementi vuoti
2. eliminare i contenuti di tali elementi
3. reperire il contenuto HTML della voce di lista corrispondente all'elemento corrente
4. inserire tale contenuto nell'elemento vuoto corrispondente e mostrarlo con un effetto di sliding
5. fare in modo che la pagina scrolli in verticale per mostrare sempre l'elemento con i dettagli

Ecco l'implementazione:

var Portfolio = {
    Elements: {

        items: $('div.item', '#portfolio'),
        details: $('#portfolio-details', '#portfolio')

    },

    fn: {

        select: function() {

            Portfolio.Elements.items.each(function() {

                var $item = $(this);
                var $row = $item.parent();
                var $details = $row.next('div.details');
                var $li = $('li', Portfolio.Elements.details);


                $item.click(function() {

                    $('div.details').hide();
                    $details.empty();
                    var $html = $li.eq($item.data('rel')).html();
                    $details.html($html).slideDown(600);
                    $('html, body').animate({
                        scrollTop: 0
                    }, 0).animate({
                        scrollTop: $details.offset().top
                    }, 300);

                });




            });


        }


    }

};

Portfolio.fn.select();​