Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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!

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    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

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Last edited by simon9100; 10-07-2012 at 06:09 PM.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •