Galleria immagini in HTML5

[passionepittura]

Salve,

vorrei creare delle gallerie immagini nel mio sito fatto in HTML5.

Mi sono resa conto che non posso ottenere gallerie dinamiche, con effetti, e se le foto hanno dimensioni diverse mi pare di capire che non viene una buona impaginazione, ma non posso mettere foto di formato per tutte uguale.


Sono inesperta e vorrei evitare javascript, ma se è necessario potrei provarci ad inserire qualcosa di pronto. Potrei avere una iniziale indicazione sulla quale lavorare?

Grazie in anticipo per l'aiuto quando verrà visto che siamo a ferragosto.

www.passionepittura.altervista.org

[webground]

Come gallerie innanzitutto c'è quella consigliata da altervista che è zenPhoto (lo trovi nella sezione strumenti se non sbaglio). Non sembra male, ed è completamente gratis. Se invece cerchi qualcosa di più moderno potresti provare con Juicebox, ma nella versione free hai delle limitazioni. Il vantaggio di Juicebox è che offre un'interfaccia responsive e quindi si adatta anche alla visualizzazione da dispositivi mobili, però ha senso solo se anche il resto del sito è responsive

Ancora un'altra alternativa se utilizzi Joomla per il tuo sito (sempre disponibile nel Pannello di Controllo altervista), puoi installare un componente aggiuntivo a joomla chiamto Phoca Gallery, un buon tutorial in questo video youtube.

[NLSweb]

Dipende da come vuoi sviluppare la galleria..
se vuoi uno slide , o una lista , ecc.
puoi ad esempio avere delle anteprime delle foto ridimensionate o ritagliate , e quando ci cliccki si aprono a dimensione originale
o molti altri metodi (con html e fogli di stile).
Se usi JS hai sicuramente molti altri strumenti a disposizione ..

Potresti dare un indicazione di come vorresti creare la tua galleria ?

[passionepittura]

Grazie ad entrambi per le risposte.

Ho visto dal pannello di controllo Zen Photo, e ho trovato un tutorial su you tube per la installazione anche se in inglese. Volevo chiedere se posso inserirla nelle mie pagine HTML o solo nei cms, e se posso utilizzarla solo nello spazio hosting di Altervista. Per la galleria responsive sono daccordo che avrebbe senso solo se tutto il resto lo fosse, ma non è così per adesso.

Ho usato PhotoGalley in wordpress, ed ovviamente mi piace, passando ora ad una galleria statica non so come mi troverei. Ci vorrei provare però con una gallery in HTML e css, e vedere se è soddisfacente.

Ho visto belle gallerie con slide in javascript, ma sicuramente dovrei prendere le versioni a pagamento volendo mettere nel footer la partita iva. Al limite potrei anche farlo.

Per ogni autore vorrei creare una pagina di presentazione con una piccola immagine anteprima che a sua volta apre la pagina con le diverse immagini dello stesso autore, in fila o in più colonne, espandibili al clic nel loro formato originale.

Oppure una sola immagine che occupi la pagina, con l'anteprima delle altre sotto di essa che a loro volta cliccandole si ingrandiscano in alto. Ma credo che quì non basti html5 se non sbaglio. Ed in ogni caso ripeto è importante che non si aprano tutte nello stesso formato. Grazie mille

www.passionepittura.altervista.org

[NLSweb]

Ho visto belle gallerie con slide in javascript, ma sicuramente dovrei prendere le versioni a pagamento volendo mettere nel footer la partita iva. Al limite potrei anche farlo.

esistono anche free .. esempio

Per ogni autore vorrei creare una pagina di presentazione con una piccola immagine anteprima che a sua volta apre la pagina con le diverse immagini dello stesso autore, in fila o in più colonne, espandibili al clic nel loro formato originale.

...............

Oppure una sola immagine che occupi la pagina, con l'anteprima delle altre sotto di essa che a loro volta cliccandole si ingrandiscano in alto. Ma credo che quì non basti html5 se non sbaglio.

puoi anche farli senza JS entrambi..

[passionepittura]

Nel link di esempio ho visto ciò che cercavo Ora provo a capirci qualcosa e poi magari posto qui' i miei dubbi circa l'inserimento corretto della galleria. Devo prima creare la pagina.


Ti ringrazio moltissimo, ciao NL Sweb

[passionepittura]

