O-uCoz.com

спонсор

LightSlider v. 0.1 от ElegantThemes

01.07.2025 просмотров 368 | комментарии 0


Установка:
Это в head и /head
Код

<link rel='stylesheet' id='shortcodesStyleSheets-css' href='http://www.elegantthemes.com/preview/DeepFocus/wp-content/themes/DeepFocus/epanel/shortcodes/shortcodes.css?ver=3.0' type='text/css' media='all' />  

  <script type='text/javascript'>  
  // <![CDATA[  
   
  <!---- et_switcher plugin v2 ---->  
  (function($)  
  {  
  $.fn.et_shortcodes_switcher = function(options)  
  {  
  var defaults =  
  {  
  slides: '>div',  
  activeClass: 'active',  
  linksNav: '',  
  findParent: true, //use parent elements to define active states  
  lengthElement: 'li', //parent element, used only if findParent is set to true  
  useArrows: false,  
  arrowLeft: 'a#prev-arrow',  
  arrowRight: 'a#next-arrow',  
  auto: false,  
  autoSpeed: 5000,  
  slidePadding: '',  
  pauseOnHover: true,  
  fx: 'fade',  
  sliderType: ''  
  };  

  var options = $.extend(defaults, options);  

  return this.each(function()  
  {  
   
  var slidesContainer = jQuery(this).parent().css('position','relative'),  
  $slides = jQuery(this).css({'overflow':'hidden','position':'relative'}),  
  $slide = $slides.find(options.slides).css({'opacity':'1','position':'absolute','top':'0px','left':'0px','display':'none'}),  
  slidesNum = $slide.length,  
  zIndex = slidesNum,  
  currentPosition = 1,  
  slideHeight = 0,  
  $activeSlide,  
  $nextSlide;  
   
  if (options.fx === 'slide') {  
  $slide.css({'opacity':'0','position':'absolute','top':'0px','left':'0px','display':'block'});  
  } else {  
  $slide.filter(':first').css({'display':'block'});  
  }  
   
  if (options.slidePadding != '') $slide.css('padding',options.slidePadding);  
   
  $slide.each(function(){  
  jQuery(this).css('z-index',zIndex).addClass('clearfix');  
  if (options.fx === 'slide') zIndex--;  
   
  slideH = jQuery(this).innerHeight();  
  if (slideH > slideHeight) slideHeight = slideH;  
  });  
  $slides.css('height', slideHeight);  
  $slides.css('width', $slides.width());  
   
  var slideWidth = $slide.width(),  
  slideOuterWidth = $slide.outerWidth();  
   
  $slide.css('width',slideWidth);  
   
  $slide.filter(':first').css('opacity','1');  
   
  if (options.sliderType != '') {  
  if (options.sliderType === 'images') {  
  controllersHtml = '<div class="controllers-wrapper"><div class="controllers"><a href="#" class="left-arrow">Previous</a>';  
  for ($i=1; $i<=slidesNum; $i++) {  
  controllersHtml += '<a class="switch" href="#">'+$i+'</a>';  
  }  
  controllersHtml += '<a href="#" class="right-arrow">Next</a></div><div class="controllers-right"></div></div>';  
  $controllersWrap = jQuery(controllersHtml).prependTo($slides.parent());  
  jQuery('.controllers-wrapper .controllers').css('width', 65 + 18*slidesNum);  
  }  
   
  var etimage_width = $slide.width();  
   
  slidesContainer.css({'width':etimage_width});  
  $slides.css({'width':etimage_width});  
   
  if (options.sliderType === 'images') {  
  slidesContainer.css({'height':$slide.height()});  
  $slides.css({'height':$slide.height()});  
   
  var controllers_width = $controllersWrap.width(),  
  leftPosition = Math.round((etimage_width - controllers_width) / 2);  
   
  $controllersWrap.css({left: leftPosition});  
  }  
  }  
   
   
  if (options.linksNav != '') {  
  var linkSwitcher = jQuery(options.linksNav);  
   
  var linkSwitcherTab = '';  
  if (options.findParent) linkSwitcherTab = linkSwitcher.parent();  
  else linkSwitcherTab = linkSwitcher;  
   
  if (!linkSwitcherTab.filter('.active').length) linkSwitcherTab.filter(':first').addClass('active');  
   
  linkSwitcher.click(function(){  
   
  var targetElement;  

  if (options.findParent) targetElement = jQuery(this).parent();  
  else targetElement = jQuery(this);  
   
  var orderNum = targetElement.prevAll(options.lengthElement).length+1;  
   
  if (orderNum > currentPosition) gotoSlide(orderNum, 1);  
  else gotoSlide(orderNum, -1);  
   
  return false;  
  });  
  }  
   
   
  if (options.useArrows) {  
  var $right_arrow = jQuery(options.arrowRight),  
  $left_arrow = jQuery(options.arrowLeft);  
   
  $right_arrow.click(function(){  
  if (currentPosition === slidesNum)  
  gotoSlide(1,1);  
  else  
  gotoSlide(currentPosition+1),1;  
   
  if (options.linksNav != '') changeTab();  
   
  return false;  
  });  
   
  $left_arrow.click(function(){  
  if (currentPosition === 1)  
  gotoSlide(slidesNum,-1);  
  else  
  gotoSlide(currentPosition-1,-1);  
   
  if (options.linksNav != '') changeTab();  
   
  return false;  
  });  
   
  }  
   
   
  function changeTab(){  
  if (linkSwitcherTab != '') {  
  linkSwitcherTab.siblings().removeClass('active');  
  linkSwitcherTab.filter(':eq('+(currentPosition-1)+')').addClass('active');  
  }  
  }  
   
  function gotoSlide(slideNumber,dir){  
  if ($slide.filter(':animated').length) return;  
   
  $slide.css('opacity','0');  
   
  $activeSlide = $slide.filter(':eq('+(currentPosition-1)+')').css('opacity','1');  
   
  if (currentPosition === slideNumber) return;  
   
  $nextSlide = $slide.filter(':eq('+(slideNumber-1)+')').css('opacity','1');  
   
  if ((currentPosition > slideNumber || currentPosition === 1) && (dir === -1)) {  
  if (options.fx === 'slide') slideBack(500);  
  if (options.fx === 'fade') slideFade(500);  
  } else {  
  if (options.fx === 'slide') slideForward(500);  
  if (options.fx === 'fade') slideFade(500);  
  }  
   
  currentPosition = $nextSlide.prevAll().length + 1;  
   
  if (options.linksNav != '') changeTab();  
   
  if (typeof interval != 'undefined' && options.auto) {  
  clearInterval(interval);  
  auto_rotate();  
  }  
   
  return false;  
  }  
   
   
  if (options.auto) {  
  auto_rotate();  
  var pauseSlider = false;  
  }  
   
  if (options.pauseOnHover) {  
  slidesContainer.hover(function(){  
  pauseSlider = true;  
  },function(){  
  pauseSlider = false;  
  });  
  }  
   
  function auto_rotate(){  
   
  interval = setInterval(function(){  
  if (!pauseSlider) {  
  if (currentPosition === slidesNum)  
  gotoSlide(1,1);  
  else  
  gotoSlide(currentPosition+1),1;  
   
  if (options.linksNav != '') changeTab();  
  }  
  },options.autoSpeed);  
   
  }  
   
  function slideForward(speed){  
  $nextSlide.css('left',slideOuterWidth+'px');  
  $activeSlide.animate({left: '-'+slideOuterWidth},speed);  
  $nextSlide.animate({left: 0},speed);  
  }  
   
  function slideBack(speed){  
  $nextSlide.css('left','-'+slideOuterWidth+'px');  
  $activeSlide.animate({left: slideOuterWidth},speed);  
  $nextSlide.animate({left: 0},speed);  
  }  
   
  function slideFade(speed){  
  $activeSlide.css({zIndex: slidesNum}).fadeOut(700);  
  $nextSlide.css({zIndex: (slidesNum+1)}).fadeIn(700);  
  }  
   
  });  
  }  
  })(jQuery);  
  <!---- end et_switcher plugin v2 ---->  
   
  /////// Shortcodes Javascript ///////  
   
  /// tooltip ///  
   
  $et_tooltip = jQuery('.et-tooltip');  
   
  $et_tooltip.live('mouseover mouseout', function(event){  
  if (event.type == 'mouseover') {  
  jQuery(this).find('.et-tooltip-box').animate({ opacity: 'show', bottom: '25px' }, 300);  
  } else {  
  jQuery(this).find('.et-tooltip-box').animate({ opacity: 'hide', bottom: '35px' }, 300);  
  }  
  });  
   
  /// learn more ///  
   
  $et_learn_more = jQuery('.et-learn-more .heading-more');  
   
  $et_learn_more.live('click', function() {  
  if ( jQuery(this).hasClass('open') )  
  jQuery(this).removeClass('open');  
  else  
  jQuery(this).addClass('open');  
   
  jQuery(this).parent('.et-learn-more').find('.learn-more-content').animate({ opacity: 'toggle', height: 'toggle' }, 300);  
  });  
   
  // ]]>  
  </script>


