jQuery offre due metodi per eseguire codice JavaScript : $(document).ready e $(window).load

La differenza sostanziale è che se io faccio:

$(document).ready(function() {
    // viene eseguito quando il "documento" è pronto e il DOM è caricato
    alert("document ready");
});

il codice viene eseguito quando il DOM è pronto ma prima che le immagini ed altri elementi grafici siano caricati

Se invece si fa:

$(window).load(function() {
    // questo viene eseguito quando tutti gli elementi della pagina sono caricati
    alert("tutti gli elementi sono stati caricati");
});

il codice e le funzioni jQuery (in questo caso un semplice alert) vengono eseguiti quando tutti gli elementi (anche quelli grafici) sono caricati.

Questa differenza può sembrare piccola ma – sempre per il mio plugin – ho scoperto ad esempio che i browser basati su webkit (Chrome  e Safari) “sanno” la dimensione di un’immagine solo dopo che questa è stata caricata (Firefox e IE invece la conoscono appena il DOM è caricato) e dunque una soluzione per chi ha bisogno di conoscere le dimensioni di un elemento grafico è usare $(window).load() visto che solo in quel momento può accedere a height() e width() delle immagini contenute nel documento.

Beh, HTH qualcuno… ;)

Dopo qualche ricerca e un po’ di prove, ecco il codice che dovrebbe assicurare un felice funzionamento del tutto – ovvero “come usare le API di Flickr con jQuery per avere una lista in JSON delle foto di un utente e vivere felici”

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=FLICKRUSERID=en-us&format=json&jsoncallback=?", function(data) {
$.each(data.items, function(i,item){
// qui abbiamo un oggetto "item" che contiene tutto quello che ci serve, ad esempio:
// - item.media.m = la URL della versione di dimensioni "medie" della foto
// - item.title = il titolo
// .....
}
});

Chiaramente al posto di “FLICKRUSERID” dovrete mettere lo user-id dell’utente di cui volete mostrare le foto (il mio è 56735045@N04), si può trovare ad esempio accedendo al nostro “photostream” e poi cliccando su “feed” in basso (che poi è quello che viene processato dal mio script, solo in formato JSON invece che RSS)

Come al solito, spero che la cosa possa essere un po’ utile, e se avete bisogno fate un fischio… ;)

Partendo da questo articolo (in inglese) ecco allora alcuni suggerimenti per far funzionare jQuery con WordPress. Premettiamo che quando parlo di “funzioni da inserire/cambiare” mi riferisco a funzioni presenti, di solito, nel file functions.php, accessibile da “Appearance” > “Editor”, possibilmente “appese” alle funzioni avviate all’inizio con un

add_action('init', 'my_jquery_init');

creando dunque una funzione “my_jquery_init” dove inserire tutto il codice di cui parleremo. Questa, ad esempio, è la mia (codice inserito per l’appunto in functions.php):

function my_jquery_init() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', false, '1.4.4');
        wp_enqueue_script('jquery');
        // load a JS file from my theme: js/theme.js
        wp_enqueue_script('puzzleCarousel', 'http://www.mercurydrops.com/js/jquery.puzzleCarousel-0.3.js', array('jquery'), '1.0');
        wp_enqueue_script('puzzleCarouselRun', '/js/puzzleCarousel.js', array('jquery'), '1.0');
    }
}
add_action('init', 'my_jquery_init');


1. Usare WP_ENQUEUE_SCRIPT

Solitamente jQuery si include nell’HEAD di una pagina HTML con una riga tipo:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

con WordPress NO! Bisogna usare la funzione:

wp_enqueue_script('jquery');

Questo è il modo per caricare *tutte* le librerie “addizionali” in WordPress – prima fra tutte il nostro plugin, che nel mio caso viene caricato così:

wp_enqueue_script('puzzleCarousel', 'http://www.mercurydrops.com/js/jquery.puzzleCarousel-0.3.js', array('jquery'), '1.0');