Ho provato a inserirla in una pagina e funziona, ma quando sostituisco le immagini in dotazioni con quelle mie, ho il problema della diversità dei formati, sballa tutto perchè vi sono dei padding fissi. Le anteprima le posso sistemare facilmente, ma sarà un'impresa sistemare quelle grandi? Sempre grazie

[BWG]

Se hai problemi di grandezza foto puoi usare pixresizer, in un attimo riduce come vuoi la grandezza delle foto uniformandole. Qua trovi il programma:

http://download.cnet.com/PixResizer/...-10607499.html

Altrimenti puoi o modificare con i programmi di grafica come Gimp o simili, o mettere le limitazione di grandezza nelle visioni, però questo comporta che le foto devono essere più grosse o uguali a quelle che si vedono.

[passionepittura]

Ti ringrazio BWG, ma non devo uniformare le immagini, vorrei che nella galleria avessero ognuna il formato originale. Si tratta di foto verticali, orizzontali , più piccole o più grandi.

[NLSweb]

Ciao

ho creato un piccolo esempio semplificato che forse ti può aiutare a capire come fare ..

ho usato una struttura HTML , con dei fogli di stile ed come script ho usato jQuery
chiaramente ogni parte va modificata e personalizzata ..

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  
  /* creo la galleria */
  
  var percorso = "http://nlsweb.altervista.org/esempi/foto/";
  
  for(i=1;i<11;i++){
   creaAnteprima(percorso+i+".jpg");
  }
  apriFoto(percorso+"1.jpg")
  
  $("#anteprime img").click(function(){
   var foto = $(this).attr("src");
   apriFoto(foto);
  });
  
  
  function creaAnteprima(Path){
   $("#anteprime ul").append("<li><img src='"+Path+"'/></li>");
  }
  
  function apriFoto(Path){
   $("#cornice img").attr("src",Path);
  }
});
</script>
<style>
#cornice{
 position:relative;
 top:0px;left:0px;
 width:100%;
 min-height:400px;
}
#cornice img{
 position:relative;
 top:20px;left:20px; 
}
#anteprime{
 position:absolute;
 bottom:0px;left:0px;
 width:100%;height:200px;
 overflow:auto;
}
#anteprime ul{
 list-style-type:none;
}
#anteprime li{
 width:150px;height:150px;
 box-shadow:0px 0px 5px black;
 display:inline-block;
 margin:10px;
}
#anteprime img{
 width:150px;height:150px;
 cursor:pointer;
}
</style>
</head>
<body>

<div id="cornice"><img src="" /></div>
<div id="anteprime"><ul></ul></div>

</body>
</html>

[passionepittura]

Grazie per il lavoro fatto, ma usi javascript che non ho studiato per niente, avendo cominciato da tre mesi con html.

Stavo cercando di usare stringhe(con relativo codice css) che comprendo, come:

<input type="radio" name="slide_switch" id="id1"/>
	<label for="id1">
		<img src="http://forum.it.altervista.org/images/pell3.jpg" width="100" height"50px"/>
	</label>
	<img src="http://forum.it.altervista.org/images/pell3.jpg"/>

Potrei provare a sostituire solo il percorso immagini che hai messo tu quì:

var percorso = "http://nlsweb.altervista.org/esempi/foto/";

Ma poi le singole immagini dove le inserisco? Scusa, ma non mi oriento per nulla con javascript

[NLSweb]

ecco un esempio senza JS ..

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#anteprime{
 position:absolute;
 top:0px;left:0px;
 width:100%;
 overflow:auto;
}
#anteprime ul{
 list-style-type:none;
}
#anteprime li{
 margin:10px;
}
#anteprime img{
 width:150px;height:150px;
 box-shadow:0px 0px 5px black;
 cursor:pointer;
 transition:All 1s ease;
 -webkit-transition:All 1s ease;
 -moz-transition:All 1s ease;
 -o-transition:All 1s ease;
}
#anteprime li:hover img{
 width:auto;height:auto;
 cursor:pointer;
}
</style>
</head>
<body>

<div id="anteprime">
<ul>

