Pubblicato il 09/12/12 - aggiornato il  | 18 commenti :

Galleria di immagini animate con numeri di pagina per la navigazione.

Come creare una galleria di immagini in una pagina statica di Blogger con effetti di animazione e pulsanti di navigazione tra le varie pagine in cui è stata suddivisa la galleria.
Gli utenti di Blogger sono soliti usare le pagine statiche per creare delle Gallerie Fotografiche e associare ciascuna immagine all'articolo da cui è stata estratta. Nel caso si abbiano molte immagini da mostrare il navigatore è costretto a scorrere la pagina fino in fondo per visualizzarle tutte. Vediamo come si possa ovviare a questo inconveniente inserendo un sistema di navigazione in modo da suddividere le immagini in più pagine che possono essere navigate dalla stessa pagina statica.
Oltre ai numeri di pagina si possono anche inserire effetti di animazione e il plugin Lazy Load per favorire un caricamento della pagina più rapido. La Galleria di immagini che vado a illustrare è totalmente personalizzabile e si deve al lavoro di diverse persone le linkerò a fine articolo.



L'aspetto della Galleria di Foto sarà il seguente



galleria-immagini-navigazione
Dopo aver salvato il template si va su Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin> . Subito sopra si incolla il seguente codice


/*Galleria di Immagini con Numeri di Pagina */
ul.galleria{
width:100%;
margin:10px 5px;
padding:0}
ul.galleria li{
height:160px; /*Altezza della miniatura*/
width:200px/*Larghezza della miniatura*/
display:block;
margin:0 3px 5px 0; /* Separazione tra le miniature*/
padding:0;
float:left;
list-style:none;
position:relative;
overflow:hidden;} 
ul.galleria a{
background:none;
margin:0;
padding:0;
color:#fff;
text-align:center;
white-space:nowrap;}
ul.galleria  li img{
width:200px; /* Larghezza Immagine*/
height:160px; /*Altezza Immagine*/
margin:0;
padding:0;
border:none;
}
ul.galleria span{
width:200px; /*Stessa larghezza della miniatura*/
left:0px; /*Larghezza del bordo*/
margin:0;
padding:3px 0 3px 0;
background:#000;
bottom:-8px;
left:0px; filter:alpha(opacity=0);
opacity:0;
overflow:hidden;
cursor:pointer; position:absolute;
-webkit-transition:all .25s ease; -moz-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease;}
ul.galleria  a:hover span{ left:10px; bottom:0; opacity:.9;filter:alpha(opacity=90)}
ul.galleria  a span:hover{color:#cec20b} /*Colore del testo al puntare del cursore */
/*Strumenti di Navigazione*/
.holder {
  margin: 15px 0;
}
.holder a {
  font-size: 12px;
  cursor: pointer;
  margin: 0 5px;
  color: #333;
}
.holder a:hover {
  background-color: #222;
  color: #fff;
}
.holder a.jp-previous { margin-right: 15px; }
.holder a.jp-next { margin-left: 15px; }
.holder a.jp-current, a.jp-current:hover {
  color: #FF4242;
  font-weight: bold;
}
.holder a.jp-disabled, a.jp-disabled:hover {
  color: #bbb;
}
.holder a.jp-current, a.jp-current:hover,
.holder a.jp-disabled, a.jp-disabled:hover {
  cursor: default;
  background: none;
}
.holder span { margin: 0 5px; }
/*Animate.css - http://daneden.me/animateLICENSED UNDER THE  MIT LICENSE (MIT)Copyright (c) 2011 Dan Eden*/           .animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s}
.animated.hinge{-webkit-animation-duration:2s; -moz-animation-duration:2s; -ms-animation-duration:2s; -o-animation-duration:2s; animation-duration:2s}
@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05)}70%{-webkit-transform:scale(.9)}100%{-webkit-transform:scale(1)}}@-moz-keyframes bounceIn{0%{opacity:0;-moz-transform:scale(.3)}50%{opacity:1;-moz-transform:scale(1.05)}70%{-moz-transform:scale(.9)}100%{-moz-transform:scale(1)}}@-o-keyframes bounceIn{0%{opacity:0;-o-transform:scale(.3)}50%{opacity:1;-o-transform:scale(1.05)}70%{-o-transform:scale(.9)}100%{-o-transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}100%{transform:scale(1)}}.bounceIn{-webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-o-animation-name:bounceIn;animation-name:bounceIn;}
/*Fine CSS Galleria con Numeri di Pagina */

Ho colorato di rosso i parametri più importanti da personalizzare mentre i commenti sul loro significato sono colorati di verde. Si cerca quindi la riga </head> e, subito sopra, si incolla


<!-- Galleria con Paginazione e Animazione Inizio -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[                                                   
/**
  * jQuery jPages v0.7
  * Client side pagination with jQuery
  * http://luis-almeida.github.com/jPages
  *
  * Licensed under the MIT license.
  * Copyright 2012 Luís Almeida
  * https://github.com/luis-almeida
  */

  ;(function($,window,document,undefined){var name="jPages",instance=null,defaults={containerID:"",first:false,previous:" previous",next:"next",last:false,links:"numeric",startPage:1,perPage:10,midRange:5,startRange:1,endRange:1,keyBrowse:false,scrollBrowse:false,pause:0,clickStop:false,delay:50,direction:"forward",animation:"",fallback:400,minHeight:true,callback:undefined};function Plugin(element,options){this.options=$.extend({},defaults,options);this._container=$("#"+this.options.containerID);if(!this._container.length)return;this.jQwindow=$(window);this.jQdocument=$(document);this._holder=$(element);this._nav={};this._first=$(this.options.first);this._previous=$(this.options.previous);this._next=$(this.options.next);this._last=$(this.options.last);this._items=this._container.children(":visible");this._itemsShowing=$([]);this._itemsHiding=$([]);this._numPages=Math.ceil(this._items.length/this.options.perPage);this._currentPageNum=this.options.startPage;this._clicked=false;this._cssAnimSupport=this.getCSSAnimationSupport();this.init();}Plugin.prototype={constructor:Plugin,getCSSAnimationSupport:function(){var animation=false,animationstring='animation',keyframeprefix='',domPrefixes='Webkit Moz O ms Khtml'.split(' '),pfx='',elm=this._container.get(0);if(elm.style.animationName)animation=true;if(animation===false){for(var i=0;i<domPrefixes.length;i++){if(elm.style[domPrefixes[i]+'AnimationName']!==undefined){pfx=domPrefixes[i];animationstring=pfx+'Animation';keyframeprefix='-'+pfx.toLowerCase()+'-';animation=true;break;}}}return animation;},init:function(){this.setStyles();this.setNav();this.paginate(this._currentPageNum);this.setMinHeight();},setStyles:function(){var requiredStyles="<style>"+".jp-invisible { visibility: hidden !important; } "+".jp-hidden { display: none !important; }"+"</style>";$(requiredStyles).appendTo("head");if(this._cssAnimSupport&&this.options.animation.length)this._items.addClass("animated jp-hidden");else this._items.hide();},setNav:function(){var navhtml=this.writeNav();this._holder.each(this.bind(function(index,element){var holder=$(element);holder.html(navhtml);this.cacheNavElements(holder,index);this.bindNavHandlers(index);this.disableNavSelection(element);},this));if(this.options.keyBrowse)this.bindNavKeyBrowse();if(this.options.scrollBrowse)this.bindNavScrollBrowse();},writeNav:function(){var i=1,navhtml;navhtml=this.writeBtn("first")+this.writeBtn("previous");for(;i<=this._numPages;i++){if(i===1&&this.options.startRange===0)navhtml+="<span>...</span>";if(i>this.options.startRange&&i<=this._numPages-this.options.endRange)navhtml+="<a href='#' class='jp-hidden'>";else
navhtml+="<a>";switch(this.options.links){case"numeric":navhtml+=i;break;case"blank":break;case"title":var title=this._items.eq(i-1).attr("data-title");navhtml+=title!==undefined?title:"";break;}navhtml+="</a>";if(i===this.options.startRange||i===this._numPages-this.options.endRange)navhtml+="<span>...</span>";}navhtml+=this.writeBtn("next")+this.writeBtn("last")+"</div>";return navhtml;},writeBtn:function(which){return this.options[which]!==false&&!$(this["_"+which]).length?"<a class='jp-"+which+"'>"+this.options[which]+"</a>":"";},cacheNavElements:function(holder,index){this._nav[index]={};this._nav[index].holder=holder;this._nav[index].first=this._first.length?this._first:this._nav[index].holder.find("a.jp-first");this._nav[index].previous=this._previous.length?this._previous:this._nav[index].holder.find("a.jp-previous");this._nav[index].next=this._next.length?this._next:this._nav[index].holder.find("a.jp-next");this._nav[index].last=this._last.length?this._last:this._nav[index].holder.find("a.jp-last");this._nav[index].fstBreak=this._nav[index].holder.find("span:first");this._nav[index].lstBreak=this._nav[index].holder.find("span:last");this._nav[index].pages=this._nav[index].holder.find("a").not(".jp-first, .jp-previous, .jp-next, .jp-last");this._nav[index].permPages=this._nav[index].pages.slice(0,this.options.startRange).add(this._nav[index].pages.slice(this._numPages-this.options.endRange,this._numPages));this._nav[index].pagesShowing=$([]);this._nav[index].currentPage=$([]);},bindNavHandlers:function(index){var nav=this._nav[index];nav.holder.bind("click.jPages",this.bind(function(evt){var newPage=this.getNewPage(nav,$(evt.target));if(this.validNewPage(newPage)){this._clicked=true;this.paginate(newPage);}evt.preventDefault();},this));if(this._first.length){this._first.bind("click.jPages",this.bind(function(){if(this.validNewPage(1)){this._clicked=true;this.paginate(1);}},this));}if(this._previous.length){this._previous.bind("click.jPages",this.bind(function(){var newPage=this._currentPageNum-1;if(this.validNewPage(newPage)){this._clicked=true;this.paginate(newPage);}},this));}if(this._next.length){this._next.bind("click.jPages",this.bind(function(){var newPage=this._currentPageNum+1;if(this.validNewPage(newPage)){this._clicked=true;this.paginate(newPage);}},this));}if(this._last.length){this._last.bind("click.jPages",this.bind(function(){if(this.validNewPage(this._numPages)){this._clicked=true;this.paginate(this._numPages);}},this));}},disableNavSelection:function(element){if(typeof element.onselectstart!="undefined")element.onselectstart=function(){return false;};else if(typeof element.style.MozUserSelect!="undefined")element.style.MozUserSelect="none";else
element.onmousedown=function(){return false;};},bindNavKeyBrowse:function(){this.jQdocument.bind("keydown.jPages",this.bind(function(evt){var target=evt.target.nodeName.toLowerCase();if(this.elemScrolledIntoView()&&target!=="input"&&target!="textarea"){var newPage=this._currentPageNum;if(evt.which==37)newPage=this._currentPageNum-1;if(evt.which==39)newPage=this._currentPageNum+1;if(this.validNewPage(newPage)){this._clicked=true;this.paginate(newPage);}}},this));},elemScrolledIntoView:function(){var docViewTop,docViewBottom,elemTop,elemBottom;docViewTop=this.jQwindow.scrollTop();docViewBottom=docViewTop+this.jQwindow.height();elemTop=this._container.offset().top;elemBottom=elemTop+this._container.height();return((elemBottom>=docViewTop)&&(elemTop<=docViewBottom));},bindNavScrollBrowse:function(){this._container.bind("mousewheel.jPages DOMMouseScroll.jPages",this.bind(function(evt){var newPage=(evt.originalEvent.wheelDelta||-evt.originalEvent.detail)>0?(this._currentPageNum-1):(this._currentPageNum+1);if(this.validNewPage(newPage)){this._clicked=true;this.paginate(newPage);}evt.preventDefault();return false;},this));},getNewPage:function(nav,target){if(target.is(nav.currentPage))return this._currentPageNum;if(target.is(nav.pages))return nav.pages.index(target)+1;if(target.is(nav.first))return 1;if(target.is(nav.last))return this._numPages;if(target.is(nav.previous))return nav.pages.index(nav.currentPage);if(target.is(nav.next))return nav.pages.index(nav.currentPage)+2;},validNewPage:function(newPage){return newPage!==this._currentPageNum&&newPage>0&&newPage<=this._numPages;},paginate:function(page){var itemRange,pageInterval;itemRange=this.updateItems(page);pageInterval=this.updatePages(page);this._currentPageNum=page;if($.isFunction(this.options.callback))this.callback(page,itemRange,pageInterval);this.updatePause();},updateItems:function(page){var range=this.getItemRange(page);this._itemsHiding=this._itemsShowing;this._itemsShowing=this._items.slice(range.start,range.end);if(this._cssAnimSupport&&this.options.animation.length)this.cssAnimations(page);else this.jQAnimations(page);return range;},getItemRange:function(page){var range={};range.start=(page-1)*this.options.perPage;range.end=range.start+this.options.perPage;if(range.end>this._items.length)range.end=this._items.length;return range;},cssAnimations:function(page){clearInterval(this._delay);this._itemsHiding.removeClass(this.options.animation+" jp-invisible").addClass("jp-hidden");this._itemsShowing.removeClass("jp-hidden").addClass("jp-invisible");this._itemsOriented=this.getDirectedItems(page);this._index=0;this._delay=setInterval(this.bind(function(){if(this._index===this._itemsOriented.length)clearInterval(this._delay);else{this._itemsOriented.eq(this._index).removeClass("jp-invisible").addClass(this.options.animation);}this._index=this._index+1;},this),this.options.delay);},jQAnimations:function(page){clearInterval(this._delay);this._itemsHiding.addClass("jp-hidden");this._itemsShowing.fadeTo(0,0).removeClass("jp-hidden");this._itemsOriented=this.getDirectedItems(page);this._index=0;this._delay=setInterval(this.bind(function(){if(this._index===this._itemsOriented.length)clearInterval(this._delay);else{this._itemsOriented.eq(this._index).fadeTo(this.options.fallback,1);}this._index=this._index+1;},this),this.options.delay);},getDirectedItems:function(page){var itemsToShow;switch(this.options.direction){case"backwards":itemsToShow=$(this._itemsShowing.get().reverse());break;case"random":itemsToShow=$(this._itemsShowing.get().sort(function(){return(Math.round(Math.random())-0.5);}));break;case"auto":itemsToShow=page>=this._currentPageNum?this._itemsShowing:$(this._itemsShowing.get().reverse());break;default:itemsToShow=this._itemsShowing;}return itemsToShow;},updatePages:function(page){var interval,index,nav;interval=this.getInterval(page);for(index in this._nav){if(this._nav.hasOwnProperty(index)){nav=this._nav[index];this.updateBtns(nav,page);this.updateCurrentPage(nav,page);this.updatePagesShowing(nav,interval);this.updateBreaks(nav,interval);}}return interval;},getInterval:function(page){var neHalf,upperLimit,start,end;neHalf=Math.ceil(this.options.midRange/2);upperLimit=this._numPages-this.options.midRange;start=page>neHalf?Math.max(Math.min(page-neHalf,upperLimit),0):0;end=page>neHalf?Math.min(page+neHalf-(this.options.midRange%2>0?1:0),this._numPages):Math.min(this.options.midRange,this._numPages);return{start:start,end:end};},updateBtns:function(nav,page){if(page===1){nav.first.addClass("jp-disabled");nav.previous.addClass("jp-disabled");}if(page===this._numPages){nav.next.addClass("jp-disabled");nav.last.addClass("jp-disabled");}if(this._currentPageNum===1&&page>1){nav.first.removeClass("jp-disabled");nav.previous.removeClass("jp-disabled");}if(this._currentPageNum===this._numPages&&page<this._numPages){nav.next.removeClass("jp-disabled");nav.last.removeClass("jp-disabled");}},updateCurrentPage:function(nav,page){nav.currentPage.removeClass("jp-current");nav.currentPage=nav.pages.eq(page-1).addClass("jp-current");},updatePagesShowing:function(nav,interval){var newRange=nav.pages.slice(interval.start,interval.end).not(nav.permPages);nav.pagesShowing.not(newRange).addClass("jp-hidden");newRange.not(nav.pagesShowing).removeClass("jp-hidden");nav.pagesShowing=newRange;},updateBreaks:function(nav,interval){if(interval.start>this.options.startRange||(this.options.startRange===0&&interval.start>0))nav.fstBreak.removeClass("jp-hidden");else nav.fstBreak.addClass("jp-hidden");if(interval.end<this._numPages-this.options.endRange)nav.lstBreak.removeClass("jp-hidden");else nav.lstBreak.addClass("jp-hidden");},callback:function(page,itemRange,pageInterval){var pages={current:page,interval:pageInterval,count:this._numPages},items={showing:this._itemsShowing,oncoming:this._items.slice(itemRange.start+this.options.perPage,itemRange.end+this.options.perPage),range:itemRange,count:this._items.length};pages.interval.start=pages.interval.start+1;items.range.start=items.range.start+1;this.options.callback(pages,items);},updatePause:function(){if(this.options.pause&&this._numPages>1){clearTimeout(this._pause);if(this.options.clickStop&&this._clicked)return;else{this._pause=setTimeout(this.bind(function(){this.paginate(this._currentPageNum!==this._numPages?this._currentPageNum+1:1);},this),this.options.pause);}}},setMinHeight:function(){if(this.options.minHeight&&!this._container.is("table, tbody")){setTimeout(this.bind(function(){this._container.css({"min-height":this._container.css("height")});},this),1000);}},bind:function(fn,me){return function(){return fn.apply(me,arguments);};},destroy:function(){this.jQdocument.unbind("keydown.jPages");this._container.unbind("mousewheel.jPages DOMMouseScroll.jPages");if(this.options.minHeight)this._container.css("min-height","");if(this._cssAnimSupport&&this.options.animation.length)this._items.removeClass("animated jp-hidden jp-invisible "+this.options.animation);else this._items.removeClass("jp-hidden").fadeTo(0,1);this._holder.unbind("click.jPages").empty();}};$.fn[name]=function(arg){var type=$.type(arg);if(type==="object"){if(this.length&&!$.data(this,name)){instance=new Plugin(this,arg);this.each(function(){$.data(this,name,instance);});}return this;}if(type==="string"&&arg==="destroy"){instance.destroy();this.each(function(){$.removeData(this,name);});return this;}if(type==='number'&&arg%1===0){if(instance.validNewPage(arg))instance.paginate(arg);return this;}return this;};})(jQuery,window,document);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
     $(function() {
     $("div.holder").jPages({
      containerID: "itemContainer",
      previous: "← Precedente",
      next: "Seguente →",
      perPage: 8,
      midRange: 5,
      animation: "bounceIn"
    });
  });
//]]>
  </script>
<!-- Galleria con Paginazione e Animazione Fine -->

Finalmente si salva il modello. Le personalizzazioni più rilevanti dei due codici riguardano:
  1. La dimensione delle miniature è opportuno calcolarla in funzione di quella delle immagini originali in modo da non avere effetto di distorsione. In questo caso 200 pixel di larghezza e 160 pixel di altezza significano un rapporto 5:4 tra le due dimensioni
  2. Il background scuro che si vede in fondo alla miniatura quando si punta con il mouse può essere allineato alla foto modificando il valore left:10px; e varia in funzione dei modelli
  3. Tutti i colori possono essere personalizzati modificando il loro codice esadecimale
  4. Se la libreria JQuery fosse già presente nel modello si può evitare di inserire lo script evidenziato di giallo. E' comunque sempre opportuno aggiornare JQuery all'ultima versione.
  5. Le espressioni ← Precedente e Seguente → possono essere sostituite da altre
  6. perPage: 8 specifica il numero di miniature da visualizzare per ogni pagina
  7. midRange: 5 è il numero di link che saranno visibili durante la navigazione. Se per esempio avessimo creato 20 pagine si vedrebbe ← Precedente 1 2 3 4 5 … 20 Seguente →  
  8. animation: "bounceIn" rappresenta il tipo di animazione del plugin Animate.CSS. Tale riga può essere eliminata se non ci interessano effetti di animazione
Dopo questa installazione si può passare a editare la Galleria andando su Bacheca > Pagine > Nuova Pagina > Pagina vuota. Si digita il Titolo della pagina e si va su HTML che si trova sulla sinistra accanto a Scrivi, quindi si incolla un codice come questo

<div class="holder">
</div>
<ul id="itemContainer" class="galleria">
<li><a href="URL DEL POST"><img border="0" src="URL DELLA IMMAGINE" /><span style="border:0;">Titolo o Descrizione</span></a>
< /li>
<li><a href="URL DEL POST"><img border="0" src="URL DELLA IMMAGINE" /><span style="border:0;">Titolo o Descrizione</span></a>
< /li>
<li><a href="URL DEL POST"><img border="0" src="URL DELLA IMMAGINE" /><span style="border:0;">Titolo o Descrizione</span></a>
< /li>

</ul>

dove mi sono limitato a inserire solo tre immagini come esempio ma se ne possono mettere quante se ne vogliono aggiungendo altre righe con la stessa sintassi di quelle evidenziate dove al posto di URL DEL POST va incollato l'indirizzo dell'articolo da collegare a quella data immagine e al posto di URL DELLA IMMAGINE il link diretto alla foto precedentemente caricata su Picasa o su altro hosting.
Fonti | JPages - Animate.CSS - Compartidísimo


18 commenti :

  1. Facci qualche guida su come ottimizzare al meglio i permalink e sue varie opzioni propone...sarebbe utile e gradita!!!

    RispondiElimina
    Risposte
    1. @IvanDeFelice
      Più che guida basta solo un po' di buon senso. Al limite si può usare Google Trends
      http://www.ideepercomputeredinternet.com/2012/11/google-trends.html
      Comunque ci penserò :)

      Elimina
  2. mmmm sarebbe utile a fine anno anziche fare tutte le slide per la raccolta di foto sfida annuale che indico, ma è davvero un lavoraccio ......non so se mi conviene, comunque sempre utilissimi i tuoi articoli, complimenti!

    RispondiElimina
  3. Che carina :) C'è un effetto animato più soft? Tipo in entrata dal bianco lentamente?

    RispondiElimina
    Risposte
    1. @SoffioDiDea
      Gli effetti di animazione possibili li puoi trovare in questa pagina
      http://daneden.me/animate/
      Quando clicchi sopra a un effetto vedi la demo I fight for the user che si muove di conseguenza. Puoi provare a modificare tutte le occorrenze di
      bounceIn
      con il nome dell'effetto che hai scelto per vedere su funziona.

      Elimina
    2. @SoffioDiDea
      Meglio ancora vai su Create Custom Build e scaricati il CSS dell'effetto prescelto quindi sostituiscilo a quello di BounceIn

      Elimina
  4. scusami ernesto ho visto la tua galleria demo ,ma c'è possibilità di farla a 2 colonne e con foto che siano almeno il triplo delle tue che hai postato come demo?

    grazie,buona serata

    RispondiElimina
    Risposte
    1. Le dimensioni delle miniature sono state impostate in questo modo
      height:160px; /*Altezza della miniatura*/
      width:200px; /*Larghezza della miniatura*/
      nulla vieta di cambiarle. Poi bisognerà vedere se tutto torna tutto il resto del layout. Se vuoi immagini più grandi prova con queste
      http://www.ideepercomputeredinternet.com/2011/04/slideshow-di-immagini-con-descrizione-e.html
      http://www.ideepercomputeredinternet.com/2011/03/galleria-di-immagini-coin-slider-con.html
      http://www.ideepercomputeredinternet.com/2013/05/galleria-immagini-tre-dimensioni.html
      http://www.ideepercomputeredinternet.com/2011/06/galleria-di-foto-con-strumenti-di.html
      http://www.ideepercomputeredinternet.com/2013/02/table-photo-gallery.html

      Elimina
  5. scusami ernesto se lascio le 4 colonne c'è la possibilità poi di visualizzare l'immagine nella dimensione originali una volta che si clicca sulla miniatura? nella tua demo non c'è questa possibilità.Grazie buona giornata

    RispondiElimina
    Risposte
    1. Mi pare di capire che sei più interessato alle foto che ai post che vengono linkati. In questo caso puoi benissimo mettere sempre l'URL della immagine nel codice
      href="URL DEL POST"
      al posto di URL DEL POST. Le immagini potranno avere dimensioni anche di 2000x1600 pixel. In questo caso chi cliccherà sulla miniatura aprirà l'immagine nella sua dimensione originale.
      P.S. Nella mia demo per ragioni di tempo non ho messo nessun collegamento. @#

      Elimina
  6. Gent.mo Ernesto,
    sto usando questa galleria per le mie pagine statiche con alcune personalizzazioni. Quando si clicca sulla didascalia dell'immagine in basso si apre come previsto l'immagine su flikr nelle dimensioni originali. E' possibile togliere questa impostazione? Io ho tolto il collegamento come hai fatto tu nel tuo demo veloce. Ma se invece volessi ottenere il passaggio all'immagine seguente, in pratica lo stesso effetto che si ottiene cliccando sulle frecce di navigazione, c'è uno codice da sostituire che lo rende possibile? Grazie.

    RispondiElimina
    Risposte
    1. Sarebbe troppo complicato. Bisognerebbe inserire un nuovo javascript
      @#

      Elimina
  7. Ti ringrazio ugualmente per la risposta tempestiva. Nel caso volessi sfogliare la galleria solo con le frecce di navigazione e rendere non cliccabile l'immagine come nel tuo demo, quale riga esattamente dovrei rimuovere?

    RispondiElimina
    Risposte
    1. Come non avevo capito la domanda precedente confesso di non aver capito bene neppure questa :)
      Per rendere non cliccabile una immagine basta che tu non ci metta il link e quindi lasci un cancelletto # al posto di URL DEL POST
      @#

      Elimina
  8. grazie, invece avevi capito perfettamente :)! cmq se dovesse esserci in giro quel javascript io bazzico sempre da queste parti :) saluti

    RispondiElimina
  9. Ciao Ernesto,
    avevo in uso questo codice senza problemi fino ad oggi. Quando ho aperto la pagina non mi compariva più la numerazione. Io non ho toccato assolutamente nulla del modello HTML. Cosa può essere successo?

    RispondiElimina
    Risposte
    1. Vedo che la numerazione è sparita anche dalla demo. Non ho idea di cosa sia successo. Cercherò di vedere se c'è rimedio
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy