Giveaway of the Day
AREA RISERVATA
username:
password:
Hai dimenticato la password?
Nessun problema. Inserisci il tuo username e clicca qui.
Il sistema te la invierà nuovamente al primo indirizzo email del tuo profilo.
Non lo hai impostato?
Posso ancora aiutarti. Mandami una email con il tuo username.
La rispedirò al mittente con la password il più presto possibile.
Non sei ancora registrato?
09/05/2012Effetto gray-out con jQuery
Preview di immagini con effetto gray-out


Simpaticissimo effetto di gray-out per il preview di immagini, ottenuto con l'ausilio della libreria jQuery, l'ottimo strumento javascript, non eccessivamente difficile da comprendere e ancora meno da usare, che implementa un framework mediante il quale è possibile disporre di un certo numero di funzioni che ci semplificano la vita per svariate manipolazioni dello stile degli elementi della nostra pagina web, altrimenti decisamente più complicate da ottenere (basterà notare con quante poche righe di codice otterremo l'effetto voluto).


Per gray-out s'intende portare in evidenza, ingrandendola, la nostra immagine al centro dello schermo, grigiando nel contempo tutti
gli altri elementi della pagina che finiscono nello sfondo. Un click ovunque riporterà l'immagine al posto suo.


Si tratta di un effetto, peraltro gradevole, che ci stiamo abituando a vedere sempre più spesso in rete e ora vedremo un esempio di come ottenerlo.
Iniziamo col definire lo script che, usando funzioni jQuery, governerà i vari stati dell'effetto:




<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript">
  jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
  }

  $(document).ready(function() {
    $("#miniatura img").click(function(e){

      $("#sfondo").css({"opacity" : "0.7"})
        .fadeIn("slow");

      $("#ingrandita").html("<img src='"+$(this).parent().attr("href")+"' alt='"+$(this).attr("alt")+"' /><br/>"+$(this).attr("rel")+"")
        .center()
        .fadeIn("slow");

      return false;
    });

    $(document).keypress(function(e){
      if(e.keyCode==27){
        $("#sfondo").fadeOut("slow");
        $("#ingrandita").fadeOut("slow");
      }
    });

    $("#sfondo").click(function(){
      $("#sfondo").fadeOut("slow");
      $("#ingrandita").fadeOut("slow");
    });

    $("#ingrandita").click(function(){
      $("#sfondo").fadeOut("slow");
      $("#ingrandita").fadeOut("slow");
    });

  });
</script>


Notare il link alla libreria jQuery (jquery-1.7.2.min.js), che precede lo script di controllo dell'effetto gray-out ed è necessario per caricare il framework. Qui stiamo assumendo che la libreria sia nella stessa cartella della nostra pagina.

La libreria usata qui è la 1.7.2, ma è possibile scaricare l'ultima versione aggiornata direttamente dal sito jQuery.


Preciso subito che la comprensione del codice jQuery e del nostro script in particolare non è l'obiettivo di questo articolo.
Chi volesse approfondire l'argomento troverà una barca di tutorial in merito sul web.


Qui ci interessa solo un codice il più possibile già pronto all'uso, per cui eventualmente ci limiteremo a sottolineare solo i punti dove è possibile apportare qualche semplice personalizzazione.


Definiamo ora qualche stile iniziale sugli elementi utilizzati:




<style>
img {
  border: none;
}
#miniatura img {
  cursor: pointer;
}
#ingrandita {
  display: none;
  position: absolute;
  background: #FFFFFF;
  padding: 5px;
  z-index: 10;
  min-height: 200px;
  min-width: 200px;
  color: #336699;
}
#sfondo{
  display: none;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #000000;
  z-index: 1;
}
</style>


L'effetto è stato preparato. Se ora vogliamo dotare di effetto gray-out un paio di immagini della nostra pagina, dovremo indicarle così:


