Jquery PrettyPhoto - 항상 이전 다음 버튼을 표시 하시겠습니까?

Question

안녕하세요 저는 Jquery PrettyPhoto를 사용하고 있으며 사용자가 마우스를 가져 가야하는 대신 팝업 슬라이드에서 항상 다음 및 이전 버튼을 표시하려고합니다. 나는 그것이 CSS를 변경하여 수행되어야한다고 생각하지만, 버튼을 표시하기 위해 어떤 부분을 변경해야하는지 알 수 없다.

 <script type="text/javascript" charset="utf-8"> 
     $(document).ready(function(){ 
      $("area[rel^='prettyPhoto']").prettyPhoto(); 

      $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'slow',theme:'light_squarex',slideshow:3000, autoplay_slideshow: false}); 
      $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'slow',slideshow:10000, hideflash: true}); 



      $("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({ 
       custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>', 
       changepicturecallback: function(){ initialize(); } 
      }); 

      $("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({ 
       custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>', 
       changepicturecallback: function(){ _bsap.exec(); } 
      }); 

     }); 
     </script> 
     <style> 
     div.light_squarex .pp_left , 
div.light_squarex .pp_middle, 
div.light_squarex .pp_right, 
div.light_squarex .pp_content { background: #fff; } 

div.light_squarex .pp_content .ppt { color: #000; } 
div.light_squarex .pp_expand { background: url(../images/prettyPhoto/light_square/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ 
div.light_squarex .pp_expand:hover { background: url(../images/prettyPhoto/light_square/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ 
div.light_squarex .pp_contract { background: url(../images/prettyPhoto/light_square/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ 
div.light_squarex .pp_contract:hover { background: url(../images/prettyPhoto/light_square/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */ 
div.light_squarex .pp_close { width: 75px; height: 22px; background: url(../images/prettyPhoto/light_square/sprite.png) -1px -1px no-repeat; cursor: pointer; } /* Close button */ 
div.light_squarex .pp_details { position: relative; } 
div.light_squarex .pp_description { margin-right: 85px; } 
div.light_squarex #pp_full_res .pp_inline { color: #000; } 
div.light_squarex .pp_gallery a.pp_arrow_previous, 
div.light_squarex .pp_gallery a.pp_arrow_next { margin-top: 12px !important; } 
div.light_squarex .pp_nav .pp_play { background: url(../images/prettyPhoto/light_square/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px; } 
div.light_squarex .pp_nav .pp_pause { background: url(../images/prettyPhoto/light_square/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px; } 

div.light_squarex .pp_arrow_previous { background: url(../images/prettyPhoto/light_square/sprite.png) 0 -71px no-repeat; } /* The previous arrow in the bottom nav */ 
    div.light_squarex .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; } 
div.light_squarex .pp_arrow_next { background: url(../images/prettyPhoto/light_square/sprite.png) -22px -71px no-repeat; } /* The next arrow in the bottom nav */ 
    div.light_squarex .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; } 

div.light_squarex .pp_next:hover { background: url(../images/prettyPhoto/light_square/btnNextplay.png) bottom right no-repeat; cursor: pointer; } /* Next button */ 
div.light_squarex .pp_previous:hover { background: url(../images/prettyPhoto/light_square/btnPrevious.png) bottom left no-repeat; cursor: pointer; } /* Previous button */ 

div.light_squarex .pp_loaderIcon { background: url(../images/prettyPhoto/light_rounded/loader.gif) center center no-repeat; } /* Loader icon */ </style> 

Answer 1

당신이 CSS 선택기를 변경해야합니다 :

div.light_squarex .pp_next : 가져가 {배경 : 홈페이지 (../ 이미지/prettyPhoto/light_square/btnNextplay.png) 오른쪽 하단 노 - 반복; 커서 : 포인터; }/* 다음 버튼 */

div.light_squarex .pp_previous : hover {background : url (../ images/prettyPhoto/light_square/btnPrevious.png) 왼쪽 아래의 no-repeat; 커서 : 포인터; }/* 이전 버튼 */

: 마우스를 가져 가면 기본적으로 호버와 화살표가 기본적으로 표시됩니다.

<a href="assets/img/portfolio/work8.jpg" rel="prettyPhoto"> 

변화가 읽을 : = "prettyphoto [갤러리]"줘야

<a href="assets/img/portfolio/work8.jpg" rel="prettyPhoto[gallery]"> 

확인해

Answer 2

이이 이미지에 정상 갤러리 링크는 다음과 같은 일을해야합니다 시도 그 []가있는 모든 이미지를 그룹화하여 기본적으로 다음 및 뒤로 표시하십시오.

없이는 하나의 이미지 만있는 라이트 박스가 나타납니다.