Jquery PrettyPhoto - 如何始终显示下一个上一个按钮？

Posted 2023-02-25

【中文标题】Jquery PrettyPhoto - 如何始终显示下一个上一个按钮？

【英文标题】：Jquery PrettyPhoto - How to always show Next Previous buttons?

【发布时间】：2012-02-10 13:23:16

【问题描述】：

您好，我正在使用 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>

【参考方案1】：

试试这个，图片的正常图库链接将如下所示：

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

将其更改为：

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

rel="prettyphoto[gallery]" 将确保所有带有 [ ] 的图像都将被分组，因此默认显示下一个和返回。

没有它，它只会显示带有一张图片的灯箱。

【讨论】：

谢谢！从 prettyPhoto 更改为 prettyPhoto[gallery] 带来了导航

【参考方案2】：

您必须更改这些 CSS 选择器：

div.light_squarex .pp_next:hover background: url(../images/prettyPhoto/light_square/btnNextplay.png) 右下无重复；光标：指针； /* 下一步按钮 */

div.light_squarex .pp_previous:hover background: url(../images/prettyPhoto/light_square/btnPrevious.png) 左下无重复；光标：指针； /* 上一个按钮 */

只需删除 :hover，默认情况下将显示箭头，而不会鼠标悬停。