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
questi i 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
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
