galleria a fisarmonica con aga.js

Monital

Utente Attivo
15 Apr 2009
778
2
18
Salve a tutti,

dovrei essere nella sezione giusta e cercherò di spiegarmi al meglio dato che non sono sicuro di poter mettere il link al mio sito, che comunque è in costruzione.

una demo è visibile sul sito html.it

Sto cercando di usare questo script per inserire nel sito questa galleria a fisarmonica.

Tutto sommato ci sono riuscito ma volevo perfezionare la cosa inserendo giusto due modifiche.

Spiego intanto i due problemi.

A)
Quando accedo al sito non vedo le 3 immagini sovrapposte(come dovrebbe essere) ma ne vedo solo due, poi se clicco su una di queste vedo le 3 sovrapposte.

Mentre si dovrebbero vedere sempre le 3 immagini sovrapposte anche al primo accesso al sito.

B)

Invece di cliccarci su per aprire l'immagine vorrei che si aprisse solo con il passaggio del mouse.

di js ne capisco ben poco quindi cheido il vostro aiuto.

questo il codice inserito nell' head

PHP:
		<script> 
		
			$(function() {
			
				$('#aga1').aga({
                    start: 3,
					items: 'div',
					beforeOpen: function(elements, pos) {
 
                        $.each(elements, function(i) {
 
                            if (i == pos) {
                                $(this).children('p').show();
                            }
 
                        });
 
					},
                    afterOpen: function(elements, pos) {
 
                        $.each(elements, function(i) {
 
                            if (i != pos) {
                                $(this).children('p').hide();
                            }
 
                        });
 
					}
				});
 
			});
		
		</script> 
		<style> 
			
			#aga1 {
				position:relative;
                margin-bottom:25px;
				width:700px;
				height:428px;
				overflow:hidden;
			}
			#aga1 div {
				position:absolute;
				width:550px;
				height:382px;
				top:0;
			}
			#aga1 div {
				-moz-box-shadow:0 0 5px #000;
				-webkit-box-shadow:0 0 5px #000;
				box-shadow:0 0 5px #000;
			}
			#aga1 div p {
				position:absolute;
				padding:10px 25px;
				bottom:0;
				right:0;
				color:#fff;
				background:#000;
				display:none;
				opacity:0.8;
			}
 
	
		</style>

questi i div

PHP:
		<div id="aga1"> 
        	<div> 
            	<img src="aga1.jpg"/> 
                <p>Lorem ipsum dolor</p> 
            </div> 
        	<div> 
            	<img src="aga2.jpg" /> 
                <p>Lorem ipsum dolor</p> 
            </div> 
        	<div> 
            	<img src="aga3.jpg" /> 
                <p>Lorem ipsum dolor</p> 
            </div> 
   
        </div>

ovviamente per le immagini non ho inserito i link.

Sottolineo che il codice funziona ma non come vorrei e sicuramente dipende dal codice <script> che no so come settare.

Grazie
 

MAeSI

Utente Attivo
13 Apr 2014
71
1
8
quellidelcucuzzolo.blogspot.it
Ciao,

per il numero delle immagini prova a sostituire start: 3 con start: 2 oppure start: 1 nel codice in head.

Per l'hover puoi provare a modificare il file aga.js sostituendo event: CLICK con event: HOVER (riga 43)
 

Monital

Utente Attivo
15 Apr 2009
778
2
18
Grandissimoooooooooooooo :fonzie::fonzie:


sia per lo start che per HOVER funge perfettamente.

avrei però un altra chicca e cnon capendop di java non so identificare la porzione da modificare.

in pratica se metto 3 immagini invce di vederle affiancate come l'esempio di html vorrei che la figura centrale sia in mezzo ed avere le due esterne mozzate cerco di spiegarmi con questìo schema

ora

|-Figura 1-|-F2-|-F3-|

se voglio farlo diventare grossomodo così?

|-F1-|-Figura 2-|-F3-|
 

Monital

Utente Attivo
15 Apr 2009
778
2
18
ok ho detto na scemenza. basta mettere start 1 e fa quello che ho chiesto.

GRazie grazie grazie
 
Discussioni simili
Autore Titolo Forum Risposte Data
F [PHP] Galleria immagini PHP 6
Z Problema Galleria Javascript Javascript 1
V Galleria con CSS e Javascript Javascript 2
I [CSS] Galleria immagini non funziona HTML e CSS 12
M [wordpress-galleria immagini]Inserire classe php in html PHP 0
J Creata galleria fotografica con Adobe Bridge ...... Webdesign e Grafica 7
L [php e xml] per creare una galleria fotografica con diversi file xml PHP 0
S Galleria fotografica con geotag Webdesign e Grafica 14
ANDREA20 [HTML] galleria immagini HTML e CSS 2
T Galleria fotografica con valutazione HTML e CSS 5
asevenx cerco plugin per miniature galleria fotografica in widjet WordPress 1
M element style immodificabile dentro una galleria javascript Javascript 6
P domanda su galleria HTML e CSS 4
L effetto galleria popup (immagini) jQuery 1
J Video galleria in php no prende l'id PHP 1
J Galleria di video PHP 1
L Centrare galleria immagine HTML e CSS 2
L galleria fotografica da cartella PHP 10
M Galleria fotografica per inserzioni eBay HTML e CSS 1
asevenx galleria fotografica che da problemi con Internet Explorer Javascript 1
B creare galleria fotografica dreamweaver HTML e CSS 1
J Galleria fotografica jq editabile jQuery 0
R Problema con didascalie galleria immagini PHP 1
M Galleria fotografica HTML e CSS 1
R galleria immagini semplice a schermo intero jQuery 1
A Creare una galleria foto senza refresh PHP 0
Trapano Galleria immagini semplice PHP 5
R Galleria di immagini ad apparimento jQuery 1
A Problema gestione galleria fotografica in java Javascript 4
S Galleria Fotografica HTML e CSS 1
asevenx carattere speciale da togliere in script galleria jquary jQuery 4
M Galleria funziona solo dopo refresh PHP 56
O Galleria Facebook nel proprio sito wwb PHP 3
E Visualizzazione galleria in pagina php da datebase PHP 3
I Perchè devo cliccare 2 volte su un link per caricare correttamente il css di una galleria? WordPress 1
P galleria immagine javascript Javascript 5
F Problemi con il mio primo sito, galleria fai da te non visualizzata correttamente HTML e CSS 1
P galleria fotografica per parco auto Webdesign e Grafica 12
P Problema caricamento/sostituzione immagini galleria php-jquery jQuery 2
A galleria jquery: problema nel caricamento di una immagine da un'anteprima HTML e CSS 10
P Creare una galleria di prodotti CMS (Content Management System) 0
Eruyomon Galleria fotografica Veloce jQuery 13
P Galleria immagini semplice Javascript 5
P Galleria immagini HTML e CSS 5
A Galleria gd2 PHP 2
N galleria interattiva e upload Java 3
E galleria per sito web Javascript 0
A Galleria d'immagini con PHP, Le GD2 e Mysql PHP 5
D Galleria fotografica da gestire autonomamente Flash 1
Longo8 Problema creazione galleria di foto PHP 5

Discussioni simili