<li><img src="http://nlsweb.altervista.org/esempi/foto/1.jpg" width="379px" height="400px"/></li>
<li><img src="http://nlsweb.altervista.org/esempi/foto/2.jpg" width="400px" height="400px"/></li>
<li><img src="http://nlsweb.altervista.org/esempi/foto/3.jpg" width="450px" height="338px"/></li>
<li><img src="http://nlsweb.altervista.org/esempi/foto/4.jpg" width="450px" height="450px"/></li>
<li><img src="http://nlsweb.altervista.org/esempi/foto/5.jpg" width="450px" height="450px"/></li>
<li><img src="http://nlsweb.altervista.org/esempi/foto/6.jpg" width="450px" height="307px"/></li>
<li><img src="http://nlsweb.altervista.org/esempi/foto/7.jpg" width="350px" height="450px"/></li>
<li><img src="http://nlsweb.altervista.org/esempi/foto/8.jpg" width="450px" height="434px"/></li>
<li><img src="http://nlsweb.altervista.org/esempi/foto/9.jpg" width="450px" height="275px"/></li>
<li><img src="http://nlsweb.altervista.org/esempi/foto/10.jpg" width="446px" height="450px"/></li>

</ul>
</div>
</body>
</html>

[passionepittura]

Grazie, molto interessante l'effetto col mause, e posso mettere le foto con diverse dimensioni.

Vedo le immagini impilate l'una sull'altra e tutte appiccicate a sinistra della pagina, magari qualcosa va in conflitto nel css dove ho messo lo style che mi hai scritto. Domani con calma lo metto on line per farti vedere come viene la pagina. Per intanto molte grazie, notte

Dimenticavo: bellissime le tue immagini di esempio

[passionepittura]

Buon dì,

NLSweb ho provato il codice e ho messo on line la galleria. A parte l'assetto delle foto che si potrebbe sistemare, volevo per intanto dirti che da un lato è ottimo il fatto che inserendo l'immagine il css pensa a fare l'anteprima, però il tutto è troppo sensibile, magari si potrebbe ritardare l'apertura delle immagini? Un'altra cosa che in altre occasioni mi risulta carina ma non su questi dipinti è l'effetto che dà l'attibuto box-shadow, mi sembra che dia un effetto ingannevole di sfocatura, ho provato senza ed è meglio. L'effetto transizion invece mi sembra si apprezzi poco. In ogni caso questo tipo di animazione con html che non conoscevo di sicuro mi piacerebbe da qualche parte sfruttarlo nel sito. Intant però se pensi che si può utilizzarlo meglio per una galleria ti chederei ancora aiuto.

Posto anche il link dell'altra galleria che avevo provato, ma che vuole immagini di grandezza uniforme e non mi và. Mi piace però la struttura.

www.passionepittura.altervista.org

dal menù: GalleriaNL http://www.passionepittura.altervista.org/NL.html


Galleria2 http://www.passionepittura.altervista.org/slide.html

Buona giornata

[ilmiodrupal7]

Ciao, se usi Photoshop puoi usare alcune funzioni di Bridge per creare gallerie fotografiche con vari effetti di dissolvenza, ci pensa lui a scrivere tutto il codice che ti serve, basta poi copiare e incollare. Sicuramente in giro troverai dei tutorial su come fare.

[passionepittura]

Ti ringrazio, potrei farlo, non ho il programma, ma ancora quest'anno non ho utilizzato i trenta giorni di prova della nuova versione CC. Prima però aspetto di scegliere quale galleria è più adatta alle mie esigenze.

[NLSweb]

La scelta della galleria dipende molto dal fatto se vuoi usare JS oppure no ... chiaramente JS ti offre molte più soluzioni dinamiche ..

il mio secondo esempio è privo di JS , quindi ha di per se delle limitazioni in quanto tutto viene gestito con i CSS
l'aspetto delle anteprime può essere variato facilmente
l'effeto ombreggiattura lo puoi attivare oppure no ... come vuoi ..
per l'effeto "transizione" puoi aumentare il numero di sec per avere un rallentamento nell'apertura e chiusura , ma per ritardare la risposta delle anteprime al passaggio del mouse la cosa è un po' più complicata...

Mi dovresti dire se vuoi o meno usare JS .. da qui dipende molto del lavoro successivo..

[passionepittura]

Grazie per la risposta,

una galleria dinamica è molto più bella ma devo confrontarmi con javascript. Se per usare tale linguaggio è sufficiente che io impari come inserire nuove immagini nel codice non sarebbe un problema se mi viene indicato, ma rimaneggiare tale codice come un pò so fare con html5 mi ci vorrà molto tempo.

Posso cercare degli esempi di gallerie che mi piacciono, e forse è meglio, perchè non vorrei farti fare del lavoro per niente.

E comunque già il secondo esempio mi piace, ma se per modificare qualcosa bisogna fare il lavoro che serve a farla ex novo allora è meglio vedere altre soluzioni se ci sono. Ciao NLSweb, grazie

