Background Slideshow

simon9100 · 10-07-2012, 01:18 PM

Hello Coding Forums!

I am new here so i'm not completely sure this is the right spot to post this (could fit in JS section aswell i believe).

Anyways, my uncle asked me to make a webpage for his business (he makes pictures). He also wanted me to have a backgroud that changes every few seconds.

Now i have found, which seems a perfect solution to this problem because i'm not the perfect coder at all.
http://www.techerator.com/2010/11/ho...w-with-jquery/

Now i have added this to my webpage (dont mind the design and pictures, its in a testing phase)
http://simon.fabioth.net

The server should support it (the owner is a webdesigner and he gave me a subdomain) But the problem is now that the image doesnt switch to the next, since i dont know alot about scripts etc i wonder if you could help out

So basicly, how do i make it rotate trough the images (only 3 images to rotate right now)

Greets from belgium!

coothead · 10-07-2012, 03:11 PM

Hi there simon9100,

and a warm welcome to these forums.

Either change this line...

Code:

 $('#masthead').animate({opacity: 0}, 1000, function(){

...to this...

Code:

 $('#wrapper').animate({opacity: 0}, 1000, function(){

..or this line...

Code:

<div id="wrapper" style="background:url(img/1.jpg) no-repeat; background-position:center">

...to this...

Code:

<div id="masthead" style="background:url(img/1.jpg) no-repeat; background-position:center">

coothead

simon9100 · 10-07-2012, 06:04 PM

Oh stupid me, i havent seen that one, i might have rushed over the tutorial and didnt see that one.

Thanks for the big help!

PS: How can I make the images stretch so that none of the borders go outside the window (so i can still see that part) but the image resolution may not change (like 16:9 cannot become 16:10 for example)
PS2: And how can I make all the images be stretched and not the first image only?

coothead · 10-07-2012, 08:44 PM

Hi there simon9100,

I have simplified the code...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http://simon.fabioth.net/"><!-- this is for testing purposes only -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Home</title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 
 var imgArr=new Array( // relative paths of images
 'img/1.jpg',
 'img/2.jpg',
 'img/3.jpg'
 );
 
 var preloadArr=new Array();
 var i;
 
 /* preload images */
 for(i=0;i< imgArr.length;i++){
 preloadArr[i]=new Image();
 preloadArr[i].src=imgArr[i];
 }
 
 var currImg=1;
 var intID=setInterval(changeImg, 6000);
 
 /* image rotator */
 function changeImg(){
 $('#background').animate({opacity: 0}, 1000, function(){
 $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat');
 $(this).css('background-size','cover');
 }).animate({opacity: 1}, 1000);
 } 
 });
</script>

<style type="text/css">
html,body {
    height:100%;
    margin:0;
    background-color:#000;
 }
#background {
    height:100%;
    background-image:url(img/1.jpg);
    background-repeat:no-repeat; 
    background-position:100%; 
    background-size:cover;
 }
#content {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
 }
h1 {
    color:#fff;
    text-align:center;
 }
#nav {
    position:absolute;
    bottom:10px;
    left:10px;
    margin:0;
    padding:0;
    list-style:none;
    font-weight:bold;
 }
#nav li {
    float:left;
    margin-right:10px;
    position:relative;
 }
#nav a {
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
 }
#nav a:hover {
    color:#fff;
    background:#6b0c36;
    text-decoration:underline;
 }
#nav ul { 
    position:absolute;
    display:none;                                   
    margin:0;
    padding:0;
    background:rgba(255,255,255,0);
    list-style:none;
 }
#nav ul li {
    padding-top:1px; 
    float:none;
}
#nav ul a {
    white-space:nowrap;
}
#nav li:hover ul {
    display:block;
    left:0; 
    bottom:100%;
 }
#nav li:hover a {
    background:#6b0c36;
    text-decoration:underline;
 }
#nav li:hover ul a { 
    text-decoration:none;
}
#nav li:hover ul li a:hover { 
    background:#333;
 }	
</style>

</head>
<body>

<div id="background"></div>

<div id="content">

<h1>Hier komt wat tekst of foto's</h1>

<ul id="nav">
 <li> <a href="#">Portfolio</a>
  <ul>
   <li><a href="#">Foto (1)</a></li>
   <li><a href="#">Foto (2)</a></li>
   <li><a href="#">Foto (3)</a></li>
   <li><a href="#">Foto (4)</a></li>
  </ul></li>
 <li><a href="#">Informatie</a>
  <ul>
   <li><a href="#">Wat is</a></li>
   <li><a href="#">Wie zijn</a></li>
   <li><a href="#">Prijzen</a></li>
   <li><a href="#">FAQ</a></li>
  </ul></li>
 <li><a href="#">Contact</a></li>
</ul>

</div>

</body>
</html>

Obviously, the CSS can be placed in an external file.

coothead