Aggiungere i link alle immagini con OptimalFade

Mi è capitato di dover fare il restyling di un sito. Questo sito caricava già tutto un set di plugin jQuery, tra questi pure un fader di immagini: OptimalFade
Mi sono trovato nell’esigenza di dover aggiungere dei link ad alcune immagini su cui veniva eseguito il fade.
Nativamente OptimalFade questo non lo consente. A questo punto i miei dubbi erano:

• Caricare un altro plugin oltre a questo e quindi appesantire i tempi di caricamento della pagina?
• Sostituire il plugin e quindi modificare gli altri div in cui avviene il fade presenti nel sito?
• Modificare lo script?

Niente di tutto questo.
Ho implementato lo script con una funzione creata ad hoc.

Andiamo a vedere nel dettaglio. Questa è la funzione scritta da l’autore del plugin

<script type="text/javascript">
// <![CDATA[
$(document).ready(function(){

var array_immagini = new Array();

array_immagini[0]="image/1.jpg";
array_immagini[1]="image/2.jpg";
array_immagini[2]="image/3.jpg";
array_immagini[3]="image/4.jpg";

$("#fade_uno").OptimalFadeImage({
          array_image : array_immagini,
          width : 150,
          height : 124,
          fade_intervall : 'medium',
          fade_step : 'fast',
          pause_change : 'slow'

});

});
// ]]>
</script>

Questa è la mia versione:

<script type="text/javascript">
// <![CDATA[
this.img_link = function(id_element,array_immagini,array_link){    
var z = $("#"+id_element+"_img_uno").css("opacity");
var k = $("#"+id_element+"_img_due").css("opacity");

if ((k>z)&&($("#link_to_page").length>0)) {
var src_url = $("#"+id_element+"_img_due").attr("src");
} else {
var src_url = $("#"+id_element+"_img_uno").attr("src");
}

for (var i in array_immagini) {
  if (array_immagini[i]==src_url) {
    if ($("#link_to_page").length>0) {
    $("#link_to_page").attr('href', array_link[i]);
    } else {
    $("#"+id_element+"_img_uno").wrap('<a id="link_to_page" href="' + array_link[i] + '" /></a>');
    }
  }
}

setTimeout(function() { img_link(id_element,array_immagini,array_link); },250);
};

$(document).ready(function(){

var array_immagini = new Array();

array_immagini[0]="image/1.jpg";
array_immagini[1]="image/2.jpg";
array_immagini[2]="image/3.jpg";
array_immagini[3]="image/4.jpg";

var array_link = new Array();

array_link[0]="http://miosito.ext/pagina1.html";
array_link[1]="http://miosito.ext/pagina2.html";
array_link[2]="http://miosito.ext/pagina3.html";
array_link[3]="http://miosito.ext/pagina3.html";

$("#fade_uno").OptimalFadeImage({
          array_image : array_immagini,
          width : 150,
          height : 124,
          fade_intervall : 'medium',
          fade_step : 'fast',
          pause_change : 'slow'

});

img_link('fade_uno',array_immagini,array_link);

});
// ]]>
</script>

Di fatto non si fa altro che dichiarare un nuovo array che conterrà i link a cui far puntare le immagini e subito la chiusura della chiamata alla funzione OptimalFadeImage({...}); si richiama la funzione img_link(array_immagini,array_link); passando come argomenti prima l’id dell’elemento che contiene il fader e poi i due array, quello delle immagini e quello dei link.

Scarica la demo.

Related Posts:

• No Related Posts