Красивый Слайдер Новостей (by ilyafridinskii специально для webo4ka.ru)


Красивый Слайдер Новостей (by ilyafridinskii специально для webo4...

2734
8 из 10
Проголосовало: 4





Уникальный слайдер uCoz которого еще не было в сети! Я сделал его недавно. По заказу моего друга. Идея слайдера была взята с nickelodeon.ru, также оттуда некоторые коды. Я преобразовал в их информер. По умолчанию стоит 15 материалов, но вы можете увеличивать их до максимального, так как слайдер с прокруткой. Демо можно посмотреть тут: ДЕМО!
Итак приступим к установке:
1)создаем информер с параметрами:
-Новости Сайта
-Материалы
-Дата добавления D
-15 материалов (или более)
-1 колонка
В код информера ставим:
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>

2)Вставляем где будет слайдер:
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>

На этом все! Приятного отпуска smile
Автор публикации: Загрузка
Загрузка
Maestro, это его n материал
Источник: http://ilyafridinskii.3dn.ru, webo4ka.ru
  • Всего комментариев: 20

Admin3476
0
Admin3476 написал: Написано 14 Января 2013 в 00:32
Комментарий №19
у меня картинки не видно на 100 %?

KinomaN
0
KinomaN написал: Написано 21 Июля 2012 в 13:51
Комментарий №17
А где высота здесь редактируется?

Maestro
0
Maestro написал: Написано 22 Июля 2012 в 16:34
Комментарий №18
в первом коде
Quote
<img width="90" height="60" src="$IMG_SMALL_URL1$" class="attachment-90x60 wp-post-image" alt="$ENTRY_NAME$" title="$ENTRY_NAME$" /></a></li>

ADMINMOS
0
ADMINMOS написал: Написано 22 Февраля 2013 в 14:38
Комментарий №20
MOJNO ZDELAT AVTOPEREXOD?

weer
0
weer написал: Написано 18 Июля 2012 в 13:41
Комментарий №12
Офигенный скрипт..Автору респект. smile smile smile smile smile smile Я с него сделал еще топ пользователей =))))

Maestro
0
Maestro написал: Написано 18 Июля 2012 в 16:04
Комментарий №16
biggrin

Kelin
0
Kelin написал: Написано 18 Июля 2012 в 11:28
Комментарий №11
Нашел... Нашел!!! Урааа!!! biggrin

Maestro
0
Maestro написал: Написано 18 Июля 2012 в 16:03
Комментарий №13
biggrin искал?

Сергей
0
Сергей написал: Написано 18 Июля 2012 в 07:40
Комментарий №10
Ну слава богу выложили этот слайдер самый лучший слайдер какой я видел с меня 6+ и наградка

Maestro
0
Maestro написал: Написано 18 Июля 2012 в 16:03
Комментарий №14
искал слайдер? biggrin

Никита1110
0
Никита1110 написал: Написано 17 Июля 2012 в 21:59
Комментарий №9
крутой слайдер smile

Maestro
0
Maestro написал: Написано 18 Июля 2012 в 16:03
Комментарий №15
спасибо

Voker
0
Voker написал: Написано 17 Июля 2012 в 21:10
Комментарий №7
Демо уберите. Сайт активный.
Демо стаят только на пустые сайты.

Deni_Coste
0
Deni_Coste написал: Написано 17 Июля 2012 в 20:46
Комментарий №4
Но ChipMunk, норм по работал biggrin

Maestro
+1
Maestro написал: Написано 17 Июля 2012 в 20:57
Комментарий №5
спасибо biggrin если кто помнить я и есть ilyafridinskii (chipmuink) biggrin все не так просто я вам скажу biggrin

Voker
0
Voker написал: Написано 17 Июля 2012 в 21:09
Комментарий №6
это же просто переделка.....не написал же ты js скрипт dry

Maestro
0
Maestro написал: Написано 17 Июля 2012 в 21:27
Комментарий №8
все же переделку не за 5 минут делают

Deni_Coste
0
Deni_Coste написал: Написано 17 Июля 2012 в 20:45
Комментарий №3
Бульбулятор, согласен с тобой

AndreyKlipikov
0
AndreyKlipikov написал: Написано 17 Июля 2012 в 20:07
Комментарий №1
Вот если бы с нуля сам написал, то сказал бы: молодец, а так ... dry

Maestro
0
Maestro написал: Написано 17 Июля 2012 в 20:34
Комментарий №2
biggrin ну хотя бы работает

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Ох. Вижу, что обсуждение очень старое. Но!
На других CMS так же будет все это реализовано. На нормальных CMS.
Такое решение может подойти лишь для landing сайтов. Но и то, не думаю, что там кто то заморачивается в написании какого либо контроллера генерирования шаблона и используют прямо в лоб чистый HTML, поэтому и будут для каждой страницы свои блоки делать.

Поэтому лучше тут все же дописать решение именно для ucoz без загрузки этих лишних блоков на странице. Ведь используя условные операторы этот код даже не будет прогружаться на странице. (Лол. Это ж доли секунд загрузки...) И что? Но давайте делать оптимальнее
Моё авторство:)
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
  • Handyman написал:
  • Не появляется код безопасности для обычных пользователей
    Последние темы
    Опрос
    228
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: