백 스트레치 및 유휴 타이머 - 함께 가치있게 만들기

Question

backstretch.js jquery 모듈을 사용하여 배경 슬라이드 쇼를 만들고 있습니다.

지금 내가하고 싶은 것은 jquery idle-timer을 추가하고 일부 backstretch 요소와 상호 작용하도록하고 싶습니다.

코드가 작동 중이며, 어떤 항목을 기반으로 특정 요소를 표시하고 숨 깁니다.

Backstretch 코드는 다음과 같으며 작동합니다

첫 번째 사진에

var images = [ 
    "/images/01.jpg", 
    "/images/02.jpg", 
    "/images/03.jpg" 
]; 

// The index variable will keep track of which image is currently showing 
var index = 0; 

// Call backstretch for the first time, and increments the index instance. 
$.backstretch(images, {speed: 500}); 
//immediately pause the slideshow 
$('body').data('backstretch').pause(); 

$(window).on("backstretch.show", function (e, instance) { 
    if (instance.index === 0) { 
     $('#prev').hide(); 
     $('#next').show(); 
    } else if (instance.index === instance.images.length - 1) { 
     $('#prev').hide(); 
     $('#next').hide(); 
    } else { 
     $('#prev').show(); 
     $('#next').show(); 
    }; 
}); 

, 그것은 단지 '다음'버튼을 보여줍니다. 마지막에는 '이전'버튼 만 누릅니다. 그리고 나머지 두 버튼.

유휴 타이머 코드는 다음과 같습니다 (작동하는 경우도 마찬가지 임). 5 초 후에 탐색 버튼을 숨긴 다음 페이지를 다시 터치하면 탐색 버튼이 표시됩니다.

$(document).ready(function(){ 
    $(document).idleTimer(5000); 
     $(document).bind("idle.idleTimer", function(){ 
     $("#prev").fadeOut(1000); 
     $("#next").fadeOut(1000); 
    }); 
    $(document).bind("active.idleTimer", function(){ 
     $("#prev").fadeIn(1000); 
     $("#next").fadeIn(1000); 
    }); 
}); 

첫 번째 사진을 표시하면 다음 버튼 만 표시되고 기다리면 버튼이 숨겨집니다. 그런 다음 마우스를 움직이면 및 prev 버튼이 유휴 타이머의 두 번째 부분에 표시됩니다.

$(document).ready(function(){ 
    $(document).idleTimer(5000); 
     $(document).bind("idle.idleTimer", function(){ 
     $("#prev").fadeOut(1000); 
     $("#next").fadeOut(1000); 
    }); 
    $(document).bind("active.idleTimer", function(){ 
     if (instance.index === 0) { 
      $("#next").fadeIn(1000); 
     } else if (instance.index === instance.images.length - 1) { 
      $("#prev").fadeIn(1000); 
     } else { 
      $("#prev").fadeIn(1000); 
      $("#next").fadeIn(1000); 
     }; 
    }); 
}); 

비록이 나에게하지 정의되는 인덱스에 대한 오류를 제공합니다 :

그래서 나는 그것 (작동하지 않는) 같은 것을보고 싶지 생각합니다. 그렇다면 idleTimer가 액세스 할 수 있도록 인덱스 & instance.index를 전역 변수로 분리 할 수 ​​있습니까? 그렇다면 어떻게?

Answer 1

backstretch에서 fadein/out을 사용하는 대신, 첫 번째 스크립트에서 어떤 슬라이드를 사용했는지에 따라 클래스 (예 : ".showme"사용)를 추가하고 제거했습니다. SHOWME 클래스는 단지 display:block; 내가이 display:none;

의 기본을 가지고있는 요소를 설정하고 다음 idletimer 스크립트가 fadeIn/아웃에 그 하나 개의 클래스만을 참조하는

.

완벽하지는 않지만 제대로 작동합니다. 인스턴스를 전역 변수로 가져 가지 않아도됩니다.