• Page 1 of 1
  • 1
Forum » Some informative Tips » Computer » Beautiful Slider with informer (Tutorial)
Beautiful Slider with informer
dense
Head Mode
Модератор
31 Post:
1668 Reputation:
This tutorial shows you how to uses a jQuery slider along with a informer on a uCoz website. 

Installation: 
Create a Informer For any parameters. 
In the template informer paste this code:

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 Xayaan</div>

This code below will be put on the place where you want the slider to appear :
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>
 
Best Regards.
 
Forum » Some informative Tips » Computer » Beautiful Slider with informer (Tutorial)
  • Page 1 of 1
  • 1
Search: