Форма входа

mvcreative

Старая форма входа

  • Страница 1 из 1
  • 1
Модератор форума: BSide  
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » LightSlider v. 0.1 от ElegantThemes (Эксклюзивный рип для MVC)
LightSlider v. 0.1 от ElegantThemes
footballmasterДата: Пятница, 29.10.2010, 17:34 | Сообщение # 1
Спикер
Группа: Пользователи
Пользователь №: 191
Сообщений: 207
Награды: 9
Репутация: 43
Статус: оффлайн
Представляю вам свой собственный рип для MVC под названием LightSlider

Демо

Установка:

Это в head и /head

Code
<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

Code
<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>

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

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

Code
  <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

Прошу комментировать booze



Кто хочет заказать у меня дизайн сайта стучите в Skype: alexandru_lampard ; ICQ: 614017088


Сообщение отредактировал footballmaster - Суббота, 30.10.2010, 15:04
 
вверх
cechДата: Пятница, 29.10.2010, 17:54 | Сообщение # 2
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
footballmaster, Красивый стильный слайдер, спасибо) Теперь парочку нюансов, код скрипта лучше всего ванести в отдельный файл, а вот этот скрипт вообще не нужен, он и так уже у всех есть автоматом

Code
<script type='text/javascript' src='http://www.elegantthemes.com/preview/DeepFocus/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>



 
вверх
footballmasterДата: Пятница, 29.10.2010, 17:57 | Сообщение # 3
Спикер
Группа: Пользователи
Пользователь №: 191
Сообщений: 207
Награды: 9
Репутация: 43
Статус: оффлайн
cech, спасибо за оценку. Хорошо что напомнил про тот скрипт, я опять забыл что на юкозе он идёт автоматом.
Уже исправил в теме.




Кто хочет заказать у меня дизайн сайта стучите в Skype: alexandru_lampard ; ICQ: 614017088


Сообщение отредактировал footballmaster - Пятница, 29.10.2010, 18:25
 
вверх
ELYSIUMДата: Пятница, 29.10.2010, 20:22 | Сообщение # 4
Говорун
Группа: Пользователи
Пользователь №: 16
Сообщений: 55
Награды: 0
Репутация: 2
Статус: оффлайн
cech, хех а я опять с тупым вопросом))) можно вместо картинок видео? =)


Реклама запрещена!
 
вверх
footballmasterДата: Пятница, 29.10.2010, 21:08 | Сообщение # 5
Спикер
Группа: Пользователи
Пользователь №: 191
Сообщений: 207
Награды: 9
Репутация: 43
Статус: оффлайн
ELYSIUM, теоретически можно. Но не пробовал.



Кто хочет заказать у меня дизайн сайта стучите в Skype: alexandru_lampard ; ICQ: 614017088
 
вверх
cechДата: Пятница, 29.10.2010, 23:42 | Сообщение # 6
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
ELYSIUM, ну автор не я, я тебе больше скажу я даже и не всматривался особов слайдер, по сути все можно) попробуй вставить...


 
вверх
василийДата: Суббота, 30.10.2010, 13:56 | Сообщение # 7
Шептун
Группа: Пользователи
Пользователь №: 110
Сообщений: 48
Награды: 0
Репутация: 0
Статус: оффлайн
слайдер реально хорош =) однако не особо радует то что видно в этом скрине! это можно как то исправить?


Сообщение отредактировал василий - Суббота, 30.10.2010, 14:00
 
вверх
cechДата: Суббота, 30.10.2010, 14:09 | Сообщение # 8
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
василий, откуда ты это взял то?) через лису наверное смотришь


 
вверх
василийДата: Суббота, 30.10.2010, 22:45 | Сообщение # 9
Шептун
Группа: Пользователи
Пользователь №: 110
Сообщений: 48
Награды: 0
Репутация: 0
Статус: оффлайн
вообще то да =)) а что? это только в ней баг такой?
 
вверх
cechДата: Воскресенье, 31.10.2010, 00:09 | Сообщение # 10
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
василий, ну как бы да) обводка так называемая, решения уже не помню нужно поискать в интернете.


 
вверх
Angry4178Дата: Пятница, 12.11.2010, 17:51 | Сообщение # 11
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
cech, как найдешь - оповести пожалуйста..т.к немного раздражает линия...
footballmaster, спасибо за слайдер.



 
вверх
AngryДата: Воскресенье, 30.01.2011, 21:18 | Сообщение # 12
Авы нет
Дизайнер и модератор по совместительству
Группа: Пользователи
Пользователь №: 481
Сообщений: 268
Награды: 1
Репутация: 0
Статус: оффлайн
Нашел решение, в CSS добавьте:
Code
a img {
    border: none;
}
  
 
вверх
Klepa4kaДата: Среда, 16.02.2011, 01:53 | Сообщение # 13
Авы нет
Молчун
Группа: Пользователи
Пользователь №: 734
Сообщений: 2
Награды: 0
Репутация: 0
Статус: оффлайн
Что-то я наверно туплю, но не работает. Появляется на странице 4 новых пустых окна. =/ Пихаю не туда походу что-то biggrin
 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » LightSlider v. 0.1 от ElegantThemes (Эксклюзивный рип для MVC)
  • Страница 1 из 1
  • 1
Поиск: