Query Nivo Slider is a professional slider for a photography or high-resolution images, first made and introduced in the web by Pixar and Disney companies for the purpose of promoting their fantastic graphics. Developed at the MIT college and allowed everything. Of course, if you pay and if you use WordPress, the latter is easier.
I will show you now how to add one to your blog / site with little hassle. Not hard, just kidding.Note: Please keep in mind that all images must be the same size or slider will not project the image correctly but something totally lame.
For instance: The selected width and height is 640px and 300px accurately. Then all my pictures in the slider MUST be 640px x 300px. Only then the slider works great!.
NIVO SLIDER FEATURES:
16 unique transition effects
Simple, clean and simple design
Support for full adjustment
Built-in automatic and manual navigation system
Packed (zip) version is only 12kb
It supports images with links
keyboard Navigation
HTML Captions (inscription, title, description)
3 Jake Topics
Free to use and abuse under the MIT
license - Original certificate a license below
Free to use and abuse under the MIT license
1: First here, Dashboard >> Template >> Edit HTML >>
2: Click CTRL+F to easy find ]]></b:skin>
3: Just avobe him add next code:
#slider {
display:block;
border:4px solid #000;
width:448px; /* slider width */
height:286px;; /* slider height */
margin:0 auto;
background:white url('http://reader-download.googlecode.com/svn/trunk/images/nivo-loading.gif') no-repeat 50% 50%;
overflow:hidden;
position:relative;
}
#slider figcaption {
display:block;
background-color:black;
font:normal normal 11px Arial,Sans-Serif;
color:white;
opacity:.8;
padding:10px 15px;
position:absolute;
right:0;
bottom:-100px; /* hide the caption with this way :) */
left:0;
z-index:44;
}
#slider img {
display:block;
margin:0 0;
width:448px; /* slide width */
height:286px; /* slide height */
position:absolute;
top:0;
left:0;
}
#slider-nav {
display:block;
position:absolute;
top:10px;
right:10px;
z-index:99;
}
#slider-nav a {
display:block;
float:left;
width:10px;
height:10px;
background-color:#111;
font-size:0;
color:transparent;
overflow:hidden;
text-indent:-99px;
margin:0 2px 0 0;
border:2px solid white;
border-radius:100%;
box-shadow:0 1px 2px rgba(0,0,0,.4);
}
#slider-nav .active {
background-color:#2589B4;
}
#slider .container, #slider figcaption {display:none}
#slider-nav {opacity:0}4: Save template
5: Click "Add a gadget">>HTML/JavaScript i put this code in it:
<figure id="slider">Custom:
<div class="container">
<img src="YOUR-IMAGE-URL-HERE" alt="Write Image Description Here For Better SEO">
<img src="YOUR-IMAGE-URL-HERE" alt="Write Image Description Here For Better SEO">
<img src="YOUR-IMAGE-URL-HERE" alt="Write Image Description Here For Better SEO">
<img src="YOUR-IMAGE-URL-HERE" alt="Write Image Description Here For Better SEO">
</div>
<figcaption></figcaption> <!-- slideshow caption -->
<nav id="slider-nav"></nav> <!-- navigation -->
</figure>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
(function($) {
// ==================================================================================
// Configuration here:
// ----------------------------------------------------------------------------------
var config = {
slices: 10, // number of slices
speed: 600, // slideshow speed
easing: null, // easing type
interval: 3000 // slideshow interval
};
// ==================================================================================
// Some variables...
var $slider = $('#slider'),
$caption = $slider.find('figcaption'),
$container = $slider.find('.container'),
$nav = $('#slider-nav'),
$slide = $container.children(),
autoSlide = null,
$first = $slide.first();
// Auto append navigation item based on the slides length
$slide.each(function(index) {
var i = index + 1;
$nav.append('<a href="#slide-'+i+'">'+i+'</a>');
$(this).attr('id', 'slide-'+i);
});
// Set the slices size
var slice_w = $slider.width() / config.slices,
slice_h = $slider.height();
// Build the slices
for (var i = 0; i < config.slices; i++) {
$('<div class="slice" />').css({
'position':'absolute',
'width':slice_w,
'height':slice_h,
'left':slice_w*i,
'z-index':4,
'background-color':'transparent',
'background-repeat':'no-repeat',
'background-position':'-' + slice_w*i + 'px 0'
}).appendTo($slider);
}
// Catch the slices, and also set the different position between odd and even slices
var $sliceOdd = $slider.find('.slice:odd').css('bottom',0),
$sliceEven = $slider.find('.slice:even').css('top',0);
// Click to switch!
$nav.find('a').on("click", function() {
$nav.find('.active').removeClass('active');
$(this).addClass('active');
var pos = $(this).index(),
text = $slide.eq(pos).attr('alt'),
bg = $slide.eq(pos).attr('src');
$slide.hide().eq(pos).trigger("load").show();
// Do the caption and slices animation here!
$caption.stop().animate({bottom:'-100px'}, config.speed/2);
$sliceOdd.each(function(i) {
$(this).stop().delay(i*100).animate({bottom:'-'+slice_h+'px',opacity:0}, config.speed, config.easing, function() {
$(this).css({
'background-image':'url('+bg+')',
'bottom':0,
'opacity':1
});
});
});
$sliceEven.each(function(i) {
$(this).stop().delay(i*100).animate({top:'-'+slice_h+'px',opacity:0}, config.speed, config.easing, function() {
$(this).css({
'background-image':'url('+bg+')',
'top':0,
'opacity':1
});
});
}).promise().done(function() {
$caption.html(text).stop().animate({bottom:'0'}, config.speed/2);
});
clearInterval(autoSlide);
autoSlide = setInterval(slideShow, config.interval);
return false;
}).first().addClass('active');
// Init slideshow
$caption.html($slide.first().attr('alt')).stop().animate({bottom:'0'}, config.speed);
// Navigation clicker
function slideShow() {
if ($nav.find('.active').next().length) {
$nav.find('.active').next().trigger("click");
} else {
$nav.find('a').first().trigger("click");
}
}
// Run the slideshow on page load...
// **Edit: Run the slideshow on DOM Ready for the CSS Deck Playground only**
$(function() {
// remove the 'loading background-image' of '#slider'
$slider.css('background-image','none');
// Show the '.container', 'figcaption' and '#slide-nav' when the page has been loaded!
// **Edit: Show the '.container', 'figcaption' and '#slide-nav' on DOM Ready for the CSS Deck Playground only**
$container.show();
$caption.show();
$nav.css('opacity',1);
// Another init slideshow
$slider.find('.slice').css('background-image', 'url('+$first.attr("src")+')');
// Then, start the interval...
autoSlide = setInterval(slideShow, config.interval);
});
})(jQuery);
</script>
1. <img src="YOUR-IMAGE-URL-HERE" - dodajte kod vaše slike
2. var config = {
speed: 600, // slideshow speed - Slide Speed
SETTINGS - Not so important
| All Pages | - Slider |
| HomePage | - Slider |
| Posts | - Slider |
| Pages | - Slider |
| Index | - Slider |
| Other then Homepage | - Slider |
| Other then Posts | - Slider |
| Other then Pages | - Slider |
| Other then Index | - Slider |
| Error Pages | - Slider |
Well... that's it, enjoy and nappy blogging!
