Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Showing pictures on seperate pages


  • Please log in to reply

#1
Joeturf

Joeturf

    Member

  • Member
  • PipPipPip
  • 158 posts
Hi G2G.

I have about 50 pictures I want to show on a website. However, they are quite large and I can only fit one per page. Is there a way I can have a little slideshow with both a "next" and a "previous" link that JUST switches the pictures without loading up a whole new page with a different picture on it?

I have a feeling this is some application or javascript applet I must implement into my code. But I don't know the right words to search for in google (haha)

Thanks!
  • 0

Advertisements


#2
thenotch

thenotch

    Member

  • Retired Staff
  • 667 posts
There are photo scripts likes this everywhere...

Best bet it to head over to http://www.hotscripts.com and do a search for photo slideshow...
  • 0

#3
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Here's one I've used from JavaScriptSource.com:

THREE STEPS TO INSTALL PHOTO ALBUM VIEWER:

1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document
--------------------------------------------------------------------------------
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

&lt;script LANGUAGE="JavaScript" type="text/javascript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function changeImage()
{
mainimage.src = list.options[list.selectedIndex].value;
}
function prevImage()
{
if(list.selectedIndex == 0)
{
list.selectedIndex = list.options.length-1;
}
else
{
list.selectedIndex--;
}
changeImage();
}
function nextImage()
{
if(list.selectedIndex == list.options.length-1)
{
list.selectedIndex = 0;
}
else
{
list.selectedIndex++;
}
changeImage();
}
// End -->
</script>

</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->

<BODY onLoad="java script:changeImage()">

<!-- STEP THREE: Copy this code into the BODY of your HTML document -->

<div align="center">
<img name="mainimage" border="1" alt="" src="mainimage">
<br>
<input type="button" value="Back" onclick="java script:prevImage()">

<select id="list" onchange="java script:changeImage()">
<option value="image1.jpg">First Image</option>
<option value="image2.jpg">Second Image</option>
<option value="image3.jpg">Third Image</option>
<option value="image4.jpg">Fourth Image</option>
</select>

<input type="button" value="Next" onclick="java script:nextImage()">
</div>

Works better if images are same size so there isn't a shift in page as each image is displayed.


Ron
  • 0

#4
Tyger

Tyger

    Member 2k

  • Member
  • PipPipPipPipPip
  • 2,896 posts
On the other hand I have some readymade html pages that make up such a slideshow, all you would have to do is rename the image files. I think I made them for up to 36 images per show. They are autocentering and can use about any size of image. Some work with a .css file. Any text or description would have to added by hand.
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP