• Page 1 of 1
  • 1
Forum moderator: bigblog  
uCoz Community » For Webmasters » Custom Solutions » Beautiful Slider with informer (Tutorial)
Beautiful Slider with informer
Xayaan
Posts: 558
Reputation: 13

Message # 1 | 7:16 AM
Beautiful Slider with informer.

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.

My Skype : xayan123 | My Twitter : @Officialxayaan
uID : - Zayaan Ibrahim | Need a professional design? Check out my Portfolio
LIBertea
Posts: 85
Reputation: 1

Message # 2 | 7:03 PM
Thank you!!
Xayaan
Posts: 558
Reputation: 13

Message # 3 | 4:45 AM
Welcome ^^
My Skype : xayan123 | My Twitter : @Officialxayaan
uID : - Zayaan Ibrahim | Need a professional design? Check out my Portfolio
admin3007
Posts: 6
Reputation: 0

Message # 4 | 5:09 PM
can you make it with bigger images, like 600x275 or something like that, and with only 1 image after another. I mean there should be shown the 2nd image only after I click on that arrow?
Post edited by admin3007 - Thursday, 2013-04-18, 5:09 PM
Xayaan
Posts: 558
Reputation: 13

Message # 5 | 7:02 AM
admin3007, If you want a slider of that size , Use google and search for jQuery sliders that size.You can also disable auto-play in the slider i have given above.
My Skype : xayan123 | My Twitter : @Officialxayaan
uID : - Zayaan Ibrahim | Need a professional design? Check out my Portfolio
yaamaan
Posts: 81
Reputation: 0

Message # 6 | 5:01 PM
Hello there
I want some more clarification on this

I want to add an image also in my infomer for Blog. so, every link must have a small image followed by the URL link. How can i do it.

Also i tried to use the slider. How to do that? Please tell step by step.

Thank u
Xayaan
Posts: 558
Reputation: 13

Message # 7 | 6:04 PM
yaamaan, I'm sorry to say this but the main JS - carousel.js for the slider has been removed from the original path. As for the informer with blog, You just need to set the informer category to "Blog" and you're all set. I'll update this post with the correct JS so it's functional.
My Skype : xayan123 | My Twitter : @Officialxayaan
uID : - Zayaan Ibrahim | Need a professional design? Check out my Portfolio
fenixsitecom
Posts: 1
Reputation: 0

Message # 8 | 9:07 PM
Hello. Please if someone have code i need slider like this or similar
i cant find on ucoz any similar script!
I need it for post pages like on page provided.
Post edited by fenixsitecom - Monday, 2020-02-17, 9:11 PM
joexyz
JOE-vascript
Posts: 1763
Reputation: 78

Message # 9 | 6:55 PM
fenixsitecom, you could perhaps try using this: https://kenwheeler.github.io/slick/
hey i'm joe and i do not work for the company anymore, sorry for the late replies
icon by ch-chau

sometimes i lurk here
uCoz Community » For Webmasters » Custom Solutions » Beautiful Slider with informer (Tutorial)
  • Page 1 of 1
  • 1
Search: