Pagina 1 di 4 1 2 3 ... ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 32
  1. #1
    Utente di HTML.it
    Registrato dal
    Oct 2011
    Messaggi
    133

    inserimento titolo sotto icone di galleria

    Nella galleria già ritoccata in questa discussione
    codice:
    http://forum.html.it/forum/showthread.php?threadid=2928020&pagenumber=3&
    c'è un modo per inserire un titolo sotto le icone e magari anche ingrandirle un po'

  2. #2
    Utente di HTML.it
    Registrato dal
    Oct 2011
    Messaggi
    133
    se si potesse fare così dove andrebbe messo il codice nel body?
    codice:
    <style>
    .row:not(:first-child){
      margin-top:10px;
    }
    
    </style>
    
    </head>
    
    <body>
    <div class="row">
      <div class="col-md-4">
    
    
    <div class="thumbnail">
      <img src="http://forum.html.it/forum/images/misc/vbulletin4_logo.png" class="img-responsive" alt="THUMB">
      <div class="caption">
      <h3>TITOLO</h3>
     
      </div>
    </div>

  3. #3
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Quote Originariamente inviata da tabagista Visualizza il messaggio
    se si potesse fare così dove andrebbe messo il codice nel body?
    Se si potesse lo metteresti dove vorresti che appaia

    P.S. segui il consiglio di Killer
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    ... ma la cosa si complica. A questo punto sinceramente ti ri-consiglierei di cercare un'altra galleria che abbia tutte le caratteristiche a te più confacenti.
    Ultima modifica di cavicchiandrea; 16-07-2015 a 12:30
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    se si potesse fare così dove andrebbe messo il codice nel body?
    Si tratta di due cose pressoché diverse, dubito che tu possa integrare questa parte di codice in quella galleria, o quantomeno ne otterresti un incrocio deforme.
    Senza offesa, ma l'arte del copia-incolla funziona solo quando le cose sono fatte con un certo criterio e con ordine, a meno che tu non voglia ottenere una composizione cubista.

    Fai così... intanto scaricati la versione aggiornata di quella galleria da qui http://flowgallery.org/#download
    Su quella pagina guardati un po' le opzioni di configurazione. Per impostare le dimensioni delle miniature puoi usare thumbWidth e thumbHeight.

    Per la descrizione delle immagini e il titolo sotto le miniature vedo un po' se riesco a buttare giù qualcosa, non ti prometto niente.
    Se poi qualcun altro si vuole cimentare, ben venga.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Utente di HTML.it
    Registrato dal
    Oct 2011
    Messaggi
    133
    Per la descrizione delle immagini e il titolo sotto le miniature vedo un po' se riesco a buttare giù qualcosa, non ti prometto niente.
    Grazie!

  6. #6
    Utente di HTML.it
    Registrato dal
    Oct 2011
    Messaggi
    133
    ...hai ragione anche sul copia incolla....

  7. #7
    Utente di HTML.it
    Registrato dal
    Oct 2011
    Messaggi
    133
    Nella vecchia versione della galleria, quella in cui c'è anche la descrizione, stavo provando un'alternativa al titolo sotto le icone.
    Prima del div della galleria ho creato un div per mettere una numerazione ed inserire i link delle immagini
    il risultato (più che altro un tentativo) è questo che ovviamente non funziona
    codice:
    <style>
    
    .round-button {
        width:25%;
    }
     
    .round-button-circle {
        width: 10%;
        height:0;
        padding-bottom: 10%;
        border-radius: 50%;
        border:2px solid #cfdcec;
        overflow:hidden;
        
        background: #4679BD; 
        box-shadow: 0 0 3px gray;
    }
    .round-button-circle:hover {
        background:#30588e;
    } 
     
    
    .round-button a {
        display:block;
        float:left;
        width:10%;
        padding-top:50%;
        padding-bottom:50%;
        line-height:1em;
        margin-top:-0.5em;
        
        text-align:center;
        color:#e2eaf3;
        font-family:Verdana;
        font-size:1.2em;
        font-weight:bold;
        text-decoration:none;
    }
    </style>
    </head>
    
    <body>
    
    
    <div class="round-button"><div class="round-button-circle"><img src="img1.jpg" /> class="round-button">1</a></div></div>
    <div class="round-button"><div class="round-button-circle"><a href="link???" class="round-button">2</a></div></div>
    
    </div><!---number--->
    
    
    </body>
    </html>

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    A parte le possibili alternative, vediamo se possiamo mantenere la linea iniziale, altrimenti non riesco a seguirti.
    Ho rivisto lo script, non è stato così semplice.

    Scarica la nuova versione della galleria http://flowgallery.org/#download

    Sostituisci il file jquery.flowgallery.js con quello dello zip in allegato jquery.flowgallery.zip

    Posto qui anche lo script minimizzato:
    codice:
    !function(t,i,e,n){"use strict";var a=function(h,o){function l(){var n;H=t(h),n=H.data("plugin-options"),k=t.extend({},a.defaults,o,n),L=H.parent(),$.length=H.children().length,$.options=k,s(),c(),H.css("visibility","visible").children(":not(.active)").find(".title").fadeIn(),t(i).resize(t.proxy(y,$)),k.enableKeyNavigation===!0&&t(e).keydown(P),w(!1)}function s(){H.css({listStyle:"none",overflow:"hidden",marginLeft:"0",paddingLeft:"0",position:"relative",width:"100%"}).find("li>img").find("+div").addClass("description").hide().end().each(function(){this.title&&t(this).after('<div class="title" style="width:100%;word-wrap:break-word">'+this.title+"</div>").find("+.title").hide()}),r(),u()}function r(){var i=e.createElement("p");T=t(i).addClass("fg-caption").css({backgroundColor:k.backgroundColor,display:"none",marginTop:"0",padding:"8px "+(k.imagePadding+10)+"px 15px",position:"absolute"})}function u(){var i=e.createElement("div");t(i).addClass("fg-wrapper").css({position:"relative"}).append(H.get(0)).append(T.get(0)),L.append(i)}function c(){$.enabled=!1,H.children().each(function(t){var i=new d(this,t,k);i.$el&&(i.$el.on("loaded",g),i.$el.on("click",f),E||k.activeIndex!==t||(i.$el.addClass("active"),E=i,O=t),M.push(i))}),$.enabled=!0,N=L.width(),I=.5*N}function g(){var i=t(this).data("flowItem");W(i.h),i.index===k.activeIndex?($.activeLoaded=!0,w(!0)):!$.activeLoaded||i.th===k.loadingHeight&&i.tw===k.loadingWidth||w(!0)}function f(){t(".title",this).hide();var i=t(this).data("flowItem");if(i!==E){var e=O;m(i.index-e)}else k.forwardOnActiveClick===!0&&m(1)}function p(){C(),L.width()!==N&&(N=L.width(),I=.5*N,w(),C())}function v(t){return function(){var i=M[t];i.oldActive&&(i.$el.find(".title").fadeIn(),i.oldActive=!1)}}function w(t){if(!$.isEnabled())return!1;var i,e={},n=!0,a=null,d=!1,h=!1,o=M.length;for(A="auto"===k.thumbTopOffset?.5*E.h:k.thumbTopOffset,i=0;o>i;i++)d=M[i],h=d.$el,h.hasClass("active")?(e={left:I-k.imagePadding-.5*d.w+"px",top:"0",width:d.w+"px",height:d.h+"px",padding:k.imagePadding+"px"},n=!1,a=p,z!==d.h&&(z=d.h,z+=2*k.imagePadding,t?H.stop().animate({height:z},{duration:k.duration,easing:k.easing}):H.height(z))):(e={left:x(i,n),top:A-.5*d.th+"px"},a=null,(!t||d.oldActive)&&(e.width=d.tw+"px",e.height=d.th+"px",e.padding=k.thumbPadding+"px",a=v(i))),t?h.stop().animate(e,{duration:k.duration,easing:k.easing,complete:a}):(h.css(e),a&&a())}function m(t,i){if(!$.isEnabled())return!1;var e=O+t;if(i=i!==n?i:k.animate,e>M.length-1||0>e)return!1;if(E.oldActive=!0,0>t&&O>0)M[O].oldActive=!0,O+=t;else{if(!(t>0&&O<M.length-1))return!1;O+=t}E=M[O],b(),w(i)}function b(){T.hide(),H.find(".active").removeClass("active"),t(E.$el).addClass("active"),N=L.width(),I=.5*N}function x(t,i){var e=I,n=0;if(i)for(e-=.5*M[O].w,e-=k.imagePadding,e-=10*(O-t),e-=2*(O-t)*k.thumbPadding,n=t;O>n;n++)e-=M[n].tw;else for(e+=.5*M[O].w,e+=k.imagePadding,e+=10*(t-O),e+=2*(t-O)*k.thumbPadding,n=O+1;t>n;n++)e+=M[n].tw;return e+"px"}function y(){return $.isEnabled()?(N=L.width(),I=.5*N,w(),void C()):(j=!0,!1)}function C(){if(!E.isLoaded)return!1;var t,i=E.captionText;i&&i.length>0?(T.html(i),T.css({left:I-k.imagePadding-.5*E.w,top:E.h+2*k.imagePadding,width:E.w-20}),t=E.h+T.height()+40,T.fadeIn("fast")):t=E.h+40}function W(t){t>z&&(z=t,z+=2*k.imagePadding,H.height(z))}function P(t){37===t.keyCode?m(-1):39===t.keyCode&&m(1)}var h,H,$=this,k={},I=0,A=0,L=!1,T=!1,E=!1,O=0,N=0,z=0,M=[],j=!1;this.length=0,this.enabled=!0,this.options={},this.getActiveIndex=function(){return O},this.next=function(t){return m(1,t),this},this.prev=function(t){return m(-1,t),this},this.jump=function(t,i){return m(t-O,i),this},this.isEnabled=function(){return this.enabled===!0},this.disable=function(){return this.enabled=!1,this},this.enable=function(){return this.enabled=!0,j&&(t.proxy(this.windowResizeHandler,this)(),j=!1),this},l()};a.defaults={activeIndex:0,animate:!0,backgroundColor:"black",circular:!1,duration:900,easing:"linear",enableKeyNavigation:!0,forceHeight:!1,forceWidth:!1,forwardOnActiveClick:!0,imagePadding:0,loadingClass:"loading",loadingHeight:60,loadingWidth:100,thumbHeight:"auto",thumbPadding:0,thumbTopOffset:"auto",thumbWidth:"auto"};var d=function(i,e,n){function a(){return s.h=n.loadingHeight,s.th=n.loadingHeight,s.w=n.loadingWidth,s.tw=n.loadingWidth,r=s.$el.find("img"),0===r.length?void(s.$el=!1):(s.$el.data("flowItem",s),s.captionText=t("div.description",s.$el).html(),n.forceWidth&&r.width(n.forceWidth),r.hide().parent().addClass(n.loadingClass).css({height:s.th,width:s.tw}),d(),s.$el.css({cursor:"pointer",backgroundColor:n.backgroundColor,padding:n.thumbPadding,position:"absolute",textAlign:"center"}),void r.css({height:"100%",imageRendering:"optimizeQuality",width:"100%"}))}function d(){var t=r.get(0);t.complete?o():r.bind("load readystatechange",h).bind("error",function(){r.css("visibility","visible").parent().removeClass(n.loadingClass)})}function h(t){var i=r.get(0);(i.complete||"complete"===i.readyState&&"readystatechange"===t.type)&&o()}function o(){r.css("visibility","visible").fadeIn().parent().removeClass(n.loadingClass),s.isLoaded=!0,l(),s.$el.trigger("loaded",s)}function l(){var t=r.get(0);if("undefined"!=typeof t.naturalWidth)s.w=n.forceWidth||t.naturalWidth||t.width,s.h=n.forceHeight||t.naturalHeight||t.height;else{var i=new Image;i.src=r.attr("src"),s.w=i.width,s.h=i.height}"auto"===n.thumbWidth&&"auto"===n.thumbHeight?(s.tw=n.loadingWidth,s.th=Math.round(s.h*n.loadingWidth/s.w)):"auto"===n.thumbHeight?(s.tw=n.thumbWidth,s.th=Math.round(s.h*Number(n.thumbWidth)/s.w)):"auto"===n.thumbWidth?(s.tw=Math.round(s.w*Number(n.thumbHeight)/s.h),s.th=n.thumbHeight):(s.tw=n.thumbWidth,s.th=n.thumbHeight)}var s=this,r=!1;this.$el=t(i),this.index=e,this.h=0,this.th=0,this.w=0,this.tw=0,this.active=!1,this.isLoaded=!1,this.captionText=!1,this.oldActive=!1,a()};t.fn.flowgallery=function(i){return this.each(function(){var e=t(this);if(!e.data("flowgallery")){var n=new a(this,i);e.data("flowgallery",n)}})},t.fn.flowgallery.defaults=a.defaults}(jQuery,window,document);
    A questo punto, dentro la cartella demos hai il file di esempio index.html.
    Puoi editare quel file.
    Ora il testo dell'attributo title di ogni tag img sarà mostrato sotto le miniature, mentre per la descrizione completa, sotto l'immagine grande, procedi come già indicato precedentemente nell'altra discussione.

    Ecco un codice di esempio:
    codice:
    <ul id="gallery">
      <li>
        <img src="images/gallery/img1.jpg" alt="Foto 1" title="Titolo Foto 1 visibile sotto la miniatura" />
        <div>Descrizione <b>foto 1</b> visibile sotto l'immagine selezionata</div>
      </li>
      <li>
        <img src="images/gallery/img2.jpg" alt="Foto 2" title="Titolo Foto 2" />
        <div>Descrizione <b>foto 2</b></div>
      </li>
      <!-- ...e tutte le altre voci della galleria -->
    </ul>
    Sostanzialmente, oltre al div della descrizione, lo script crea un div con classe .title sotto ogni miniatura. Quel div conterrà appunto il titolo indicato nell'attributo title.
    E' possibile quindi applicare uno stile attraverso la classe .title, ad esempio:
    codice:
    #gallery .title{
      color: #056;
    }
    Per il momento è tutto.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  9. #9
    Utente di HTML.it
    Registrato dal
    Oct 2011
    Messaggi
    133
    Sono sbalordito! Hai fatto un lavorone ed hai una conoscenza impressionante. Grazie mille questa galleria ora è fantastica oltre ad essere l'unica con queste caratteristiche.
    Quello che hai fatto è grandioso!

  10. #10
    Utente di HTML.it
    Registrato dal
    Oct 2011
    Messaggi
    133
    Ma questa ultima versione per funzionare ha bisogno dei collegamenti remoti o può funzionare anche in locale senza connessione?

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.