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.
Hi,
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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
<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;
} );
// ]]>
</script>
</head>
<body>
<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();"><<prev</button> <button id="nxt" name="nxt"
onclick="prevNext(1);">next>></button>
</div>
</body>
</html>essential
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.