2. Disabilitare la libreria jQuery di default e caricarla da Google

WordPress arriva già con la sua versione di jQuery preinstallato (e la riga di codice appena sopra caricherà quella versione). Se invece volete la vostra versione di jQuery, magari caricandola da Google, dovete fare così:

wp_deregister_script('jquery');
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', false, '1.4.4');

Esiste anche un plugin che ci aiuta a caricare le più diffuse librerie direttamente da Google: Use Google Libraries

3. Convenzioni per scrivere un plugin jQuery che funzioni anche su WordPress

Ovviamente se tutto quanto scritto fino ad ora serve per *caricare* jQuery ed eventualmente dei plugin, se poi il plugin scelto va in conflitto con il resto di WordPress succede un casino. Il problema principale sta nell’uso della variabile $ – che i jQuery-sti all’ascolto conoscono bene.

In primo lugo c’è da dire che la versione di jQuery pre-installata su WordPress chiama la funzione

jQuery.noConflict();

(maggiori info su questa funzione qua) e dunque se noi vogliamo caricare la nostra versione dovremmo chiamarla da qualche parte.

Infine, come regola generale, non bisognerebbe utilizzare la variabile $, a meno che non se ne utilizzi uno “shortcut” ad esempio così (che è quello che faccio nel mio plugin):

(function($){
    // codice codice codice
    // ... e ancora codice codice codice
})(jQuery);

Conclusioni

Insomma, è un po’ un casino ma ne vale la pena. Se poi proprio non ce la fate, lasciate un commento o contattatemi e – se sono in grado e ne ho il tempo – potrei darvi una mano.

There was only one solution, at that point: roll my own. Bear in mind that I was not a huge fan of jQuery and I had used it it sparingly for a few projects here and there – but as soon as I started thinking about all the possibilities that such a library offered me, I could not take it away from my mind.

And so my first jQuery plugin was born: puzzleCarousel! If you want to jump straight to the code, check out the github repository. If you want to learn the beauty of this plugin ;) just click on the current image, on any preview or use the arrows keys to run through the gallery:

As you can see the plugin is quite simple (and that’s the first thing I like about it): it’s a slideshow where the transition is done tiling the image and changing each tile.

Easy to use
The second thing I like about this plugin is its ease of use: first of all you need to load the jQuery library – we are using Google so you need this piece of code in your <head>

1

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4'></script>

and then you need to download the plugin and load it in your page:

1

<script type='text/javascript' src='/js/jquery.puzzleCarousel-0.3.js'></script>

At this point all you need is a list of images wrapped in a <div> – so basically a piece of HTML like this:

1
2
3
4
5
6
7
8
9

<div id="carousel" style="margin-top: 30px;">
<ul>
	<li><img title="Jerusalem - you can add a caption as title..." src="/images/puzzleCarousel/jeru1.jpg" alt="" /></li>
	<li><img src="/images/puzzleCarousel/rome1.jpg" alt="" />...or as text in the list item - this way you can also add some <a href="http://en.wikipedia.org/wiki/Rome">links to the wonderful Rome</a></li>
	<li><img src="/images/puzzleCarousel/paris1.jpg" alt="" /></li>
	<li><img title="Cairo - some fresh air!" src="/images/puzzleCarousel/cairo1.jpg" alt="" /></li>
	<li><img src="/images/puzzleCarousel/london1.jpg" alt="" />Lond<span style="color: red;">On</span> &lt;- HTML! :)</li>
</ul>
</div>

and then a tiny bit of JavaScript like this:

1
2
3

$(window).load(function() {
	jQuery("#carousel").puzzleCarousel({ 'gridColor' : '#372529', 'previews' : true });
});

(note that I used $(window).load since WebKit browsers don’t know image dimensions until the page is fully loaded and the plugin needs the image sizes to work correctly)