А это в самом конце перед /body
Код

<script type='text/javascript'>  
  //jQuery(document).ready(function() {  
  jQuery('#et-image-slider737 .et-image-slides').et_shortcodes_switcher({sliderType: 'images', auto: true, autoSpeed: '5000',useArrows: true, fx: 'fade', arrowLeft: '#et-image-slider737 a.left-arrow', arrowRight: '#et-image-slider737 a.right-arrow', linksNav: '#et-image-slider737 .controllers a.switch',findParent: false, lengthElement: 'a.switch'});  
  //});  
  </script>


Активирование:

Данный слайдер активируется следующим кодом
Код


  <div class='et-image-slider' id='et-image-slider737'>  
  <div class='et-image-slides'>  
   
  <div class='et-image' style='background: url(http://ваш сайт/картинка) no-repeat; width: 800px; height: 500px;'><span class='et-image-overlay'> </span></div>  
  <div class='et-image' style='background: url(http://ваш сайт/картинка) no-repeat; width: 800px; height: 500px;'><span class='et-image-overlay'> </span></div>  
  <div class='et-image' style='background: url(http://ваш сайт/картинка) no-repeat; width: 800px; height: 500px;'><span class='et-image-overlay'> </span></div>  
  <div class='et-image' style='background: url(http://ваш сайт/картинка) no-repeat; width: 800px; height: 500px;'><span class='et-image-overlay'> </span></div>  
  </div>  
   
   
  </div> <!-- .et-image-slider -->


Картинки должны иметь размер 800px на 500px
Рубрика: uCoz скрипты Теги: V., ElegantThemes, от, 0.1, LightSlider, null
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Навигация
Горячие новости
Теги
Последние коментарии
DUMASS написал:
Спасибо за статью)
Статистика