Я хотел бы добавить более одной галереи, используя один и тот же JQuery - PullRequest
Новая
       10

Я хотел бы добавить более одной галереи, используя один и тот же JQuery

1 голос
/ 22 ноября 2011

У меня мало знаний о jquery, и мне интересно, что я делаю не так. Я хотел бы разместить несколько галерей на странице, но я не знаю, как установить коды для их правильной загрузки.

Ответы [ 2 ]

0 голосов
/ 22 ноября 2011

вы можете установить его вручную, присвоив каждой галерее уникальный идентификатор 

  $(document).ready(
  function (){
      $("#pikame1").PikaChoose();
      $("#pikame2").PikaChoose();
      $("#pikame3").PikaChoose();
      ...
  });

или вы также можете присвоить всей вашей галерее общее имя css, а затем запустить каждую функцию, чтобы обработать их все сразу. 

  $(document).ready(function (){
      $('.pikame').each(function(){
           $(this).PikaChoose();
      });
  });

единственное, что селекторы css в вашей части css относятся к элементу, имеющему определенный идентификатор.вы также можете создать больше css, например, с разными ul идентификаторами, или вы можете также изменить эти селекторы, чтобы выбрать класс, а не идентификатор

, например, из этого: 

 ul#pikame{
   margin-left: 80px;
 }

в следующее: 

 ul.pikame{
   margin-left: 80px;
 }

обратите внимание на селектор $ ('# pikame1') и $ ('. Pikame').первый относится к идентификатору, а второй к CSS.

0 голосов
/ 22 ноября 2011

Javascript просто для того, чтобы «включить магию». Поместите все HTML, что вам нужно, на страницу, а затем инициализируйте его с помощью JavaScript. Самый простой способ понять (хотя и не самый эффективный) - просто сделать много копий кода, который у вас есть.

заполните пробелы: 

<script language="javascript" type="text/javascript">
   $(document).ready(
   function (){
       $("#pikame1").PikaChoose();
       $("#pikame2").PikaChoose();
       $("#pikame3").PikaChoose();
       ...
   });
</script>

заполните пробелы: 

<ul id="pikame1" class ="pikame clearfix">
...
</ul>

<ul id="pikame2" class ="pikame clearfix">
...
</ul>

<ul id="pikame3" class ="pikame clearfix">
...
</ul>

...

точно так же: 

.pikame{
 margin-left: 80px;
 }
 .pika_main{
 width:420px;
 margin-top: 100px;
 }

 .pikame li{
    margin:5px;
    margin-top:20px;
    float: left;
    border:1px solid #3e3f41;
    position:relative;
    overflow:hidden;}

/**ADVANCED OPTIONS**/
.pikame li img{position:relative;cursor:pointer;}
.pika_main img{border:2px solid #3e3f41;}
.pika_main{position: relative;margin:0 auto;margin-left:60px; margin-top:32px;}
.pikachoose li{float:left;position:relative;overflow:hidden;list-style:none;}
.pika_play{position:absolute;top:7px;z-index:1;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;}
.pika_play img{border:none !important;}
.pika_caption{width:100%;height:30px;text-align:center;}
.pika_navigation a{font-size: 12px;color:white;text-decoration: none;}
.pika_navigation a:hover{text-decoration: underline;}
.pika_navigation{padding-top:10px;clear:both;text-align:center;}

Дайте мне знать, если есть какие-либо проблемы с этим, так как я немного изменил CSS, чтобы не быть избыточным, мог мешать существующим стилям.

...