Customise the nivo-slider?

[duke]

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: Select all

	//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: Select all

/* 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]

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: Select all

.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]

Hi Kevin,

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

Code: Select all

.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]

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

Code: Select all

.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]

Code: Select all

.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: Select all

.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]

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

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

instead of

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]

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]

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]

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.

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

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

Duke

[TNETWeather]

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]

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%;"

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 .

Duke

[TNETWeather]

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: Select all

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

but it is not.

Instead it is located in:

Code: Select all

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

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

Code: Select all

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

[duke]

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]

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: Select all

#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]

@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.