Header Ads

  • Breaking News

    jQuery Nivo Slider



    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  :D I will show you now how to add one to your blog / site with little hassle. Not hard, just kidding.

    Live Demo



    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">
     <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>
    Custom:
    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 :D




    No comments

    Post Top Ad

    Post Bottom Ad