|
   |
| Forum moderator: bigblog |
| uCoz Community » For Webmasters » Custom Solutions » Beautiful Slider with informer (Tutorial) |
| Beautiful Slider with informer |
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 |
Welcome ^^
My Skype : xayan123 | My Twitter : @Officialxayaan
uID : - Zayaan Ibrahim | Need a professional design? Check out my Portfolio |
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
|
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 |
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 |
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 |
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
|
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, please contact other staff or tech support
icon by ch-chau sometimes i lurk here |
| |||
| |||