Aug 16, 2011

Wordpress JQuery Slide Show | How To Add A Wordpress Jquery Slide Show | Wordpress JQuery Nivo Slider

So finally you reached here in search of adding a slide show in your wordpress site. Why to use flash if jquery can help you.


In this tutorial I am using the NIVO SLIDER.


So lets get started, just follow these simple steps:-


First mainly decide where you want to display this slide show in your blog or site? For this example we will use this slide show in the header, as an image banner.


So first you need to add some files in your theme, just that they don't get mixed up with your other files, we will create a folder in your theme directory, name it as slider, in that folder we will place some css files and images.(Download)
So after completion, your folder structure should be like the below image.
Slider folder


After this you need to add some js files in your folder js, if you don't have any folder named as js, then you can create one and place files into it.(Download)


The two js, files are:




  • jquery.nivo.slider.pack.js

  • jquery-1.6.1.min.js


Then you need to open your theme's header.php file, and paste the following code before wp_head();



[html]
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/slider/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/slider/style5.css" type="text/css" media="screen" />

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('#slider').nivoSlider();
});
</script>
[/html]

In the above code we are just telling the wordpress theme to pick the necessary style sheets, js files and JQuery.


So here we complete major part of the tutorial, now finally we will just paste some html code to appropriate section in the site.



As in this tutorial I am making a header banner so I ll paste this code in header.php.

[html]
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider">
<img src="<?php bloginfo('template_directory'); ?>/images/header1.jpg" alt=""/>
<img src="<?php bloginfo('template_directory'); ?>/images/header2.jpg" alt=""/>
<img src="<?php bloginfo('template_directory'); ?>/images/header3.jpg" alt=""/>
<img src="<?php bloginfo('template_directory'); ?>/images/header4.jpg" alt=""/>
<img src="<?php bloginfo('template_directory'); ?>/images/header5.jpg" alt=""/>
</div>
</div>
[/html]
Just in img src tag give your appropriate images location, in this tutorial I have kept the images into images folder of my wordpress theme directory.

You can paste the JQuery code in footer.php file just to avoid the conflict of javascripts.


In This tutorial I am using the header banner size, that is 995X288, so if your slider goes off screen, then you can customize our css files.
This Slider is IE7 compliant.


download

5 comments :

  1. Hi! Sweden´s calling :)
    Having problems with the slider :(
    The pics are not sliding at all, cant find no css..
    I am now working locally and the code is here:


    (index.php)



     



    $(window).load(function() {
    $('#slider').nivoSlider();
    });
    alert('skit');

    /*effect:'random', //Specify sets like: 'fold,fade,sliceDown'
            slices:15,
            animSpeed:500,
            pauseTime:3000,
            startSlide:0, //Set starting Slide (0 index)
            directionNavHide:true, //Only show on hover
            controlNav:true, //1,2,3...
            controlNavThumbs:false, //Use thumbnails for Control Nav
            controlNavThumbsFromRel:false, //Use image rel for thumbs
            controlNavThumbsSearch: '.jpg', //Replace this with...
            controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
            pauseOnHover:true, //Stop animation while hovering
            manualAdvance:false, //Force manual transitions
            captionOpacity:0.8, //Universal caption opacity
            beforeChange: function(){},
            afterChange: function(){},
            slideshowEnd: function(){} //Triggers after all slides have been shown
    */

     
    and...

               
                   
                       
                           
                           
                           
                           
                       
               
                       
               
                    Just nu på Galleri OPUS - Eva-lena Carlzon
               
           
           

    Theme name = opus
    Folder: images (contains) header1.jpg, header2.jpg, header3.jpg, header4.jpg
    Folder: js (contains) jquery.nivo.slider.pack.js, jquery-1.6.1.min.js
    Folder: slider (contains) arrows.png, bullets.png, default.css, loading.gif, nivo-slider.css, style5.css
    files: index.php, style.css

    Do you have an idea of what might be wrong??
    Thanks! :)

    Linda

    ReplyDelete
  2. you need to debug it in the firebug, open the firebug console, then reload the page, check for the error.

    ReplyDelete
  3. hello, but demo website is not resized when change size browser. how to do ?

    ReplyDelete
  4. Demo website is just for slider demo not for the layout

    ReplyDelete
  5. are you getting any error in console? Check for errors in your firebug console or in chrome click on settings->developer-tools

    Check for errors in it and let me know

    ReplyDelete