Slideshow e gallerie manuali

J

Jessica Lucisano

Nuovo Utente
7 Ott 2014
13
0
0
Ciao a tutti, sto creando un sito per un'amica fotografa.
Mi ha chiesto nella pagina di raccolta delle foto (portfolio) di inserire tre categorie e fare in modo che cliccando sopra una di queste si aprisse l'intera galleria (sia automatica che manuale) senza che si debba necessariamente cambiare pagina. Insomma tipo facebook.
Ho provato e riprovato ma purtroppo non mi riesce. qualcuno può aiutarmi?

un altra cosa e questa però non la so fare, mi ha chiesto anche se le immagini che rappresentano le tre categorie potessero cambiare al solo passaggio del mouse, cioè se io sto sopra senza cliccare che questa immagini a loro volta cambino. E' possibile? se si qualcuno può aiutarmi a realizzare il codice?

Grazie a tutti e per tutto in anticipo

p.s per scrivere il codice uso dreamweaver. Grazie ancora :)
 
Ho provato a guardare ma purtroppo non mi sono stati di aiuto. qualcuno può aiutarmi a creare il codice? e a fare in modo che la galleria venga aperta senza bisogno di cambiare pagina?
 
il link non mi funziona.
il link del sito è questo qua:
http://www.ermesiaphotography.altervista.org/
e la pagina di cui parlo è la pagina portfolio. le immagini messe al momento sono solo immagini di prova ovviamente.
Sono riuscita a fare in modo che l'immagine si aprisse dalla categoria oscurando il resto del sito senza cambiare pagina ma non riesco a fare in modo che ci sia più immagini in una sola categoria, quindi a creare una galleria automatica e manuale da una sola categoria.

per l'altra domanda spero si riesca a capire dal sito cosa intendo.
 
Visto che usi lightbox, questa librteria ha anche, oltre alla visualizzazione immagini singole anche la galleria
http://lokeshdhakar.com/projects/lightbox2/
la sezione della galleria è:
Four image set

Per il cambio di immagine al passaggio del mouse bisogna che ne parliamo quando hai inserito la galleria, comunque bisogna implementare le regole per :hover

P.S. Un consiglio da un vecchio fotografo e grafico: uno sfondo così pesante sotto a delle foto non sta molto bene, è meglio uno sfondo che non opprimi le immagini con uno a tinta unita o anche con sfumature
 
Le immagini sfondo compreso come detto sopra per ora sono solo di prova. quelle poi le vedrò con la ragazza che mi ha richiesto il sito, lo sistemerò a seconda del suo gusto.

Sono riuscita a inserire la galleria ma ora ho altri due problemini oltre al cambio dell'immagine al passaggio del mouse:
1- inserire l'autoplay per la galleria
2- creare tre gallerie separate.

per quest'ultimo problema io ho questo codice
HTML: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
</head>
<style type="text/css">
.flex { max-width: 100%
}
</style>
<body class="flex" background="Images/sfondo.jpg">
<center><a href="index.html"><img class="flex" src="Images/ermesia.png" width="640" height="180" alt=""/></a></center>
<br>
<br>
<table align="center" cellspacing="30">
<tbody>
<tr>
<td>
<div class="flex">
<a href="img/lifestyle/1.jpg" rel="lightbox" data-lightbox="roadtrip" ><img src="Images/1.jpg" width="250" height="250"/></a>
<a href="img/lifestyle/2.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a>
<a href="img/lifestyle/3.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a>
<a href="img/lifestyle/4.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a>
<a href="img/lifestyle/5.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a>
<a href="img/lifestyle/6.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a>
<a href="img/lifestyle/7.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a>
<a href="img/lifestyle/8.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a></div>
</td>
<td>
<div class="flex">
<a href="img/work/1.jpg" rel="lightbox" data-lightbox="roadtrip" ><img src="Images/2.jpg" width="250" height="250"/></a>
<a href="img/work/2.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a>
<a href="img/work/3.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a>
<a href="img/work/4.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a>
<a href="img/work/5.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a>
<a href="img/work/6.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a>
<a href="img/work/7.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a>
<a href="img/work/8.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a></div>
</td>
<td>
<div class="flex">
<a href="img/travel/1.jpg" rel="lightbox" data-lightbox="roadtrip" ><img src="Images/3.jpg" width="250" height="250" alt=""/></a>
<a href="img/travel/2.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a>
<a href="img/travel/3.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a>
<a href="img/travel/4.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a>
<a href="img/travel/5.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a>
<a href="img/travel/6.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a>
<a href="img/travel/7.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a>
<a href="img/travel/8.jpg" rel="lightbox[lifestyle]"data-lightbox="roadtrip"></a>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
però quando vado ad aprire singolarmente le tre gallerie anzichè darmi 1 di 8 2 di8 ecc mi da 1 di 24 2di 24 ecc. come posso fare per dividere le tre gallerie? in questo modo sembra che le immagini sia comprese tutte in un'unica galleria, mentre io voglio che sia tre gallerie ben distinte.

