» »

Слайдер на страницу материала и комментариев к нему


Слайдер на страницу материала и комментариев к нему

Здравствуйте кидаю вам очередной можно сказать полезный по моему мнению,скрипт на страницу материала и комментариев к нему. Слайдер на страницу материала и комментариев к нему. Которая может очень грамотно расположится и выдавать также материал который находиться на сайте.
Описание скрипта!
Возможности скрипта,у многих на странице материала и комментариев к нему изображение малого размера
и многие просто не умеют работать с CSS я Вам упрощу эту задачу при помощи этого скрипта!
И так это ставим перед $MESSAGE$ в шаблоне вставляй код:

Код
  
  <?if($IMG_URL1$ or $IMG_URL2$ or $IMG_URL3$ )?>  
  <div class="box" align="center" >  
  <div class="slider dsslider">  
  <div class="sliderContent"><?if($IMG_URL1$)?>  
  <div class="item">  
  <img src="$IMG_URL1$">  
  </div><?endif?><?if($IMG_URL2$)?>  
  <div class="item" >  
  <img src="$IMG_URL2$">  
  </div><?endif?><?if($IMG_URL3$)?>  
  <div class="item">  
  <img src="$IMG_URL3$">  
  </div><?endif?>  

  </div></div></div><br><br><?endif?>  
   
  <script src="http://212legion.clan.su/js/mobilyslider.js" type="text/javascript">  
  </script>  
  <script type="text/javascript">  
  $('.dsslider').mobilyslider({  
  // Тип воспроизведения (vertical) или удалить всю строку  
  transition: 'fade',  
  // Скорость перелистывания  
  animationSpeed: 800,  
  // Автовоспроизведение включено  
  autoplay: true,  
  // Скорость автовоспроизведения  
  autoplaySpeed: 7000,  
  // Остановка во время наведения курсора (false)  
  pauseOnHover: true,  
  // Показывать кнопки вперёд назад (false)  
  bullets: true,  
  // Показывать нижние кнопки управления (false)  
  arrowsHide: true  
  });  
  </script>  
  


Не забываем!
Убрать вот этот код у вас на материала и комментариев к нему или у вас будет два изображения!
Код
<img class="fmimg" src="<?if($IMG_URL1$)?>$IMG_URL1$<?else?>$SCREEN_URL$<?endif?>">


Этот код ставим в CSS

Код
  
  .slider {  
  /* Ширина слайдера */  
  width:500px;  
  /* Высота слайдера */  
  height:400px;  
  position:relative;  
  padding-bottom:26px;  
  background:url(http://212legion.clan.su/images/bottom_shadow1.pn) no-repeat bottom center;  
  }  
  .sliderContent {  

  /* Ширина слайдера */  
  width:500px;  
  /* Высота слайдера */  
  height:400px;  
  clear:both;  
  position:relative;  
  overflow:hidden;  
  }  
  .sliderArrows a {  
  display:block;  
  text-indent:-9999px;  
  outline:none;  
  z-index:50;  
  background-image:url(http://212legion.clan.su/images/prev_next.png);  
  width:42px;  
  height:42px;  
  position:absolute;  
  top:50%;  
  margin-top:-34px;  
  }  
  .prev {  
  background-position:0 0;  
  left:15px;  
  }  
  .prev:hover {  
  background-position:0 -44px;  
  }  
  .next {  
  right:15px;  
  background-position:-44px 0;  
  }  
  .next:hover {  
  background-position:-44px -44px;  
  }  
  .item {  
  position:absolute;float:left;}  
  .item img{  
  /* Ширина слайдера */  
  width:500px;  
  /* Высота слайдера */  
  height:400px;  
  background:#000;  
  background-size:100% 100%;  
  -moz-background-size:100% 100%;  
  -webkit-background-size:100% 100%;  
  -o-background-size:100% 100%;  
  -ms-background-size:100% 100%;  
  }  
  .sliderBullets {  
  position:absolute;  
  bottom:0;  
  left:50%;  
  z-index:50;  
  margin-left:-25px;  
  }  
  .sliderBullets a {  
  display:block;  
  float:left;  
  text-indent:-9999px;  
  outline:none;  
  margin-left:5px;  
  width:10px;  
  height:11px;  
  background:url(http://212legion.clan.su/images/bullets.png) no-repeat;  
  }  
  .sliderBullets .active {  
  background-position:0 -11px;  
  }  
  .sliderContent a {  
  outline:none;  
  }  
  


Ну вроде и все,кому че не понятно пишите в коментарии!
11.01.2016 Просмотров: 516 Комментарий: (4)

Поделиться в социальных сетях

Материал разместил

Комментарий: 4
ТОРНАДО
ТОРНАДО 11.01.2016 11:151
0
На счет этого скрипта я так скажу,он не всем полезен,со временем появляются разработанные шаблоны,где уже все модели разработаны до скональности,но пока кто этого не достиг может попробывать и этот скрипт!
tsakonter
tsakonter 11.01.2016 18:132
0
Слайдер в виде материалов и комментариев, это сто то новое.
Kvint
Kvint 11.01.2016 18:163
0
Это не то что новое, это не нужное чтоб стояло на этой страницы, что то мне кажется, что перебор информации будет.
Сопрано
Сопрано 11.01.2016 21:564
0
Но также можно вывести этот слайдер на главную страницу. Так как в виде комментариях его только вот и не хватало.
avatar