Bonjour à tous,
J'ai développer avec un ami une visionneuse en jquery.
Elle fonctionne nickel ( http://www.architecture-simon.com/projet/lycee-dupleix/ vous pouvez la voir en cliquant sur une photo). Mais voilà j'aimerais que les background de next et prev disparaissent lorsque j'arrive à la dernière image.
voici les différents code :
je pensais utiliser .css(); mais je n'arrive pas à avoir le résultat escompté .
Merci d'avance de vos réponses.[/i]
J'ai développer avec un ami une visionneuse en jquery.
Elle fonctionne nickel ( http://www.architecture-simon.com/projet/lycee-dupleix/ vous pouvez la voir en cliquant sur une photo). Mais voilà j'aimerais que les background de next et prev disparaissent lorsque j'arrive à la dernière image.
voici les différents code :
<div id="visionneuse">
<div class="prev-img">
</div>
<div class="image-visionneuse">
<ul class="liste-img">
</ul>
</div>
<div class="close-visionneuse"></div>
<div class="close-next-img">
</div>
</div>
#visionneuse{width: 100vw;height: 100vh;background-color: #ffffff;z-index: 1000000000000000;position: fixed;top: 0;left: 0;}
.prev-img{background-color: #ffffff;position: absolute;bottom: 0;left: 0;width: 50px;height: 95vh;z-index: 100000000000000000;background: url("../img/prev-projet-off.svg")no-repeat;background-position: 50% 45%;cursor: pointer;background-size: 50px 50px;}
.close-next-img{background-color: #ffffff;position: absolute;bottom: 0;right: 0;width: 50px;height: 95vh;z-index: 100000000000000000;background: url("../img/next-projet-off.svg")no-repeat;background-position: 50% 45%;cursor: pointer;background-size: 50px 50px;}
.image-visionneuse{width: calc(100vw - 100px);height: 100%;left: 50px;top: 0;position: absolute;z-index: 100000000000000000;overflow: hidden;background: #ffffff}
.image-visionneuse ul{z-index: 10000000000000000000;position: relative;float: left;}
.image-visionneuse li{z-index: 1000000000000000000000;position: relative;float: left;height: 100vh;width: calc(100vw - 100px);list-style: none; }
.close-visionneuse{position: absolute;top: 15px; right: 15px;width: 35px;height: 35px;background: url("../img/close.svg")no-repeat;z-index: 1000000000000000000000;cursor: pointer;}
.prev-img:hover{opacity: 0.6;}
.close-next-img:hover{opacity: 0.6;}
.close-visionneuse:hover{opacity: 0.6;}
// code visonneuse maison
$(window).ready(function(){
if ( $(window).width() > 767) {
$('#visionneuse').hide();
var ImgArray = new Array();
var counter_position = 0;
$('body').find('.noscroll').each(function(){
ImgArray.push($(this).attr('href'));
});
var counter_max_img = ImgArray.length;
$('.noscroll').click(function(e){
$('body,html').css('overflow','hidden');
e.preventDefault();
var position_img = $(this).data('numero');
var gallerie = '';
var multiplicateur = ImgArray.length;
counter_position = $(this).data('numero');
var counter_max_img = ImgArray.length;
for (var i = 0; i <= multiplicateur; i++) {
gallerie += '<li data-numero="' + i + '" style="background:url(' + ImgArray[i] + ')50% 50% no-repeat;background-size : contain"></li>';
};
$(gallerie).appendTo('.liste-img');
$('.image-visionneuse ul').css({'left': 'calc(' + position_img + ' * (calc(-100vw + 100px)) )', 'width' : 'calc(' + multiplicateur +' * (calc(100vw - 100px)) ) '});
$('#visionneuse').fadeIn(200);
});
$('.close-visionneuse').click(function(){
$('#visionneuse').fadeOut(200);
$('body,html').css('overflow','auto');
});
$('.close-next-img').click(function(e){
if ($(':animated').length) {
return false;
}else{
if (counter_position > counter_max_img-2) {
counter_position = counter_max_img -1;
//console.log(counter_position);
}else{
counter_position ++;
//console.log(counter_position);
$('.image-visionneuse ul').animate({ "left": "-=100%" }, 500 );
};}
});
$('.prev-img').click(function(e){
if ($(':animated').length) {
return false;
}else{
if (counter_position < 1) {
counter_position =0;
//console.log(counter_position);
}else{
counter_position --;
//console.log(counter_position);
$('.image-visionneuse ul').animate({ "left": "+=100%" }, 500 );
};};
});
}});
je pensais utiliser .css(); mais je n'arrive pas à avoir le résultat escompté .
Merci d'avance de vos réponses.[/i]