il codice del css che ho usato è quello che mi hai postato tu con qualche piccola modifica in questo passaggio dalla riga 43 in avanti
HTML: 
.lb-outerContainer {
  position: relative;
  background-color: none;
  *zoom: 1;
  width: auto;
  height: auto;
  margin: 0 auto;
   -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
perchè non riuscivo a fare in modo che il background bianco si vedesse da tutti e 4 i lati invece che solo in alto e a sinistra. c'è un modo per risolvere anche questo ulteriore problema?

sicuramente sbaglio da qualche parte ma non so dove.
 
Ultima modifica:
QUI Ti ho messo l'esempio di come devi risolvere il problema dei tre gruppi di immagini e il problema del passaggio del mouse.

ATTENZIONE
Il codice per il passaggio del mouse l'ho messo solo sulla prima immagine del primo gruppo, fai la stessa cosa per le altre immagini
 
Ultima modifica:
Grazie per le due soluzioni proposte mi saranno sicuramente utili. Per gli altri problemini sapresti dirmi come posso fare?
 
per il passaggio del mouse posso mettere anche più di due immagini giusto? cioè se tengo su il mouse posso fare in modo che si veda una specie di anteprima della galleria che si apre al click?
 
Quali altri problemi?

Quando si passa il mouse su un'immagine c'è un'immagine di partenza, un'immagine quando il mouse è sopra e il ripristino dell'immagine di partenza quando il mouse viene tolto
 
Gli altri per così dire problemi erano:
1- come fare in modo che il background bianco di veda da tutti i lati della galleria una volta aperta e non solo in alto e a sinistra.
2- autoplay della galleria. come posso fare a far partire in automatico lo scorrimento delle immagini una volta aperta la galleria?
3- al passaggio del mouse intendevo che si vedesse una serie di minigalleria automatica e non che cambiasse semplicemente immagini quindi che si vedessero più di due immagini. come una sorta di anteprima della galleria che si vedrebbe una volta cliccato sulla galleria.

Non riesco proprio a capire come fare queste piccole cose. saranno magari delle cavolate ma proprio non riesco
 
  1. Il background bianco non ho capito quale sia ma in tutti i casi vuole settato quando hai deciso che tipo di galleria e script vuoi adottare
  2. L'autopley non si può fare con lightbox, bisogna usarne altri tipi nel primo link che ti ho passato c'era qualche esempio
  3. Fare quello che vuoi tu al passaggio del mouse non è una cavolata ma una cosa complicata che si ottiene solo con javascript che però non ha una soluzione sempre uguale perchè non deve fare conflitti con la galleria, quindi io al tuo posto lascierei perdere
 
un'altra cosa che mi è venuta alla mano proprio poco fa e che non so se è possibile. Volevo fare in modo che per caricare nuove immagini in ogni galleria non avesse bisogno del mio aiuto questa mia amica. c'è un modo per creare un modulo di caricamento e farle scegliere la categoria nella quale caricare le foto successive?

Grazie mille per tutto l'aiuto che mi hai dato finora max1 :)
 
ciao
si è possibile, però non so se è risolvibile usando js.
se tu usassi un linguaggio dinamico es. php è fattibile.
però ci sono da considerare alcune cose, ed es.:
1) la tua galleria usa le tumb (immagini ridotte), se si con php di può creare (oltre a caricare) l'immagine tumb
2) sempre con php devi avere le librerie GD attive (in locale per provare e in remoto)
3) bisogna comunque, al caricamento, fare dei controlli su quanto vai a caricare
4) sarebbe bene predisporre una parte riservata a cui puo accedere solo chi deve caricare
 
Non ne so molto di php purtroppo. Lo sto vedendo da poco e non saprei da dove iniziare per creare questo modulo con php. Le gallerie le ho fatte usando lightbox. nono so se è possibile collegare anche il php
 
Hai usato un FTP in questo modo chiunque abbia i permessi e password può caricare dei file su un server, ma il problema non è questo il problema è fare in modo che si aggiungano alla galleria e per fare questo occorre competenza
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

Z
Slideshow automatico
Risposte
0
Visite
786
HTML e CSS
z.cristiano
Z
Z
CSS Slideshow senza JS e JQUERY
Risposte
2
Visite
2K
HTML e CSS
z.cristiano
Z
Z
  • Bloccata
CSS Slideshow senza JS e JQUERY
Risposte
2
Visite
3K
HTML e CSS
Max 1
Max 1
F
[PHP] Slideshow video
Risposte
0
Visite
858
PHP
Frozzen
F
Cosina
Aggiungere pulsante pause/play a slideshow
Risposte
0
Visite
957
Javascript
Cosina
Cosina
ANDREA20
[Javascript] Slideshow Gallery
Risposte
0
Visite
1K
Javascript
ANDREA20
ANDREA20
Andrea_Ventura
[HTML] Creare un DIV con slideshow
Risposte
5
Visite
2K
HTML e CSS
Andrea_Ventura
Andrea_Ventura
I
[HTML] Slideshow si sovrappone a <div>
Risposte
14
Visite
3K
HTML e CSS
iTonto
I
I
[CSS3]Problema slideshow multiple
Risposte
2
Visite
1K
HTML e CSS
iTonto
I
M
[HTML] Slideshow immagini con effetto FADE
Risposte
2
Visite
3K
HTML e CSS
mozillaro
M
V
Creare slideshow con immagini esterne
Risposte
1
Visite
2K
Ajax
VAik
V
dakko96
slideshow doppia
Risposte
0
Visite
2K
jQuery
dakko96
dakko96
G
Aiuto slideshow joomla3x
Risposte
4
Visite
2K
Joomla
cris8380
cris8380
R
Slideshow di immagini in HTML5
Risposte
1
Visite
2K
HTML e CSS
Max 1
Max 1
S
Slideshow con jquery
Risposte
2
Visite
2K
Javascript
Strelecaster
S
S
Slideshow immagini automatica senza specificare il file immagine
Risposte
7
Visite
3K
PHP
Strelecaster
S
I
Slideshow
Risposte
4
Visite
1K
HTML e CSS
Max 1
Max 1
L
SlideShow in js
Risposte
1
Visite
2K
Javascript
longosamuel
L
A
problema slideshow con visualizzazione mobile
Risposte
6
Visite
2K
HTML e CSS
arapecoston
A
F
Plugin Metaslider (Slideshow Wordpress)
Risposte
1
Visite
1K
WordPress
glm1986ITALY
glm1986ITALY
Alto Basso