Slideshow e gallerie manuali

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 :)
 

Jessica Lucisano

Nuovo Utente
7 Ott 2014
13
0
0
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?
 

Jessica Lucisano

Nuovo Utente
7 Ott 2014
13
0
0
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.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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
 

Jessica Lucisano

Nuovo Utente
7 Ott 2014
13
0
0
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:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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:

Jessica Lucisano

Nuovo Utente
7 Ott 2014
13
0
0
Grazie per le due soluzioni proposte mi saranno sicuramente utili. Per gli altri problemini sapresti dirmi come posso fare?
 

Jessica Lucisano

Nuovo Utente
7 Ott 2014
13
0
0
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?
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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
 

Jessica Lucisano

Nuovo Utente
7 Ott 2014
13
0
0
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
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
  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
 

Jessica Lucisano

Nuovo Utente
7 Ott 2014
13
0
0
ok allora lascerò così come si trova lasciando una sola immagine e senza background e autoplay
Grazie mille per l'aiuto
 

Jessica Lucisano

Nuovo Utente
7 Ott 2014
13
0
0
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 :)
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
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
 

Jessica Lucisano

Nuovo Utente
7 Ott 2014
13
0
0
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
 

Jessica Lucisano

Nuovo Utente
7 Ott 2014
13
0
0
io le immagini delle gallerie le ho caricate con un semplice collegamento href.
e poi le ho raggruppate in una galleria.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
Z Slideshow automatico HTML e CSS 0
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
F [PHP] Slideshow video PHP 0
Cosina Aggiungere pulsante pause/play a slideshow Javascript 0
ANDREA20 [Javascript] Slideshow Gallery Javascript 0
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14
I [CSS3]Problema slideshow multiple HTML e CSS 2
M [HTML] Slideshow immagini con effetto FADE HTML e CSS 2
V Creare slideshow con immagini esterne Ajax 1
dakko96 slideshow doppia jQuery 0
G Aiuto slideshow joomla3x Joomla 4
R Slideshow di immagini in HTML5 HTML e CSS 1
S Slideshow con jquery Javascript 2
S Slideshow immagini automatica senza specificare il file immagine PHP 7
I Slideshow HTML e CSS 4
L SlideShow in js Javascript 1
A problema slideshow con visualizzazione mobile HTML e CSS 6
F Plugin Metaslider (Slideshow Wordpress) WordPress 1
C slideshow numero immagini Javascript 5
Devil-94 javascript slideshow Javascript 1
D Come far ripartire una gif quando si rivisita la pagina dello slideshow WordPress 1
Emix Slideshow con div sovrapposto HTML e CSS 5
G Slideshow e Posizionamento DIV HTML e CSS 8
F Codice Random Javascript con slideshow Javascript 3
S Problemi con slideshow HTML e CSS 0
M Simple Slideshow jQuery 1
R Errore Slideshow - "Attenzione lo script non risponde" Joomla 1
R Uso Immagini per Slideshow Joomla 0
R Immagini con Link (modulo e slideshow) Joomla 0
C aggiungere link foto slideshow HTML e CSS 2
K Aiuto per slideshow HTML e CSS 4
L Slideshow non cambia le foto Flash 7
G problema caricamento condizionale slideshow FlexSlider Javascript 0
M [RISOLTO]Fermare slideshow immagini al passaggio del mouse. jQuery 3
L jquery slideshow con anteprima jQuery 10
F Slideshow Javascript 0
P Slideshow orrizontale con link WordPress 0
M sezione news del mio sito collegata a uno slideshow nella home page PHP 0
P Bug IE 7/8 slideshow inserito in pagina html5 Parallax HTML e CSS 4
P Bug IE 7 slideshow inserito in pagina html5 Parallax Javascript 1
M Come dire al mio slideshow di non scrollare all'infinito! jQuery 23
F aiuto slideshow Javascript 0
F personalizzazione slideshow Javascript 0
L Banner e slideshow Flash 1
P Slideshow per sito in ASP Classic ASP 0
J creazione di un slideshow con pagine html HTML e CSS 3
T conflitto tra due slideshow Javascript 3
T inserimento url su immagini in slideshow Javascript 4

Discussioni simili