galleria immagini

**devil946** · 05-09-2012, 18:11

Salve a tutti, sicuramente il problema è stato affrontato moltissime voilete ma ho provato a cercarllo sia in rete che sul forum, ma ahime senza risultati, anche perchè non so cosa cercare. Ho visto alcuini siti che hanno delle gallerie immagini e quando il m ouse passa sopra ad una di esse le altre si oscurano, lasciando solamente nitida quella su cui è posizionato il mouse, quando questo viene spostato su un'altra immagine il risultato è lo stesso, ma chiaramente l'immagine nitida è un'altra a scapito delle rimanenti.
Bene vorrei sapere con quale script si riesce a fare questo, cosiderando che sono alle prime armi con java.

Grazie a tutti

**cavicchiandrea** · 05-09-2012, 18:33

Credo che cosi sia molto difficile trovare quello che cerchi, in rete ci sono troppe gallerie, forse hai qualche speranza in più se recuperi il sito dove hai visto questo effetto, altrimenti tanta pazienza (per spulciare la rete) o tanta fortuna che qualcuno del forum conosca questa gallery

**devil946** · 05-09-2012, 18:42

il sito è questo:
http://www.luxelodge.com/it/Cornici
Come vedi se pasi sopra alle immagini le altre si oscurano, che effetto è?

**cavicchiandrea** · 05-09-2012, 19:04

Nel sorgente pagina del sito segnalato trovi molti spunti (sopratutto a fondo pagina), se usi jquery non è difficilissimo, in sintesi per ogni immagine associa una classe e un id (univoco per distinguere su quale immagine si è) e con l'evento hover di jquery opacizza tutte le immagine tranne quella "selezionata" col mouse

**devil946** · 05-09-2012, 19:46

questo è il corpo cenytrale della mia pagina, come adatteresti il codice:
Considera che in questo modo si offiscano entrambre

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>B.M.Arte - L'Arte Fiorentina</title>

<META NAME="description" CONTENT="legno, cornici, lavorazione legno, lavorazione cornici, realizzazione cornici, mobili, legno vecchio, legno antico">
<META NAME="keywords" CONTENT="legno, cornici, lavorazione legno, lavorazione cornici, realizzazione cornici, mobili, legno vecchio, legno antico">
<meta NAME="Rating" CONTENT="General" />
<META NAME="ROBOTS" CONTENT="index,follow" />
<META NAME="GOOGLEBOT" CONTENT="INDEX, FOLLOW" />
<meta name="FAST-WebCrawler" content="index, follow" />
<meta name="Scooter" content="index, follow" />
<meta name="Slurp" content="index, follow" />
<meta NAME="distribution" CONTENT="global" />
<meta name="copyright" content="Copyright www.bmarte.it" />
<meta name="language" content="it">

<style type="text/css">

</style>
<link href="css/cloud-zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/JavaScript" src="js/cloud-zoom.1.0.2.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<script type="text/javascript" src="js/jquery.history.js"></script>
</head>
<body bgcolor="#CCCCCC" marginheight="0" marginwidth="0" bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0" background="images/GIGLIO scolorito piccolo.gif" alink="000066" link="000066" vlink="000066">

<script type="text/javascript" src="exmplmenu_var.js"></script>
<script type="text/javascript" src="menu_com.js"></script>
<noscript>Il tuo browser non supporta gli script</noscript>
<div id="container">

<table width="100%" border="0" cellpadding="7" cellspacing="0">
<tr>
<td colspan="5" align="center" bgcolor="#666666">[img]images/logo no giglio.gif[/img]</td>
</tr>
<tr>
<td colspan="5" height="36" class="rigabianca"><font color="#666666">XX</font>
<script type="text/javascript">

</script></td>
</tr>
<tr>
<td height="50%" colspan="5" align="center" class="scrittadx">CORNICI IN LEGNO VECCHIO</td>
</tr>
<tr>
<td width="2%" rowspan="8" class="rigagrigina"></td>
<td width="80%" rowspan="8" align="left" valign="top" class="contornoimmagine"><span class="scrittaprodotti">pippo.
</span></td>
<td height="76" colspan="2" align="center" valign="top" class="scrittadx2">
<div class="item">
<div class="boxgrid caption" id="img1"><a href="/images/cornici/legno vecchio/mini/sb7.gif">
[img]/images/cornici/legno vecchio/mini/sb7.gif[/img]
</a>
</div></div>
</td>
<td width="2%" rowspan="8" class="rigagrigina"></td>
</tr>
<tr>
<td height="64" colspan="2" align="center" valign="top" class="scrittadx2">
<div class="item">
<div class="boxgrid caption" id="img2"><a href="/images/cornici/legno vecchio/mini/spiga.gif">
[img]/images/cornici/legno vecchio/mini/spiga.gif[/img]
</a>
</div></div>
</td>
</tr>
</table>
</div>
<script type='text/javascript' src='js/jquery-1.7.js'></script>
<script src="js/jquery.masonry.js"></script>
<script type='text/javascript'>

$(".item").hide();

$(window).load(function () {
var counter = 0;
$('#cycle-loader2').hide();
$('.temploader').css('visibility','visible').hide( ).fadeIn('fast');

$(".item").each(function() {
counter = counter + 150;

$(this).delay(counter).fadeIn();
});
});
$(function() {

$('#container').masonry({
itemSelector: '.item',
columnWidth : 230
});

$(".item").css("opacity","1.0");
$(".item").hover(function () {
var myID = $(this).attr("id");
$(".item:not(#"+myID+")").stop().animate({opacit y: 0.2}, "slow");
},
function () {
$(" .item").stop().animate({opacity: 1.0}, "slow");
});

$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'200px'},{queue:false,du ration:160});
}, function() {
$(".cover", this).stop().animate({top:'267px'},{queue:false,du ration:160});
});

$('#coolMenu').find('> li').hover(function(){
$(this).find('ul')
.removeClass('noJS')
.stop(true, true).slideToggle('fast');
});

$(".fader").hover(function() {
$(this).stop().fadeTo("slow",0.7);
},function() {
$(this).stop().fadeTo("slow",1);
});
});

</script>
</body>
</html>

**devil946** · 05-09-2012, 19:54

fatto non avevo considerato gli id diversi

grazie ancora 1000 volte

Discussione: galleria immagini

Strumenti discussione

Ricerca discussione

Visualizza

galleria immagini

Permessi di invio