Anyway, that’s it: with this very simple code you can create your Puzzle Carousel – no need to know more, no need to create thumbnails by hand (they are “automagically” created on the fly), no need to thinker JavaScript/HTML/CSS

Flexibility
Obvviously, I was not happy with the “basic” version of the gallery and so I started adding features and variations. What if you wanted tiles to change in a boustrophedic way, not flashing but rather fading in and without previews? Simple! With the same <div> and <ul> used above just change the JavaScript a little bit:

1
2
3

$(window).load(function() {
	jQuery("#carousel").puzzleCarousel({ 'gridColor' : '#372529', 'transition' : 'fadeIn', 'transitionPattern' : 'boustro', 'previews' : false });
});

and here you are (click on image or use arrows to change image):

By the way, have you noticed that we are showing more than one gallery on the same page? Yeap, this plugin can be used as many times as you like on the same page – more on this in a post I’ll soon write…

Click’n'flip
A few more demos before listing all the properties and settings. This time we will change the tiles with a click of the mouse – and we can attach to each tile change a callback which receives the tile number and a true/false parameter if we have just changed the last tile. Let’s see it in action – just click on the image to “start” and then click on any tile to change it (you will see a different transition this time…).

First of all the code:

1
2
3

$(window).load(function() {
	jQuery("#carousel").puzzleCarousel({ 'gridColor' : '#372529', 'transition' : 'slideDown', 'transitionPattern' : 'click', 'previews' : false, 'transitionCallback' : 'tileFlipped' });
});

and then the carousel itself:

In this case we just created a small JavaScript function, like this:

1
2
3
4
5
6

function tileFlipped(tile, last) {
	$('#carousel3output').html('flipped tile: ' + tile);
	if (last) {
		$('#carousel3output').html($('#carousel3output').html() + ' - and it was the last one!');
	}
}

which gets called everytime a tile is changed (obviously this works with each transition type, we chose the “click” as it seems a bit more useful…)

Presets
If you don’t want to mess with all the settings and config options allowed by this plugin we created for you a few “presets” to have some handy transitions ready to roll.. One of the coolest one is “wave”

1
2
3

$(window).load(function() {
	jQuery("#carousel").puzzleCarousel({ 'preset' : 'wave' });
});

which produces something like:

Another nice one is “blind”:

1
2
3

$(window).load(function() {
	jQuery("#carousel").puzzleCarousel({ 'preset' : 'blind' });
});

(always click on image to start animation):

E allora?

E allora me lo sono fatto da solo. Ovviamente come ogni mio creazione è a dir poco spartana ma se serve anche a qualcun altro ecco il codice (se non specificate la URL il bottone prova a prenderlo dall’ HTTP_REFERRER, se c’è – per il titolo o lo specificate o nulla, mica gli IFRAME possono fare quello che gli pare eh!):
<iframe id="hackernews-iframe" frameborder="0" allowtransparency="true" scrolling="no" width="65" height="65" src="http://www.html5today.it/plugins/hackernews-button.php?href=URL&amp;title=TITOLO"></iframe>
che dovrebbe produrre una cosa tipo:

Fatemi sapere se a qualcuno piace, e se ci sono dei bug (maffiguriamoci!! ;)

Ovviamente ogni riferimento alla recente querelle tra Google e Facebook e al “trucco” suggerito da Facebook per inserire comunque i nostri contatti Gmail in Facebook dopo che Google ne aveva bloccato l’importazione per “mancaza di reciprocità” è TOTALMENTE CASUALE

Non so se e come questo cambierà le abitudini del navigatore (ho AdBlock quindi non ho capito se l’anteprima si sovrappone ad Adwords…), quello che mi sembra evidente è che cambiando continuamente il proprio layout e l’interfaccia del sito Google sta perdendo anche l’ultimo elemento positivo che gli era rimasto, la semplicità d’utilizzo

Per chi vuole leggerne qualcosina in più: http://googleblog.blogspot.com/2010/11/beyond-instant-results-instant-previews.html