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

Установка:
Создаем информер по любым параметрам.
В шаблон информера вставляем данный код:
Code
<li>  
<a href="$ENTRY_URL$">  
<img width="90" height="60" src="$IMG_SMALL_URL1$" class="attachment-90x60 wp-post-image" alt="$ENTRY_NAME$" title="$ENTRY_NAME$" /></a></li>  
<div style="display: none">by ilyafridinskii</div>


Этот код вставляем туда где будет находиться сам слайдер:
Code
<script type="text/javascript" src='http://www.nickelodeon.ru/wp-content/themes/MTV-RU/carousel.js'></script>  
<script type="text/javascript">  
  iScroll = 9; //number of visible and scroll elements  
  function checkButtons()  
  {  
  var vleft = jQuery("#slidermenu ul").css('left');  
  var vwidth = jQuery("#slidermenu ul li:first").outerWidth( true );  
  var vcount = jQuery("#slidermenu ul li").size();  
  var vcount = vcount * vwidth - (iScroll*vwidth);  
   
  var vvalue = '-'+vcount+'px';  
   
  jQuery(".bnext").removeClass('bdisabled');  
  jQuery(".bprev").removeClass('bdisabled');  
   
   
  if(vleft == '0px')  
  {  
  jQuery(".bprev").addClass('bdisabled');  
  return;  
  }  
  else if(vleft == vvalue)  
  {  
  jQuery(".bnext").addClass('bdisabled');  
  return;  
  }  
  }  
  //jCarousel  
  jQuery(function() {  
  jQuery("#slidermenu").jCarouselLite({  
  btnNext: ".bnext",  
  btnPrev: ".bprev",  
  visible: iScroll,  
  scroll: iScroll,  
  circular: 0,  
  speed: 1000,  
  easing: "easein",  
  afterEnd: function(a) {  
  checkButtons();  
  }  
  });  
  checkButtons();  
   
   
  //overlay to login buttons  
  jQuery('#buttonsOverlayClick, .overlayButtons').hover(function(){  
  var vis = jQuery('.overlayButtons').css('visibility');  

  if( vis == 'hidden' )  
  jQuery('.overlayButtons').css('visibility', 'visible');  
  else  
  jQuery('.overlayButtons').css('visibility', 'hidden');  

  })  
});  
</script>  
<div id="sliderwrap">  
<div id="slidermenu">  
  <div class="p"><a class="bprev" href="#"><span>Предыдущий шаг </span></a></div>  
  <div class="n"><a class="bnext" href="#"><span>Закат</span></a></div>  
  <div class="cliped">  
  <ul>  
$MYINF_2$  

  </ul>  
  <br class="clear" />  
  </div>  
</div>  
</div>  
<script language="JavaScript">  
  if(jQuery.browser.msie && jQuery.browser.version=="6.0") {jQuery("#main").addClass("mainIE6");}  
</script>  

  <a id="rpxnowLink" style="display: none" onclick="return false;" href="https://connect.nickelodeon.ru/openid/v2/signin?token_url=http%3A%2F%2Fvn.nickelodeon.ru%2Frpx" class="rpxnow"></a>  
  <script type="text/javascript" src="http://static.rpxnow.com/js/lib/rpx.js"></script>  
  <script type="text/javascript">  
  RPXNOW.overlay = true;  
  RPXNOW.language_preference = 'ru';  
  </script>  
<style>  
/* slidermenu */  
#slidermenu { position: relative; margin-bottom: 6px; margin-top: 8px; width: 100% !important; overflow: hidden; }  
#slidermenu .cliped { width: 873px; height: 60px; margin-left: 27px; overflow: hidden; }  

#slidermenu .p, #slidermenu .n { position: absolute; top: 0; width: 27px; height: 60px; z-index: 10 }  
#slidermenu .p { left: 0; }  
#slidermenu .n { right: 0; }  
#slidermenu .p a, #slidermenu .n a { display: block; width: 27px; height: 60px; background: #fff url(http://www.nickelodeon.ru/wp-content/themes/MTV-RU/images/icon-slider-1.png) no-repeat; }  
#slidermenu .p span, #slidermenu .n span { display: none; }  
#slidermenu .n a { background-position: right top; }  
#slidermenu .n a.bdisabled { background-position: right bottom; }  
#slidermenu .p a { background-position: left top; }  
#slidermenu .p a.bdisabled { background-position: left bottom; }  
/*#slidermenu .n a:hover { background-position: right top; }  
#slidermenu .p a:hover { background-position: left top; }*/  

#slidermenu ul { display: block; position: relative; left: -98px; height: 60px; width:9999px; }  
#slidermenu ul li { display: inline; float: left; margin-right: 8px; width: 90px; }  
/* /slidermenu */  

#sliderwrap { margin: 0; padding: 8px 8px 2px 8px; background: #fff; }  
#sliderwrap #slidermenu { margin-top: 0; }  
#sliderwrap { margin: 0; padding: 8px 8px 2px 8px; background: #fff; }  
#sliderwrap #slidermenu { margin-top: 0; }  
</style>

  Просмотров: 10522 | Категория: Слайдера для ucoz | Добавил: NA

Другие новости


Поделиться ссылкой


Ссылка:
BB-code:
HTML:
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
SYLTAN пишет: | 24 июля 2012 21:27
Код даже скопировать нельзя....
Илюха10 пишет: | 24 июля 2012 22:15
Ctrl+C
flikc пишет: | 18 сентября 2012 22:06
Подскажите, не работает слайдер, не загружает изображения. За ссылку на картинку отвечает $img_small_url1$, но я в этом деле новичок, поясните плиз как сделать чтоб загружались картинки. Это при добавлении материала нужно что-то делать?
flikc пишет: | 19 сентября 2012 07:27
У меня он и написан большими буквами, просто скопирован, он есть, но он не загружает из каталога файлов изображения и не только он, с другими тоже самое, помогите.
flikc пишет: | 19 сентября 2012 18:10
Создавал по каталогу статей и фалов. Ни там ни там не работал, он есть, названия (в других слайдерах) есть, картнки не прогружаються
flikc пишет: | 19 сентября 2012 19:02
Спасибо, разобрался!
flikc пишет: | 20 сентября 2012 22:29
Как высоту изменить???
gi906 пишет: | 25 сентября 2012 19:25
Nice , Спасибо
PreZident пишет: | 27 октября 2012 16:08
как высоту и ширину отрегулировать слайдера???
nika пишет: | 2 ноября 2012 13:45
расскажите по подробнее как поставить этот слайдер и куда картинки добавлять новые?
nika пишет: | 2 ноября 2012 13:56
а то стрелки висят ,а картинок нету
nika пишет: | 2 ноября 2012 14:31
я создал информер,открыл его шаблон , теперь вопрос , куда вставлять первую часть до </table> или после
nika пишет: | 2 ноября 2012 18:17
ну а что ж ты раньше то молчал?а код информера в слайдер вставлять надо?
nika пишет: | 2 ноября 2012 18:21
всё сделал , стрелки есть ,фоток нету
slavik1111 пишет: | 12 марта 2013 20:21
На будущее коллегам,пропишите номер вашего информера,тут стоит $MYINF_2$ и вопросы отпадут куда делись картинки,я сейчас тоже сидел тормозил пока не вспомнил