2012-10-24 5 views
1

내 웹 페이지의 클래식 테마와 함께 galleria 이미지 갤러리 (http://galleria.io/)를 사용하고 있습니다. 사용자를 전체 화면 모드로 만드는 버튼을 추가하고 싶습니다. 그래서 API를 살펴 보았고 간단 해 보였습니다. 몇 번 시도해 보니 마침내 작동하게되었습니다. 문제는 : html 문서를 처음 열 때 완벽하게 작동하지만 esc를 누르거나 십자가를 클릭하여 전체 화면 모드를 닫을 때 링크를 클릭하여 다시 열려고 시도합니다. 작동하지 않습니다. 열려고 시도하지만 뭔가 멈추는 것처럼 보입니다. 1 초 동안 보여주기 때문입니다. 왜 이런 일이 일어나는지 모르겠지만 누군가 나를 도와 줄 수 있습니까?Galleria API enterFullscreen은 페이지가 처음로드 될 때만 작동합니다.

내 HTML :

<style> 
    .content{width:700px;height:800px;margin:20px auto;} 
     #galleria{height:700px} 

    </style> 

    <!-- load jQuery --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 

    <!-- load Galleria --> 
    <script src="../../galleria-1.2.8.min.js"></script> 

    </head> 
    <body> 

     <div class="content"> 

       <!-- the link for fullscreen mode --> 
       <a id="fullscreen" href="#"> fullscreen </a> 

       <div id="galleria"> 

     <!-- and then all the images just like they were when opening the classic theme demo html --> 
    </body> 

그리고 내 자바 스크립트 :

내가 그랬던 것처럼 경우 누군가가 실제로 내가 그것에 대한 답을 같은 이상한 문제를 발견했다 단지에
<script> 

Galleria.ready(function() { 
    var gallery = this; 


     gallery.attachKeyboard({ 

      left: gallery.prev, 
      right: gallery.next, 

     }); 

$("#fullscreen").click(function() { 

      gallery.enterFullscreen(); 

     }); 





    }); 



// Initialize Galleria 

Galleria.run("#galleria") 

    // Load the classic theme 
Galleria.loadTheme('galleria.classic.min.js'); 
</script> 

답변

2

: 전체 화면은 '년후 기본 설정이 어떻게 든 그것과 충돌했기 때문에 크롬에서 작동하지 않습니다. (태그에 전체 화면 기능을 추가 한 것입니다.)

기본적으로 나를 위해 무엇이 event.preventDefault()를 enterfullscreen() 바로 앞에 추가하는 것이 었습니다.

근로 코드 :

// Load the classic theme 
Galleria.loadTheme('galleria.classic.min.js'); 

// Initialize Galleria 
Galleria.run("#galleria", { 

extend:function() { 
    var gallery = this; 


     gallery.attachKeyboard({ 

      left: gallery.prev, 
      right: gallery.next, 

     }); 

$("#fullscreen").click(function() { 

      event.preventDefault(); 

      gallery.enterFullscreen(); 

     }); 

}