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
 

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