Displaying various pictures

betojss

New Member

Join Date: Dec 2011
Posts: 1

Displaying various pictures

Dec 29 '11, 05:23 PM

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.

Code:

<!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(); ?>>
<head profile="http://gmpg.org/xfn/11">
 <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
 <title><?php wp_title('|', true, 'right'); ?> <?php bloginfo('name'); ?> <?php if ( !wp_title('', true, 'left') ); { ?> | <?php bloginfo('description'); ?> <?php } ?></title>
 <meta name="generator" content="WordPress" /> <!-- leave this for stats (or remove for potential security reasons) -->
 <meta name="author" content="Fluid Studio" />
 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
 <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
 <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
 <?php wp_head(); ?>

        <script src="http://www.google.com/jsapi"></script>
        <script>
          google.load("jquery", "1.2.6");
          google.setOnLoadCallback(function() {
                var original_image = 'url([url]http://gosci.com/wp-content/uploads/2011/12/SCI-by-the-moon-front-page.png)';[/url]
                var second_image = 'url([url]http://www.fluid-studio.net/sci/wp-content/themes/scitheme/images/mainimage2.jpg)';[/url]
                

[url]http://www.fluid-studio.net/sci/wp-content/themes/scitheme/images/mainimage.jpg[/url]
    var timer = setTimeout(nextImage, 6000); // Trigger in 6 seconds
    $('#click').click(nextImage);

    function nextImage() {
          clearTimeout(timer);
          var header = $('#homecontent');
          var image = header.css('background-image').replace(/"/g, '');
          if (image == original_image) {
                header.css('background-image', second_image);
          }
          else {
                header.css('background-image', original_image);
          }
          timer = setTimeout(nextImage, 6000); // Trigger again in 6 seconds
          return false;
    }

          });
        </script>
	
</head>
<body>

<div id="container">
<div id="lightcontainer">
 <div id="header">
  <div id="topNav">
   <?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>
  </div><!-- end #topNav -->
 </div><!-- end #header -->

Last edited by Stewart Ross; Dec 29 '11, 07:40 PM. Reason: Post moved to Javascript forum as suggested by one of our HTML experts, who pointed out that it was not an HTML issue but a Javascript or PHP one. Also added code tags.

Tags: html pictures changing

Sivaranjani

New Member

Join Date: Dec 2011
Posts: 16

Dec 30 '11, 07:42 AM

I Give Example for that,I think it's help you

Code:

<html>
<head>
<style type="text/css">
	body { background:url(../images/header1.jpg) no-repeat;}
</style>
  <script>
		var currentBackground = 0;
		var backgrounds = [];
		backgrounds[0] = 'http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-1.jpg';
		backgrounds[1] = 'http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-5.jpg';
		backgrounds[2] = 'http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-3.jpg';

		function changeBackground() {
			currentBackground++;
			if(currentBackground > 2) currentBackground = 0;

			$('body').fadeOut(100,function() {
				$('body').css({
					'background-image' : "url('" + backgrounds[currentBackground] + "')"
				});
				$('body').fadeIn(100);
			});


			setTimeout(changeBackground, 2000);
		}

		$(document).ready(function() {
			setTimeout(changeBackground, 2000);        
		});

  </script>
<body>

</body>
</html>

Last edited by acoder; Jan 2 '12, 01:52 PM. Reason: Added [code] tags

Displaying various pictures

Displaying various pictures

Comment