Pubblicato il 28/06/11e aggiornato il

Galleria di foto con strumenti di navigazione per Blogger.

Questo effetto si deve a Dhtheumeuleu ed è stato chiamato dall'autore "The trip of a lifetime". Non si tratta di un vero e proprio slideshow ma il concetto è quello di inserire le immagini una accanto all'altra in un numero di 9 unità. Attraverso il navigatore posto sulla sinistra e, tramite gli effetti di transizione, si potranno scorrere tutte manualmente. Per avere una idea del suo funzionamento andate nel post di

effetto the trip of a lifetime

Quando si passa sopra con il mouse a uno dei nove quadratini questo si colora di rosso e, se ci si clicca sopra, compare l'immagine relativa con effetto scorrimento. Alla foto visualizzata nella griglia corrisponde un quadratino di colore bianco. Le proprietà che sovrintendono alle transizioni sono supportate da Firefox, Chrome, Opera e Safari. Con Internet Explorer la galleria di foto funziona ugualmente ma è meno suggestiva. Per la installazione si va su Design > Modifica HTML e si salva il modello completo per un eventuale backup di ripristino. Si cerca la riga </head> e, immediatamente sopra si incolla

<!-- The Trip of the lifetime start -->
<style>
  #contenitore {
    background-color: #000000;
    border-radius: 4px;
    box-shadow: 0 0 5px #AABBCC inset;
    height: 400px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    width: 550px;
  }
  #contenitore br {display:none;}
  #screen {
    height: 400px;
    left: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
    top: 0;
    width: 550px;
  }
  #pane {
    font-size:0;
    height: 1200px;
    position: absolute;
    top: 0;left: 0;
    width: 1650px;
    -moz-transition:all 0.7s ease 0s;
    -webkit-transition:all 0.7s ease 0s;
    -o-transition:all 0.7s ease 0s;
    transition:all 0.7s ease 0s;
  }
  #pane img {
    height: 400px;
    width: 550px;
  }
  #nav {
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    left: 0;
    margin: 0;
    padding: 5px;
    position: absolute;
    top: 120px;
    width: 93px;
  }
  #nav a {
    background-color:#333;
    float: left;
    height: 25px;
    margin: 3px;
    overflow: hidden;
    text-decoration: none;
    width: 25px;
  }
  #nav a:hover, #nav a:focus { background: #FF0000; }
  #nav a:visited { background-color: #666666; }
  #nav a:active, #nav a.active { background: #FFFFFF; }
  .title {
    color: #FFFFFF;
    font-family: Helvetica;
    font-size:12px;
    font-weight: bold;
    margin-bottom: 0.5em;
    text-align:center;
  }
</style>
<noscript><a href='http://goo.gl/8wOvy' target='_blank'><span style='font-size: x-small;'>The trip of a lifetime</span></a></noscript>
<script>
function dtht(l,t) {
  var obj = document.getElementById(&quot;pane&quot;);
  obj.style.left = -l + &quot;px&quot;;
  obj.style.top = -t + &quot;px&quot;;
  return false;
}
</script>
<!-- The trip of the lifetime end - www.ideepercomputeredinternet.com -->

