PDA

View Full Version : How to install Nivo Slider?



Morgan Bohman
August 9, 2012, 10:20 AM
Hey,
I'm thinking of installing Nivo Slider to get more attention to my site, but I'm stuck with
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

Wherever I put this, the site won't load. Nivo Slider is a Jquery plugin. The teaser area is defined and called in the common.css with a background image, I wanna replace this with the slider function which I think could be more attractive.

The header section will look like this:

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>


And the place to insert the images like this:

slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="img/teaser1" alt="" />
<img src="img/teaser2" alt="" />
<img src="img/teaser3" alt="" />

And in the CSS

.nivoSlider {
position:relative;
background:url('img/loading.gif') no-repeat 50% 50%;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}

But when it comes to calling the function, I'm lost. Anyone that could help me?

//Morgan

Morgan Bohman
August 10, 2012, 08:10 AM
Wonder why the load function doesn't work? It kills the site directly

Morgan Bohman
August 13, 2012, 05:22 AM
To make this work, the following code

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script> has to be changed to this:


<script type="text/javascript">
$('#slider').nivoSlider();
</script>
Then it will accept the code.

The Nivo Slider doesn't work, yet, with iDevices.

Vladimir
August 13, 2012, 08:45 AM
Hello,

You can try to fix it in the following way:



<script type="text/javascript">
{literal}
$(document).ready(function()
{
$('#slider').nivoSlider();
});
{/literal}
</script>

Viktor
August 14, 2012, 03:53 AM
Hello Morgan Bohman,

You don't need to connect jquery (<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> ) because it's connected already in 'header' tag for all pages.
Can you send your site name and page where you trying to implement this code.

Morgan Bohman
August 14, 2012, 05:29 AM
Hi Viktor, I have already put this in but took it out again as it will not show up in iDevices such as iPhone, iPad etc.

Abelardo Leal
April 10, 2013, 04:40 PM
Hi Morgan Bohman, could you share the script plase ???

Morgan Bohman
April 11, 2013, 04:13 AM
oh just search for Nivoslider and download the js then follow the suggested procedure above but as I said iDevices didn,t work.


//Morgan

Leandro Figueiredo
October 18, 2013, 02:08 AM
Hi,

I have a similar problem with "elastic image slideshow".
http://tympanus.net/codrops/2011/11/21/elastic-image-slideshow-with-thumbnail-preview/

Can you help me?

Thanks

Thanks