i have a dirctory full og images starting from 1.png to like 55.png not skipping a number. im going to keep adding to the directory in consiquative order.

how do i have an image show on a page and then it get clicked on and then it turns to the next image.

LIKE 1.png wouldnt show anymore then it would be 2.png and then 3.png.

how do i do it so i dont have to reload the page.

7 Years
Discussion Span
Last Post by essential

AJAX is not necessary for this type operation, here's a simple code that demonstrate on you perform such task:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Conent-Style-Type" content="text/css" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<title>JavaScript Live Help:: Essential</title>
	<script type="text/javascript">
	// <![CDATA[
		var pointer = 0;

		var prevNext = ( function( q ) {

		var defaultImage = document.getElementById("img") || document.images.img;
		var iMages = [];
		var index = 55;
			for ( var x = 0; x < index; ++x ) {
				iMages[ x ] = new Image(120, 120);
				iMages[ x ].src = x + ".png";

			} if ( q && pointer < index  ) pointer += 1;
			  else {
				if ( pointer <= 0 ) pointer = 0;
				else pointer -= 1;
			} defaultImage.src = iMages[ pointer ].src;

		} );

	// ]]>
	<div id="wrapper">
		<p><img style="border: 2px solid #000; height: 120px; width: 120px;" src="pathToImage/1.png" 

alt="www.daniweb.com" width="120" height="120" /></p>
		<button id="pre" name="pre" onclick="prevNext();">&lt;&lt;prev</button>&nbsp;<button id="nxt" name="nxt" 



Edited by essential: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.