Bonjour à tous,
Je suis nouvelle sur le forum alors j'espère que je serais assez précise
Sur mon site j'ai intégré un slide qui contient deux pages de vignettes cliquables. Lorsque je survole une vignette, celle-ci reste en couleur tandis que toutes les autres se mettent en flou ainsi qu'en noir et blanc. Cela fonctionne parfaitement sur la première page du slide mais pas la deuxième. J'ai beau tester plusieurs manip, rien ne fonctionne. Sûrement parce que je bidouille
Je ne connais pas très bien les scripts et je pense que le problème vient de là mais je n'en suis pas certaine... Quelqu'un aurait-il une idée ? Merci beaucoup d'avance pour votre aide !
Le code :
Et le css :
Modifié par monagence (23 Sep 2012 - 21:19)
Je suis nouvelle sur le forum alors j'espère que je serais assez précise
Sur mon site j'ai intégré un slide qui contient deux pages de vignettes cliquables. Lorsque je survole une vignette, celle-ci reste en couleur tandis que toutes les autres se mettent en flou ainsi qu'en noir et blanc. Cela fonctionne parfaitement sur la première page du slide mais pas la deuxième. J'ai beau tester plusieurs manip, rien ne fonctionne. Sûrement parce que je bidouille
Je ne connais pas très bien les scripts et je pense que le problème vient de là mais je n'en suis pas certaine... Quelqu'un aurait-il une idée ? Merci beaucoup d'avance pour votre aide !
Le code :
<head>
<!------------slider_realisation--------------------->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $container = $('#ib-container'),
$articles = $container.children('article'),
timeout;
$articles.on( 'mouseenter', function( event ) {
var $article = $(this);
clearTimeout( timeout );
timeout = setTimeout( function() {
if( $article.hasClass('active') ) return false;
$articles.not( $article.removeClass('blur').addClass('active') )
.removeClass('active')
.addClass('blur');
}, 65 );
});
$container.on( 'mouseleave', function( event ) {
clearTimeout( timeout );
$articles.removeClass('active blur');
});
});
</script>
<!--------------------------------->
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').bxSlider();
});
</script>
<!--------------------------------->
</head>
<body>
<div id="containerrealisation_droite">
<ul id="slider1">
<li>
<section class="ib-container" id="ib-container">
<article><a href="acta.html" target="_self" class="vignette" ><img src="img/portfolio_acta.png"/></a></article>
<article><a href="motorataf.html" target="_self" class="vignette"><img src="img/portfolio_motorataf.png"/></a></article>
<article><a href="cocodileetpopotame.html" target="_self" class="vignette"><img src="img/portfolio_cp.png"/></a></article>
<article><a href="mrmondialisation.html" target="_self" class="vignette"><img src="img/portfolio_mrmondialisation.png"/></a></article>
<article><a href="augeo.html" target="_self" class="vignette"><img src="img/portfolio_augeo.png"/></a></article>
<article><a href="zerogravity.html" target="_self" class="vignette"><img src="img/portfolio_zerogravity.png"/></a></article>
</section>
</li>
<li>
<section class="ib-container" id="ib-container">
<article><a href="biganos.html" target="_self" class="vignette" ><img src="img/portfolio_biganos.png"/></a></article>
<article><a href="cryobois.html" target="_self" class="vignette" ><img src="img/portfolio_cryobois.png"/></a></article>
<article><a href="larsen.html" target="_self" class="vignette" ><img src="img/portfolio_larsen.png"/></a></article>
</section>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Et le css :
#containerrealisation_droite {
height: 515px;
float: right;
box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.08);
-moz-box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.08);
-o-box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.08);
-ms-box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.08);
-webkit-box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.08);
width: 750px;
border: 7px solid rgba(255,255,255,0.6);
background-image: url(img/backgroundportfolio.png);
}
.vignette {
float: left;
height: 181px;
width: 181px;
margin: 15px;
border: thin dashed #CCC;
box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.04);
-moz-box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.04);
-o-box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.04);
-ms-box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.04);
-webkit-box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.04);
}
.ib-container article{
z-index: 1;
-webkit-backface-visibility: hidden;
margin-top: 36px;
margin-left: 52px;
transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
}
.ib-container article.blur {
opacity: 0.4;
-moz-opacity : 0.4;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}Modifié par monagence (23 Sep 2012 - 21:19)
