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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Simple Slide Show- please help

    Hi-
    First things first, I will pay someone for their work. At this point I might wash your car, babysit your neighbor's kids, rake leaves, -the bargaining table is open. lol seriously though - I will gladly pay someone for this.
    I've been scouring the web until 3 and 4am the last 3 days, trying to learn this. omg- One more day and I will either go insane or my laptop will earn it's own frequent flyer miles.

    I'm in need of a slide show for a website about my husband's death. The photos are of his vehicle after the wreck and of the intersection the wreck occurred in. Should be aware, none of the pictures are overly graphic but blood is visible in a few of the photos.
    The site is here -
    http://www.2withspirit.com/?p=1

    I'm using WordPress but the slide show does not need to integrate - only need a static HTML page to link to from the site map. I have the background, header, and footer image. Slide show will have 41 images, no descriptions. The images are 2 sizes, all under 380x380, already named in the order they will appear. "back" and "next" text in Times Roman Italics below each image for navigation.

    If interested, pleeeeease contact me. thank you.
    Have a great day.
    Catonya

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    54087.html
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>54087</title>
    		<style type="text/css">
    			#slideshow
    			{
    				list-style:none;
    				padding:0;
    				margin:0;
    			}
    		</style>
    	</head>
    	<body>
    		<ul id="slideshow">
    			<li><img src="/images/1.jpeg" alt="Image 1"></li>
    			<li><img src="/images/2.jpeg" alt="Image 2"></li>
    			<li><img src="/images/3.jpeg" alt="Image 3"></li>
    			<li><img src="/images/4.jpeg" alt="Image 4"></li>
    			<li><img src="/images/5.jpeg" alt="Image 5"></li>
    		</ul>
    
    		<script type="text/javascript" src="54087.js"></script>
    		<script type="text/javascript">var slideShow = new SlideShow('slideshow');</script>
    	</body>
    </html>
    54087.js
    Code:
    function SlideShow(ss)
    {
    	var list = document.getElementById(ss);
    
    	this.toggleCurrentItem = function ()
    	{
    		var item = this.items[this.currentItem];
    
    		item.style.display = (item.style.display == 'none') ? '' : 'none';
    	}
    
    	this.next = function ()
    	{
    		this.toggleCurrentItem();
    
    		if(++this.currentItem >= this.items.length)
    		{
    			this.currentItem = 0;
    		}
    
    		this.toggleCurrentItem();
    	}
    
    	this.prev = function ()
    	{
    		this.toggleCurrentItem();
    
    		if(--this.currentItem < 0)
    		{
    			this.currentItem = this.items.length - 1;
    		}
    
    		this.toggleCurrentItem();
    	}
    
    	this.createButton = function (value, handler)
    	{
    		var button = document.createElement('input');
    		button.setAttribute('type', 'button');
    		button.setAttribute('value', value);
    
    		var thisObject = this;
    		button.onclick = function(){thisObject[handler]()};
    
    		list.parentNode.insertBefore(button, list.nextSibling);
    	}
    
    	this.createButton('Next', 'next');
    	this.createButton('Previous', 'prev');
    
    	this.items = list.getElementsByTagName('li');
    
    	this.currentItem = 1;
    
    	for(var len = this.items.length; this.currentItem < len; this.currentItem++)
    	{
    		this.toggleCurrentItem();
    	}
    
    	this.currentItem = 0;
    }
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #3
    New Coder
    Join Date
    Oct 2004
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Couldn't that have been made a lot simpler? Maybe there's something I'm not getting, but here's my code:

    Code:
    <html>
    <!--Shen-->
    <!--slideshow.html-->
    <!--Creates a JavaScript slideshow with "Back" and "Next" options-->
    
    <head>
    <title>JavaScript Slideshow</title>
    
    <script>
    var imgArray = new Array(4);
    var index = 0;
    
    imgArray[0] = new Image;
    imgArray[0].src = "img1.jpg";
    imgArray[1] = new Image;
    imgArray[1].src = "img2.jpg";
    imgArray[2] = new Image;
    imgArray[2].src = "img3.jpg";
    imgArray[3] = new Image;
    imgArray[3].src = "img4.jpg";
    
    function doBack(){
      index --;
    
      if (index < 0){
        index = 3;
      } // end if
    
      document.slideshow.src = imgArray[index].src;
    } // end doBack
    
    function doNext(){
      index ++;
    
      if (index > 3){
        index = 0;
      } // end if
    
      document.slideshow.src = imgArray[index].src;
    } // end doNext
    </script>
    
    </head>
    <body>
    
    <center>
    <h1><hr color = black>Slideshow<hr color = black></h1>
    <p>
    <img src = "img1.jpg"
         name = "slideshow">
    <p>
    
    <h3>
    <a href = javascript:doBack()>Back</a>
    &nbsp;&nbsp;&nbsp;
    <a href = javascript:doNext()>Next</a>
    </h3>
    
    </center>
    </body>
    </html>

    There are only four image objects in this example, but more can be added. I hope this helps.

    --- Shen

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by Shen
    Couldn't that have been made a lot simpler? Maybe there's something I'm not getting, but here's my code:
    hemebond's slideshow script is OO-based, so you can have multiple slideshows in a single page.

    Here's another great OO-based slideshow script:

    http://www.peterbailey.net/dhtml/oo_slideshow.htm

  • #5
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Shen
    Couldn't that have been made a lot simpler? Maybe there's something I'm not getting, but here's my code:
    Your code falls apart when Javascript is disabled. My code may not be a sexy as it could be, but it takes care of itself, and requires very little code in the HTML page.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #6
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you all for replying, i really appreciate it. someone has contacted me and kindly offered to help.

    thanks again.
    Catonya

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by 2withspirit
    thank you all for replying, i really appreciate it. someone has contacted me and kindly offered to help.

    thanks again.
    Catonya
    Who got the paycheck?


  •  

    Posting Permissions

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