Jquery PrettyPhoto - Как всегда показывать кнопки «Следующая предыдущая»? - PullRequest
Новая
       3

Jquery PrettyPhoto - Как всегда показывать кнопки «Следующая предыдущая»?

1 голос
/ 10 февраля 2012

Привет! Я использую 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>

Ответы [ 2 ]

3 голосов
/ 14 марта 2013

Попробуйте, нормальная ссылка на галерею с изображением будет выглядеть примерно так: 

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

изменить на следующее: 

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

rel = "prettyphoto [gallery]" гарантирует, что все изображения с этим [] будут сгруппированы, отображая следующее и заданное по умолчанию.

Без этого он вызовет только лайтбокс с одним изображением.

0 голосов
/ 10 февраля 2012

Вы должны изменить эти селекторы CSS:

div.light_squarex .pp_next: hover {background: url (../ images / prettyPhoto / light_square / btnNextplay.png) внизу справа no-repeat;курсор: указатель;} / * Следующая кнопка * /

div.light_squarex .pp_previous: hover {background: url (../ images / prettyPhoto / light_square / btnPrevious.png) внизу слева no-repeat;курсор: указатель;} / * Предыдущая кнопка * /

Просто удалите: hover и стрелки будут отображаться по умолчанию без наведения мыши.

...