<div align="center">
  <div id="miniatura">
    <h3>Click on the image</h3>
    <a href="ingrandita1.jpg"><img src="miniatura1.jpg" alt="immagine 1" rel="sottotitolo 1" /></a>
    <a href="ingrandita2.jpg"><img src="miniatura2.jpg" alt="immagine 2" rel="sottotitolo 2" /></a>
  </div>
<div id="ingrandita"></div>
  <div id="sfondo"></div>
</div>


e poi fare click su una delle immagini per vedere l'effetto, impreziosito anche da un effetto di fading che rende più gradevole le transizioni.

L'immagine mostrata sarà chiaramente una miniatura, mentre l'immagine in href sarà quella grande. Va da sè che se l'immagine è sempre la stessa, sia l'attributo href del tag A che l'attributo src del tag IMG avranno lo stesso nome, ma sarà opportuno rimpicciolire la IMG con width e height per farla sembrare una miniatura.
Analogamente converrà tenere sotto controllo anche l'ingrandimento per non correre il rischio di immagini troppo grandi, che questo script semplificato non gestisce. Per fare questo bisogna intervenire direttamente nello script, nella riga:

$("#ingrandita").html("<img src='"+$(this).parent().attr("href")+"' alt='"+$(this).attr("alt")+"' /><br/>"+$(this).attr("rel")+"")


che può diventare

$("#ingrandita").html("<img width=500 height=400 src='"+$(this).parent().attr("href")+"' alt='"+$(this).attr("alt")+"' /><br/>"+$(this).attr("rel")+"")


dove abbiamo imposto la dimensione 500x400 all'immagine ingrandita.

Una ulteriore personalizzazione interna allo script è il grado di opacità con cui viene grigiato il fondo, che è definito nella riga

$("#sfondo").css({"opacity" : "0.7"})


Tale valore può variare da 0.0 a 0.9, 0.7 è quello consigliato ma si può provare per tentativi fino a trovare quello che piace di più (soprattutto se la grigiatura non è basata su un background nero).
Ecco un esempio di come lo script lavora:

Clicca sulle immagini

lagocascata


Non entreremo nel merito delle personalizzazioni agli stili iniziali (essendo al di fuori degli scopi di quest'articolo), e dovrebbe inoltre essere evidente che, a prescindere da come jQuery faccia il suo lavoro, 'miniatura' è lo stile applicato alle miniature, 'ingrandita' quello applicato all'immagine ingrandita e 'sfondo' quello applicato allo sfondo grigiato. Quindi se, invece della cornice bianca, l'immagine ingrandita la vogliamo con la cornice rossa, cambieremo il colore all'attributo background dello stile 'ingrandita'.
La cosa che invece merita attenzione (perchè potrebbe sfuggire) riguarda l'attributo background dello stile 'sfondo', poichè il colore di fondo originale della nostra pagina ne potrebbe influenzare in modo cruciale la scelta del colore assegnato.
Normalmente dovrebbe essere nero (#000000) così che l'opacizzazione eseguita da jQuery possa realizzare un buon grigio, e questo è indubbiamente vero quando applicato su pagine con sfondo originale bianco o comunque chiaro. Se invece il colore originale di fondo delle vostre pagine dovesse essere nero (come le mie) o molto scuro, sarete probabilmente costretti a cambiare il colore di background dello stile 'sfondo' (come ho fatto io) altrimenti potreste perdere quasi del tutto l'effetto visivo di oscuramento dello sfondo (avete mai provato a oscurire il nero?).
Per farla breve, più lo sfondo originale delle pagine è scuro, meno performante è l'assegnazione di un background nero (#000000) allo stile 'sfondo'. Suggerisco di provare empiricamente valori a crescere sulla scala dei grigi, fino a trovare quello che sortisce l'effetto visivo ottimale (#101010, #202020, #303030, ...)
Sei il visitatore n.  3100849  -  Ci sono  8  utenti in linea in questo momento
2006-2018 pabloNet - pablo@pablonet.it. Questo sito usa i cookie       Ulteriori informazioni

Questo sito usa i cookieACCETTAKOUlteriori informazioni