Elegant banner rotator on jQuery
Probably every webmaster participates in an affiliate program and I am no exception. And to promote affiliate products, banner rotators are gaining more and more popularity. You can see an example of such a rotator on my website in the right sidebar.
Usually, in order to place such a rotator on your website, it is enough to install a special javascript code. If you go deeper, the task of this javascript is to embed a special iframe on your page, which already loads the banner rotator onto your page from the developer’s site.
All anything, but this approach has several disadvantages:
')
All this made me think of creating my own banner rotator and does not depend on anyone, and the last kick in the ass was for me the recent “fall” of Evgeny Popov’s site (or whatever it was with him), the rotator of which I use on this site, because of what my site was loaded for a long time.
As a result, my own banner rotator on jQuery was born, the main advantage of which is that its work does not require additional javascript libraries (except jQuery of course) and all the html-code of the rotator itself is generated by javascript in the plugin itself. This allows the browser to cache the plug-in file once and then take it from the cache, and this will increase the speed of the site loading.
In order to use such a rotator on your website, you first need to connect the jQuery library and the plugin itself. But we will connect the jQuery library not in the usual way, but from the Google repository.
This code must be placed between the tags on your site.
I will not dwell on this, since I have a special article on this topic “ Increasing the page loading speed by downloading jQuery from the Google repository ”, I can only say that using this approach, we can increase the page loading speed
After all the necessary javascript files are connected, you need to add the following styles to your page:
Once the styles are connected, you can start calling the plug-in rotator itself. To do this, in the place where you want to place the rotator write the following code:
Now we can call the plugin itself. This is done as follows:
As you can see, the plugin gives a number of parameters, namely:
Demo page can be viewed here.
Sources can be downloaded here.
Here is such a simple plugin to rotate your banners. I hope someone will come in handy.
UPD: Corrected the code, now after the last slide the first one is shown again. Also added several additional options for convenience.
Usually, in order to place such a rotator on your website, it is enough to install a special javascript code. If you go deeper, the task of this javascript is to embed a special iframe on your page, which already loads the banner rotator onto your page from the developer’s site.
All anything, but this approach has several disadvantages:
- Site vulnerability. Malicious code can be downloaded to your website. Therefore, developers should be trusted if you decide to place their rotator on your site.
- You depend on the developer site. Those. if the developer's site is not available, the banner rotator will not be displayed on your site.
- Increases page load time. If you look at the source code of such banner rotators, we can see that there are various javascript files and libraries that can weigh> 100kb. However, some libraries, such as jQuery, may already be connected to your page, but the browser will have to download it twice.
')
All this made me think of creating my own banner rotator and does not depend on anyone, and the last kick in the ass was for me the recent “fall” of Evgeny Popov’s site (or whatever it was with him), the rotator of which I use on this site, because of what my site was loaded for a long time.
As a result, my own banner rotator on jQuery was born, the main advantage of which is that its work does not require additional javascript libraries (except jQuery of course) and all the html-code of the rotator itself is generated by javascript in the plugin itself. This allows the browser to cache the plug-in file once and then take it from the cache, and this will increase the speed of the site loading.
In order to use such a rotator on your website, you first need to connect the jQuery library and the plugin itself. But we will connect the jQuery library not in the usual way, but from the Google repository.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> window.jQuery || document.write('<script type="text/javascript" src="js/jquery-1.6.2.min.js"><\/script>'); </script> <script type="text/javascript" src="js/jquery.rotator.js"></script> This code must be placed between the tags on your site.
I will not dwell on this, since I have a special article on this topic “ Increasing the page loading speed by downloading jQuery from the Google repository ”, I can only say that using this approach, we can increase the page loading speed
After all the necessary javascript files are connected, you need to add the following styles to your page:
ul.slides_rotator{ margin: 0; padding: 0; position: relative; list-style: none; } div.rotator{ float: left; margin: 0 25px; position: relative; } a.rotator-nav{ position: absolute; top: 50%; margin-top: -16px; z-index: 3; cursor: pointer; } a.rotator-nav div{ height: 32px; width: 32px; background: url('../images/nav.png') no-repeat; } #rotator-left{ left:-16px; } #rotator-left div{ background-position: 0 0; } #rotator-left:hover div{ background-position: 0 -32px; } #rotator-right{ right:-16px; } #rotator-right div{ background-position: -32px 0; } #rotator-right:hover div{ background-position: -32px -32px; } Once the styles are connected, you can start calling the plug-in rotator itself. To do this, in the place where you want to place the rotator write the following code:
<div id='rotator'></div> Now we can call the plugin itself. This is done as follows:
<script type="text/javascript"> $(function(){ $('#rotator').rotator({ slides: [ { url:'http://1popov.ru/c/577/disc1', img:'images/white200x450.jpg' }, { url:'http://1popov.ru/c/577/disc3', img:'images/beige200x450.jpg' }, { url:'http://1popov.ru/c/577/disc5', img:'images/sky200x450.jpg' }, { url:'http://1popov.ru/c/577/disc6', img:'images/gold200x450.jpg' }, { url:'http://1popov.ru/c/577/disc8', img:'images/green200x450.jpg' }, { url:'http://1popov.ru/c/577/disc11', img:'images/black200x450.jpg' } ], speed: 500, timeout: 3000, width: 200, height: 450, random: true, autorun: true, fx: 'slide', nav: false }); }) </script> As you can see, the plugin gives a number of parameters, namely:
- slides - an array of slides consisting of objects in which the affiliate link is specified - url, and the slide picture is img
- speed - the speed of the animation in ms.
- timeout - time to display one slide in ms.
- random - if set to true , the slides will be displayed in a chaotic order.
- width - the width of one slide
- height - the height of one slide
- fx - animation effect (slide - fade, fade), by default - fade
- autorun - automatically scroll through all slides, true by default
- nav - display navigation buttons, default is false
Demo page can be viewed here.
Sources can be downloaded here.
Here is such a simple plugin to rotate your banners. I hope someone will come in handy.
UPD: Corrected the code, now after the last slide the first one is shown again. Also added several additional options for convenience.
Source: https://habr.com/ru/post/130840/
All Articles