By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,299 Members | 1,141 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,299 IT Pros & Developers. It's quick & easy.

Displaying various pictures

P: 1
Here's the site I'm talking about. www.gosci.com when you go in, you see a picture that changes every 6 seconds. I cannot get more than two pictures to rotate. I'm COMPLETELY new to HTML so I have absolutely no idea how to fix it. If anybody could provide me with the fix code to fix this, I would be greatly appreciate it. We use wordpress so the company who manages our website and hosts it, wants to charge us hundreds for something I know is simple.

THank you, here's the code.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
  2. <head profile="http://gmpg.org/xfn/11">
  3.  <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
  4.  <title><?php wp_title('|', true, 'right'); ?> <?php bloginfo('name'); ?> <?php if ( !wp_title('', true, 'left') ); { ?> | <?php bloginfo('description'); ?> <?php } ?></title>
  5.  <meta name="generator" content="WordPress" /> <!-- leave this for stats (or remove for potential security reasons) -->
  6.  <meta name="author" content="Fluid Studio" />
  7.  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
  8.  <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
  9.  <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
  10.  <?php wp_head(); ?>
  11.  
  12.         <script src="http://www.google.com/jsapi"></script>
  13.         <script>
  14.           google.load("jquery", "1.2.6");
  15.           google.setOnLoadCallback(function() {
  16.                 var original_image = 'url(http://gosci.com/wp-content/uploads/...age.png)';
  17.                 var second_image = 'url(http://www.fluid-studio.net/sci/wp-c...ge2.jpg)';
  18.  
  19.  
  20. http://www.fluid-studio.net/sci/wp-c.../mainimage.jpg
  21.     var timer = setTimeout(nextImage, 6000); // Trigger in 6 seconds
  22.     $('#click').click(nextImage);
  23.  
  24.     function nextImage() {
  25.           clearTimeout(timer);
  26.           var header = $('#homecontent');
  27.           var image = header.css('background-image').replace(/"/g, '');
  28.           if (image == original_image) {
  29.                 header.css('background-image', second_image);
  30.           }
  31.           else {
  32.                 header.css('background-image', original_image);
  33.           }
  34.           timer = setTimeout(nextImage, 6000); // Trigger again in 6 seconds
  35.           return false;
  36.     }
  37.  
  38.           });
  39.         </script>
  40.  
  41. </head>
  42. <body>
  43.  
  44. <div id="container">
  45. <div id="lightcontainer">
  46.  <div id="header">
  47.   <div id="topNav">
  48.    <?php wp_nav_menu( array( 'theme_location' => 'top-menu' ) ); ?><a href="http://sciintranet.com"><img id="loginbutton" src="<?php bloginfo(template_url); ?>/images/login.png" /></a>
  49.   </div><!-- end #topNav -->
  50.  </div><!-- end #header -->
Dec 29 '11 #1
Share this Question
Share on Google+
1 Reply


P: 16
I Give Example for that,I think it's help you
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <style type="text/css">
  4.     body { background:url(../images/header1.jpg) no-repeat;}
  5. </style>
  6.   <script>
  7.         var currentBackground = 0;
  8.         var backgrounds = [];
  9.         backgrounds[0] = 'http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-1.jpg';
  10.         backgrounds[1] = 'http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-5.jpg';
  11.         backgrounds[2] = 'http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-3.jpg';
  12.  
  13.         function changeBackground() {
  14.             currentBackground++;
  15.             if(currentBackground > 2) currentBackground = 0;
  16.  
  17.             $('body').fadeOut(100,function() {
  18.                 $('body').css({
  19.                     'background-image' : "url('" + backgrounds[currentBackground] + "')"
  20.                 });
  21.                 $('body').fadeIn(100);
  22.             });
  23.  
  24.  
  25.             setTimeout(changeBackground, 2000);
  26.         }
  27.  
  28.         $(document).ready(function() {
  29.             setTimeout(changeBackground, 2000);        
  30.         });
  31.  
  32.   </script>
  33. <body>
  34.  
  35. </body>
  36. </html>
Dec 30 '11 #2

Post your reply

Sign in to post your reply or Sign up for a free account.