Customise the nivo-slider?

duke · **Posted:** Mon May 21, 2012 9:41 am

I've been playing with the Nivo-slider but would like to add the "loading.gif" whilst loading and my own arrows instead of the text "prev, next".

How on the CSS do I insert the link to loading.gif and how do I insert a url into the js where it currently says "prev, next"?

JS

Code:

   //Default settings
   $.fn.nivoSlider.defaults = {
prevText: 'Prev', //default prev
nextText: 'Next', //default Next
};

CSS I guess here somewhere, something like - background:url(link to image);

Code:

/* The Nivo Slider styles */
.nivoSlider {
   position:relative;
}
.nivoSlider img {
   position:absolute;
   top:0px;
   left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
   position:absolute;
   top:0px;
   left:0px;
   width:100%;
   height:100%;
   border:0;
   padding:0;
   margin:0;
   z-index:6;
   display:none;
}

Duke

TNETWeather · **Posted:** Mon May 21, 2012 10:45 pm

Never used nivo-slider before but their web page has has an example of using it with a loading.gif

http://nivo.dev7studios.com/support/jqu ... gin-usage/

Code:

.nivoSlider {
    position:relative;
    width:618px; /* Change this to your images width */
    height:246px; /* Change this to your images height */
    background:url(images/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.nivoSlider a {
    border:0;
    display:block;
}

duke · **Posted:** Tue May 22, 2012 8:04 pm

Hi Kevin,

I did actually do that, should have said, bit it didn't work.

Code:

.nivoSlider {
   position:relative;   
   background:url(images2/loading.gif) no-repeat 50% 50%;
}

The unsuccesful result here. While loading it just flashs the loading images.

Duke

TNETWeather · **Posted:** Tue May 22, 2012 10:12 pm

According the the CSS that the page you reference is using.

Code:

.nivoSlider {
   position:relative;   
   background:url(loading.gif) no-repeat 50% 50%;
}

You are pointing to a relative address for loading.gif which does not exist.

You do have a loading gif in images2/loading.gif which is relative to where your page is which is what you showed in the posting above, but you may have changed it since.???

I might play with Nivo-Slider this weekend.
.
.
.

Also, I note that the images you are using a dimensionally larger than the size you are actually displaying. You can cut down the loading time of the images greatly but reducing them to the size you actually plan on using and reducing their size.

Example:
http://www.nightingaleweather.co.uk/wea ... night1.jpg
is being used at 804x603 and is 150kb in size.
but is physically 1072x804.

Resized to match your 804x603 and reduced in bulk is now 62k (less than 1/2 the size of the original)
http://cumulus.tnetweather.com/home/files/night1.jpg

gemini06720 · **Posted:** Wed May 23, 2012 3:16 am

duke wrote:

Code:

.nivoSlider {
   position:relative;   
   background:url(images2/loading.gif) no-repeat 50% 50%;
}

Mark, I just did a check, looking into your 'css/nivo-slider/nivo-slider.css' file and found the 'loading.gif' image to be located in that directory (the same directory where the CSS file is located) - you might want to try something such as:

Code:

.nivoSlider {
   position:relative;   
   background:url(css/nivo-slider/loading.gif) no-repeat 50% 50%;

I did not find the 'loading.gif' image in the 'images2/loading.gif' sub-directory!

I found with CSS templates one has to 'think' differently...

duke · **Posted:** Wed May 23, 2012 6:40 pm

Quote:

Mark, I just did a check, looking into your 'css/nivo-slider/nivo-slider.css' file and found the 'loading.gif' image to be located in that directory (the same directory where the CSS file is located) - you might want to try something such as:

Hi Ray, yes I moved it in the small hours this morning before I went to work. I put in the same folder as the CSS and changed the CSS. I thought it may be having problems finding it but still no success.

Also just tried

Quote:

background:url(css/nivo-slider/loading.gif) no-repeat 50% 50%;

instead of

Quote:

background:url(loading.gif) no-repeat 50% 50%;

with the .gif in the same folder as CSS but no joy.

Hi Kevin, I'm slightly confused by your findings

, When I right click on "night1" on my pc the properties say it is 804 x 603 - 150kb. The same as viewing the image properties on my site. But I see when I view the properties on your site of "night1" the image size is the same but as you say half the file size. How did you see it as 1072 x 804 and how did you cut down the file size?

Duke

TNETWeather · **Posted:** Wed May 23, 2012 8:18 pm

duke wrote:

Hi Kevin, I'm slightly confused by your findings

, When I right click on "night1" on my pc the properties say it is 804 x 603 - 150kb. The same as viewing the image properties on my site. But I see when I view the properties on your site of "night1" the image size is the same but as you say half the file size. How did you see it as 1072 x 804 and how did you cut down the file size?

I downloaded the file to my workstation. Opened it up in a graphics application and it was 1072x804. I used that application to resize the image and save it back out as a jpg file.

Sometimes the size discrepancy is due to the dpi of the image.

The application I used is Xara Graphic Designer 6.

Love the Squirrel pictures BTW... Ever make a Squirrel obstacle course?

TNETWeather · **Posted:** Wed May 23, 2012 9:54 pm

had a few spare moments.... and loaded the package. Then hacked the crap out of it to get a similar to your page though it is still different.

http://cumulus.tnetweather.com/test/nivotest/

This is loading YOUR images from across the net, so there is bit of a lag, but you can see the loading gif (I picked up a larger one).

There are still parts of the package that I don't understand. There are a lot of style sheets. Some of them are interrelated others are not.

duke · **Posted:** Thu May 24, 2012 4:52 am

Good morning Kevin,

Thank you for doing that and proving it does work. I'll have a better look later when I get home. I might be wrong but I think the key to getting the gif to work is that it is loaded by the reference on the orman theme css and not the nivo slider css. Might be wrong and I don't see why calling it from the nivo slider css shouldn't work.

Yes you're right, there do seem to be a lot of things going on with the interrelated css.

Quote:

Love the Squirrel pictures BTW... Ever make a Squirrel obstacle course?

Thank you, now you got me thinking...........

Duke

TNETWeather · **Posted:** Thu May 24, 2012 6:14 am

I think your biggest issue is that the loading.gif (any of them) is not where you are pointing at. This should be easy to spot in your web server error logs.

As for the Squirrel courses.... that can be a whole hobby onto itself. We don't have any squirrels around here.... and scorpions aren't any fun to play with.

duke · **Posted:** Thu May 24, 2012 6:19 pm

Quote:

I think your biggest issue is that the loading.gif (any of them) is not where you are pointing at. This should be easy to spot in your web server error logs.

Currently the gif is in the same folder as the CSS, therefore "background:url(loading.gif) no-repeat 50% 50%;"

Quote:

As for the Squirrel courses.... that can be a whole hobby onto itself. We don't have any squirrels around here.... and scorpions aren't any fun to play with.

I don't need another hobby

, I only had a mild interest in the weather, bought a cheap station, you know where this is going, then VP2 with all the bits. Now I don't have much time for the weather as I'm playing with web related stuff. As for the squirrels and birds they are rather time consuming too. And now the Mrs has just bought a squirrel feeder too :shock:

.

Duke

TNETWeather · **Posted:** Thu May 24, 2012 8:48 pm

duke wrote:

Quote:

I think your biggest issue is that the loading.gif (any of them) is not where you are pointing at. This should be easy to spot in your web server error logs.

Currently the gif is in the same folder as the CSS, therefore "background:url(loading.gif) no-repeat 50% 50%;"

Wrong assumption. That entry means the gif would be in a relative path to the PAGE you are on, not where the CSS is located. The entry you are using is saying the gif should be in the following path...

Code:

www.nightingaleweather.co.uk/weather/loading.gif

but it is not.

Instead it is located in:

Code:

http://www.nightingaleweather.co.uk/weather/css/nivo-slider/loading.gif

Which means you need to change the CSS entry to look like:

Code:

"background:url(css/nivo-slider/loading.gif) no-repeat 50% 50%;"

duke · **Posted:** Fri May 25, 2012 4:53 am

Quote:

Which means you need to change the CSS entry to look like:
Code:
"background:url(css/nivo-slider/loading.gif) no-repeat 50% 50%;"

That's what I did have, and have just changed back too after Rays suggestion but still no go. I'll install one of the themes the weekend that use the gif and see how that goes.

Duke

duke · **Posted:** Tue Jun 05, 2012 9:45 am

Kevin / Ray,
Thanks for sticking with me on this

. Finally had some time this weekend (nothing else going on in the UK

). The problem was that the site wide CSS was hiding the loading.gif with the page background.

Solution, add to the CSS:

Code:

#slider1 { background: url(images2/loading.gif) no-repeat 50% 50%; width:804px; height:623px; padding:20px 0px 40px 0px;}
#slider2 { background: url(images2/loading.gif) no-repeat 50% 50%; width:804px; height:550px; padding:20px 0px 20px 0px;}

and results

@Kevin, where did you find the large loading.gif? I've borrowed yours for now

, as the only ones I can find are really poor quality when created at 200px x 200px.

I will decrease the jpeg file size at some stage. After reading about Xera I think I will purchase this soon but if someone has a recommendation for a freebie for now.......

Duke

TNETWeather · **Posted:** Tue Jun 05, 2012 3:34 pm

duke wrote:

@Kevin, where did you find the large loading.gif? I've borrowed yours for now

, as the only ones I can find are really poor quality when created at 200px x 200px.

Use google search for loading.gif and select Images and you will find tons of them.

	It is currently Fri May 24, 2013 4:33 am
Please click here before posting. Help me to help you!
Useful Links: Cumulus FAQ • Enhancement requests • Wiki (documentation)
Please put your approximate location into your profile
Add your web site to the Cumulus user map
Vantage Pro2 users with firmware 3.00 should upgrade to fw 3.12 and Cumulus 1.9.4
Latest Cumulus release v1.9.3 (build 1059) - Feb 09 2013 Latest Cumulus beta v1.9.4 build 1077 - May 23 2013 --> Latest Cumulus Realtime v1.0.0.5 - Sep 05 2009

Sandaysoft

Customise the nivo-slider?

Who is online