11486 sujets

JavaScript, DOM et API Web HTML5

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 :

<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]
Je ne voudrais pas casser l'ambiance, mais sur téléphone portable Nokia / Internet Explorer cela ne fonctionne pas nickel du tout...
Page banche.