CodingForums.com - Background Slideshow

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Background Slideshow (http://www.codingforums.com/showthread.php?t=275570)

Background Slideshow

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! :)

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

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! :D

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? :)

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