lightbox

[Dafne**_sunny*]

salve a tutti,
vorrei creare una galleria sul mio sito.. pensavo di utilizzare lo script lightbox.. solo che mi piacerebbe aggiungere un effetto di mouseover sulle immagini.. tipo quello presente in questo sito: http://www.agenziamanfrino.it/Biloca...ipendenza.html ..
mi aiutate per favore? oppure conoscete un altro script che possa darmi lo stesso risultato finale? perchè quello usato da quel sito credo che sia a pagamento..

grazie

[m4rko80]

Ciao, per l'effetto immagini opacita' basta usare o il css o .css() di jqyuery.
Se guardi il css sorgente, vedrai che le immagini in questione hanno opacity:0.3
Su mouseover tornano a 1.

[Dafne**_sunny*]

ciao..
scusami ma io non riesco a trovare nessun "opacity" nei file css.. puoi essere più chiaro? in quale lo vedi? puoi spiegarmi meglio come creare questo effetto col mouseover..perchè sono un po' principiante..

[m4rko80]

Ciao, ti faccio un esempio pratico.. copia incollo su un file a parte e vedi l'effetto.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" href=""></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".miaClasse").mouseover(function() {
	  $(this).animate({opacity: 1}, 1000);    
  }).mouseout(function(){
	  $(this).animate({opacity: 0.3}, 1000);
  });
});
 </script>
<style>
.miaClasse { opacity:0.3}
</style>
 
 
 

 

[Dafne**_sunny*]

ciao, grazie mille per questo esempio pratico, così finalmente ci sono riuscita.. ora però ho un altro problema col lightbox2 ... ho seguito le istruzioni http://www.huddletogether.com/projects/lightbox2/ e http://css.html.it/articoli/leggi/24...box-con-i-css/ .. ma non viene.. devo aver omesso qualcosa.. questa è la pagina in cui sto facendo le prove http://www.centrocinofilocanismaior....0galleria.html ..
grazie

[m4rko80]

Non so che browser usi ma se hai la consolle errori js vedrai element.dispatchEvent(event);

perche' usi prototype e jquery insieme.

Visto che entrambi di default se non sbaglio usano $ ($('....') per esempio ) devi usare jQuery.noConflict();

dopo di che per ogni chiamata jquery avrai :

jQuery.('#id)..... al posto di $.('#id)...

[Dafne**_sunny*]

scusa sono poco esperta di jQuery.. credo quindi che il problema lo dia il codice che mi hai dato per fare l'opacity... potresti riscrivermi il codice come andrebbe corretto? perchè faccio fatica a capire dove intervenire.. grazie

[Dafne**_sunny*]

ce l'ho fatta, funziona.. grazie..
ho modificato il codice così:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript" href=""></script> <script type="text/javascript"> 
jQuery.noConflict();

 jQuery(document).ready(function(){  jQuery(".galleria").mouseover(function() { 	  jQuery(this).animate({opacity: 1}, 1000);       }).mouseout(function(){ 	  jQuery(this).animate({opacity: 0.3}, 1000);   }); });  
</script> 
<style> .galleria { opacity:0.3} </style>

va bene?
grazie!!