Change images Weather Blues1 main page

[weathernut]

Is there any way to put your own image(s) onto the weather blues 1 main page to replace the originals?

[Mr.Meteo]

Hi,
Sure you can put your own image! And I hope so! 

You have 2 ways to do it. They're actually 3 picture rotating
in your header (in your images folder):

- header1.jpg
- header2.jpg
- header3.jpg

Easiest way to put your own is to replace these files with your pics
(with same name). That way, no pages to edit, only replace these
images with yours. The size to use is 954px X 200px.

If you want to have different images or other than 3 images,
you have to edit page and find these lines:

<div id="slider" class="nivoSlider">
   <img src="images/header.jpg" alt="" />
   <img src="images/header2.jpg" alt=""/>
   <img src="images/header3.jpg" alt="" />
</div>

Only one thing to remember: header.jpg is always 1st image!
Because loading images take some time, I've placed a "background"
image (header.jpg) to "fill the hole" during that time.
Then, please put your own images, so we can visit your place "virtually"! 

To help you, I include in that post a "empty frame" of the right size
As a photo frame, you just have to put your picture in it and save it
as a .JPG file.

Regards,
Jacques

[weathernut]

Thanks for your prompt response!

[weathernut]

Hi Jacques,
I have my own headers (jpgs) up and running on the 954x200 screens but I was wondering if there was a file I could go into to increase the time that each image displays for, like 5 seconds or so. 
Thanks, Rob

[Mr.Meteo]

Hi Rob,

For sure this Library has a lot of options that could be set
if you want it your way. The "twist" is done by these lines
at bottom of each pages:

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

Actually it use default settings I've made in the source file
but you can specify any settings, by using parameters
in (the red) parenthèses, like this:

$('#slider').nivoSlider({
    animSpeed: 500,                 // Slide transition speed
    pauseTime: 3000                 // How long each slide will show
}
);

These are a few settings you can use, I've choose this
Library because it is easy and well documented. You could
see the Nivo Slider Library documentation for more options.

Regards,
Jacques

[weathernut]

Hi Rob,

For sure this Library has a lot of options that could be set
if you want it your way. The "twist" is done by these lines
at bottom of each pages:

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

Actually it use default settings I've made in the source file
but you can specify any settings, by using parameters
in (the red) parenthèses, like this:

$('#slider').nivoSlider({
    animSpeed: 500,                 // Slide transition speed
    pauseTime: 3000                 // How long each slide will show
}
);

These are a few settings you can use, I've choose this
Library because it is easy and well documented. You could
see the Nivo Slider Library documentation for more options.

Regards,
Jacques

Hi Jacques,
Here is what I tried to do (I tried it with and without the bottom line {);) but when I access the webpage only the header image shows ie. there are no longer any transitions...

   $('#slider').nivoSlider({
      animSpeed: 500
      pauseTime: 5000
      }
      );
   });

Have I entered something wrong here? Thanks for your help in this matter.
Rob

[Mr.Meteo]

Hi Rob,

With computers, there is a lot of troubles due to
syntax problem, as this one! With javascript, when
we enumerate parameters, a simple reminder is useful:

All parameters are separated with Comma (,)
up to the last one (not including the last one).

If you look a bit more on sample I've sent, you'll see
that parameter line "animSpeed" is ending with a comma
(but not the last parameter - "pauseTime"!)

$('#slider').nivoSlider({
    animSpeed: 500,
    pauseTime: 3000
}
);

Regards,
Jacques

[weathernut]

Thanks Jacques!
The transitions are working fine now!
Rob