[NLSweb]

Le immagini le prelevi da un DB ?
inserire nuove immagini nel codice JS non è difficile .. ed anche modificare i CSS è molto semplice ..

la cosa importante è che devi prendere delle decisioni su come vuoi creare la tua gallery (stili e script)
poi online puoi trovare molti esempi (con librerie JS già sviluppate) che puoi usare direttamente o ispirarti per crearne una tua..

[passionepittura]

Le immagini sono scatti miei per alcune cose, oppure le prendo dal web citando la provenienza. Qualche centinaio di immagini si accumulano.

Se mi ci metto a studiare potrei anche vedere la sintassi di javascript, sono lenta però. Ma ci proverò a considerare esempi che avevo scartato, appunto con librerie JS già sviluppate. Per intanto mi hai aiutata a cimentarmi nel primo impatto, mi sto facendo una idea delle possibilità e delle difficoltà.

Grazie, buona serata

[NLSweb]

Quando ti chiedevo se usi un DB , non mi riferisco all'origine della foto ma alla loro indicizzazione.
Mi spiego meglio.. avendo un numero elevato di immagini e presumendo che ad ogni una di loro sia associata una informazione (es.: nome,autore,data,ecc.) , mi domandvo se avevi creato un DB per ospitare e gestire tutti questi dati.
In caso contrario significa dover gestire un numero molto elevato di informazioni manualmente ..

esistono molti sistemi per creare delle gallerie, non necessariamente con slide JS o similari ..
nel mio website , nelle pagine web di esempio , ho creato un Parallax con galleria di immagini (non standart) , prova a darci un occhiata..

[passionepittura]

Ammetto che non conosco bene un DataBase, e di sicuro prenderò il tuo consiglio. Mi documenterò; immagino debba selezionarlo dal pannello di controllo su altervista e utilizzare lo spazio mettendoci immagini e informazioni.

Ho visitato il tuo sito, ti faccio i complimenti, bella la grafica e i molti esempi con relativi vari effetti.
Aprendo il link Parallax devo dire che ci ho messo qualche minuto prima di vedere la galleria immagini sotto la videata con trasparenze che ho apprezzato molto, compreso il tipo di immagine, ma per un utente normale come può essere ll mio non credo sia abbastanza immediata. Ma ovviamente il tuo sito è per utenti con conoscenze più avanzate.

Riguardo appunto la galleria con scroll laterale, vedo che come struttura visiva(layout?) è uguale alla galleria che mi avevi proposto in html, questa però è in javascript è la differenza è enorme, tutto molto quilibrato e godibile nello scorrimento delle immagini. Mi potrebbe piacere, solo mi secca studiare nuovo linguaggio appunto, ho dedicato veramente molto tempo per l'html. Ma mi sà che non potrò esimermi, è questione di tempo. Alla galleria immagini ci tengo molto, comunque mi voglio sperimentare prima di sceglierne una, mi sta piacendo farlo grazie al tuo aiuto. Ho già scaricato una slide , devo integrarla nel sito, ma già funziona e ho messo diverse immagini. Posterò non appena la sistemo meglio.

Forse però dovrei aprire un altro thread. Ciao, buon ferragosto, grazie mille.

[NLSweb]

Come prima cosa devi comprendere meglio come funziona uno sviluppo WEB..in forma sommaria:
HTML viene usato per creare una struttura , CSS vengono usati per definire l'aspetto grafico e gli SCRIPT per la gestione degli eventi e delle interazioni da parte utente e lo sviluppo di elementi dinamici.
Poi esistono molti linguaggi ognuno con diverse caratteristiche... www.w3schools.com
Creare un sito solo con HTML è molto limitativo , anche se HTML5 ha messo ha disposizione molti strumenti utili ..

Come avrai potuto notare online ci sono molte librerie pronte all'uso , ti posso consigliare alcuni siti:
http://www.css3maker.com/
http://cssmenumaker.com/
http://css-tricks.com/examples/ButtonMaker/
http://www.colourlovers.com/palettes...h?query=winter

Buon Lavoro / Studio .

[passionepittura]

Caio NLSweb,
ho dato una occhiata ai link, sono in inglese ma con piccolo sforzo posso capire, ed in effetti valeva la pena averli a disposizione. Mi ha attirato subito www.colourlovers... prezioso averlo tra i preferiti. Grazie