Sono state scelte delle immagini di dimensione 550x400 pixel ma si può optare anche per altri valori. Considerando che vengono inserite in una tabella di tre righe per tre colonne in questo caso la dimensione totale della immagine risultante sarà di 1200x1650 pixel. Si possono fare moltissime altre personalizzazioni che riguardano per esempio la posizione degli strumenti di navigazione. Per brevità non mi dilungo ulteriormente ma si può agire anche sui colori di sfondo, sul colore del quadratino puntato dal mouse ( #FF0000) e sul colore di quello attivo (#FFFFFF). Per ulteriori informazioni al riguardo consultate il post sui codici dei colori. Si salva il modello.

La galleria fotografica dovrà essere inserita in Design > Aggiungi un gadget > HTML/Javascript. Si può anche collocare in un post o in una pagina statica inserendo il codice in Modalità HTML. La struttura della galleria sarà di questo tipo

<div id="contenitore">
  <div id="screen">
    <div id="pane">
      <img src="https://lh3.googleusercontent.com/-OkZXFPveFz8/TgmN-z72sdI/AAAAAAAATng/AC-u33jbIlI/natura1.jpg"/>
      <img src="https://lh6.googleusercontent.com/-en5FTc2uOes/TgmOD0dVTpI/AAAAAAAATno/pBHqokAj7AE/natura2.jpg"/>
      <img src="https://lh4.googleusercontent.com/-hYfwIGwSWq4/TgmOIirwnpI/AAAAAAAATns/K7U7dDxzLZg/natura3.jpg"/>
      <img src="https://lh5.googleusercontent.com/-zHSvyGxPm_I/TgmON28AhAI/AAAAAAAATnw/9y7iHUUnEic/natura4.jpg"/>
      <img src="https://lh6.googleusercontent.com/-IuIqpY5oABg/TgmOUEhY_HI/AAAAAAAATn0/7F4tIl9BEeg/natura5.jpg"/>
      <img src="https://lh3.googleusercontent.com/-UmyEDr_V9ao/TgmOaGdZChI/AAAAAAAATn4/0b8WVjnQwTU/natura6.jpg"/>
      <img src="https://lh6.googleusercontent.com/-EVIKGPJbfs8/TgmOcc4feTI/AAAAAAAATn8/ygequED2adA/natura7.jpg"/>
      <img src="https://lh6.googleusercontent.com/-gk4BVpYUVYo/TgmOeW5XY9I/AAAAAAAAToA/EvG_Rl0Pn3g/natura8.jpg"/>
      <img src="https://lh5.googleusercontent.com/-r-1zf9yFAVQ/TgmOgtbdJtI/AAAAAAAAToE/Y6T0ozrVZ1c/natura9.jpg"/>
    </div>
    <div id="nav">
      <div class="title">immagini di natura</div>
      <a href="javascript:void(0);" onclick="dtht(0,0);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(550,0);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(1100,0);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(0,400);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(550,400);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(1100,400);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(0,800);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(550,800);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(1100,800);" class="scrollTo"></a>
    </div>
  </div>
</div>

dove gli URL colorati di rosso sono quelli delle immagini caricate su Picasa. L'espressione in blu rappresenta il titolo della galleria e può essere modificata. Se volete usare delle immagini di dimensioni diverse da quelle proposte, ricordatevi di cambiare le coppie di numeri colorati di viola. Si tratta delle coordinate di inserimento e visualizzazione delle singole immagini. Per avere una idea più precisa di come procedere ecco lo schema usato in questa demo

schema-galleria-immagini 

Ciascuna delle nove foto ha le proprie coordinate iniziali che dipendono dalle dimensioni delle altre che sono state inserite in precedenza. Per ovvie ragioni è opportuno scegliere le foto tutte della stessa larghezza e altezza.





6 commenti :

  1. Ernesto..sei il solito drago! Quand'è che ance su blogger sarà possibile inserire una photogallery (o un uno slideshow simile a questo) all'interno dei singoli post? Secondo me è è un bell handicap..

    Ciao e complimenti

    Pier Paolo

    RispondiElimina
  2. @zeronews
    @Jago Delarge
    Son contento che vi sia piaciuto. Quelli di Blogger pensano a creare funzionalità che possono gestire interamente più che a dare la possibilità di sperimentare cose nuove.

    RispondiElimina
  3. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  4. Ciao e complimenti per l'articolo, innanzitutto. Vorrei sapere se è possibile in qualche modo inserire piu di 9 immagini. Grazie

    RispondiElimina
  5. @Milla
    No. Come vedi la galleria è stata creata per 9 immagini che devono essere con precise distanze tra di loro.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.