jQuery: creare in automatico le gallerie di immagini di WordPress

Immaginiamo di avere tante immagini nei nostri post di WordPress ma nessuna galleria disponibile. Questa è una situazione che si presenta quando chi crea il post non ha usato le funzioni di WordPress per la creazione di gallerie. Proviamo a creare una galleria di immagini in automatico utilizzando jQuery.

Per prima cosa definiamo nel nostro foglio di stile delle regole per la formattazione della galleria:

#gallery {
    height: 90px;
    margin: 1em 0;
}

#gallery img.gallery {
    width: 100px;
    height: 90px;
    margin-bottom: 0;
    margin-right: 0.5em;
    float: left;
}

Per questo esempio ho usato la classe CSS gallery per le immagini, ma voi potete usare quelle predefinite di WordPress, come ad esempio alignleft o size-full.

A questo punto con jQuery dobbiamo:

1. creare il contenitore delle immagini
2. clonare le immagini e inserirle nella galleria
3. eliminare gli originali.

Ecco il codice:

var GalleryMaker = {
    fn: {
        create: function() {
            var target = $('p', document.body).eq(0);
            target.prepend('<div id="gallery"></div>');
        },
        populate: function() {
            $('img.gallery').each(function() {
                var $img = $(this),
                    copy = $img.clone();
                $(copy).appendTo('#gallery');
                $img.remove();
            });
        }
    },

    init: function() {
        this.fn.create();
        this.fn.populate();
    }


};

$(function() {
    GalleryMaker.init();
});​