Search Engine Style Image Paging Control

**Mike H.** · 10-20-2008, 03:56 PM

1) CODE TITLE: Search Engine Style Image Paging Control

2) AUTHOR NAME/NOTES: Michael J. Hill

3) DESCRIPTION: Dynamically create a "Previous << 1 2 3 ... >> Next" paging control
Great for travel and real estate agents, or as part of a product catalog.

ATTACHED BELOW:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

/* Copyright 2008, Michael J. Hill www.javascript-demos.com -- Free use of the code so long as this notice is kept intact. */

	var maxItems = 38;  // this is the number of images in the set
	var consecItems = 12; // this is the number of integers appearing in between Previous and Next
	var path = "./images/rosewood_";  // the path & partial file name of your images, e.g., rosewood_1.jpg
	var ext = ".jpg" // the file extension of your image files, e.g., .jpeg, .gif, .png

	function init(){

		var activeURL = "";
		var endItem = "";
		var remaining = "";
		var nextSet = "";
		var index = 0;
		var subjImage = document.getElementById('imgDisplay');
		var nList = document.getElementById('itemLinks');
		for (i=0; i<consecItems+4; i++)
			{
			 var nLink = document.createElement('span');
			 nLink.onclick = function()
				{
				 var pageList = nList.getElementsByTagName('span');
				 if (this.firstChild.data.charCodeAt(0) == 171)
					{
					 if (pageList[2].className == "activePage" && pageList[2].firstChild.data == "1")
						{
						 return false;
						}
					 for (i=2; i<consecItems+2; i++)
						{
					 	 pageList[i].firstChild.data = i - 1;
						 pageList[i].className = "availPage";
						}
					 pageList[2].className = "activePage";					
					 activeURL = path + pageList[2].firstChild.data + ext;						
					}
				 else if (this.firstChild.data.charCodeAt(0) == 187)
					{
					 for (i=0; i<consecItems; i++)
						{
						 if (pageList[i + 2].className == "activePage" && pageList[i + 2].firstChild.data == maxItems)
						 return false;
						}
					 var lastSet = maxItems % consecItems;	
					 var n = lastSet - 1;
					 if (lastSet != 0)
						{
					 	 for (i=2; i<lastSet+2; i++)
							{
						 	 pageList[i].firstChild.data = maxItems - n--;
						 	 pageList[i].className = "availPage";
							}								
					 	 if (lastSet < consecItems)
							{
						 	 var setPadding = consecItems - lastSet;
						 	 for (i=1; i<setPadding+1; i++)
								{
						   	 	 pageList[consecItems + 2 - i].firstChild.data = "-";	
							 	 pageList[consecItems + 2 - i].className = "availPage";						 
								}
							} 						
					 	pageList[lastSet + 1].className = "activePage";
						activeURL = path + pageList[lastSet + 1].firstChild.data + ext;
						}
					 if (lastSet == 0)
						{
						 var n = 2;
						 var t = 2;
						 for (i=maxItems-consecItems+1; i<maxItems+1; i++)
							{
							 pageList[n++].firstChild.data = i;
							 pageList[t++].className = "availPage";
							}
						 pageList[consecItems + 1].className = "activePage";
						 activeURL = path + pageList[consecItems + 1].firstChild.data + ext;
						}
					}
				 else if (this.firstChild.data == "Next")
					{
					 if (pageList[pageList.length-3].firstChild.data == maxItems && pageList[pageList.length-3].className == "activePage")
						{
						 return false;
						}
	 				 if (pageList[pageList.length-3].className != "activePage")
					 	{
					 	 for (i=2; i<consecItems+2; i++)
							{
					 	 	  if (pageList[i].className == "activePage")
								{
								 pageList[i].className = "availPage";
								 index = i+1;
								}
							}
						 if (pageList[index].firstChild.data == "-")
							{
							 pageList[index-1].className = "activePage"
							 return false;
							}						 
						 pageList[index].className = "activePage";
						 activeURL = path + pageList[index].firstChild.data + ext;							
					 	}
				 	 else	{
						 endItem = pageList[pageList.length-3].firstChild.data;
					 	 remaining = maxItems - endItem;						 	
						 if (remaining >= consecItems)
							{
							 nextSet = consecItems + 1;
							} 
						 else 	{
							 nextSet = remaining + 1;
							}
						 for (i=2; i<nextSet+1; i++)
							{
							 pageList[i].firstChild.data = Number(endItem) - 1 + i;
							}
						 for (i=2; i<consecItems+2; i++)
							{
							 if (pageList[i].firstChild.data <= Number(endItem))
								{
								 pageList[i].firstChild.data = "-";
								}
							}
						 pageList[2].className = "activePage";
						 pageList[pageList.length-3].className = "availPage";	
						 activeURL = path + pageList[2].firstChild.data + ext;
						}
					}
				 else if (this.firstChild.data == "Previous")
					{
					 if (pageList[2].firstChild.data == 1 && pageList[2].className == "activePage")
						{
						 return false;
						}
	 				 if (pageList[2].className != "activePage")
					 	{
					 	 for (i=2; i<consecItems+2; i++)
							{
					 	 	 if (pageList[i].className == "activePage")
								{
								 pageList[i].className = "availPage";
								 index = i-1;
								}
							}
						 pageList[index].className = "activePage";	
						 activeURL = path + pageList[index].firstChild.data + ext;						
					 	}
					 else	{
						 endItem = pageList[2].firstChild.data;
						 remaining = endItem - 1;
						 var nSet = ((remaining / consecItems) - 1) * consecItems;
						 for (i=2; i<consecItems+2; i++)
							{
							 pageList[i].firstChild.data = (i - 1) + nSet; 
							}
						 pageList[2].className = "availPage";
						 pageList[pageList.length-3].className = "activePage";
						 activeURL = path + pageList[pageList.length-3].firstChild.data + ext;
						}
					}
				 else	{
					 if (this.firstChild.data == "-")
						{
						 return false;
						}
					 for (i=2; i<consecItems+2; i++)
						{
						 if (pageList[i].className == "activePage")
							{
							 pageList[i].className = "availPage";
							}
						}
					 this.className = "activePage";
					 //alert('here');
					 activeURL = path + this.firstChild.data + ext;
					}								 
				 alert(activeURL);				
				 // the following loads each selected image
				 subjImage.src = activeURL;
				}
			 nLink.className = "availPage";
			 var nText = document.createTextNode(i-1);
			 nLink.appendChild(nText);
			 nList.appendChild(nLink);
			}
		var nItems = nList.getElementsByTagName('span');
		nItems[2].className = "activePage";
		nItems[0].firstChild.data = "Previous";
		nItems[1].innerHTML = "&laquo";
		nItems[nItems.length-1].firstChild.data = "Next";
		nItems[nItems.length-2].innerHTML = "&raquo";

		// the following loads the initial image, e.g., ./images/roswood_1.jpg
		subjImage.src = path + "1" + ext;
	}

	onload = init;
	
</script>
<style type="text/css">

	 body {background-color: #eae3c6; margin-top: 60px;}
	#itemLinks {background-color: #f0fff0; font-family: 'times new roman'; font-size: 12pt; border: 1px solid black; text-align: center; width: 600px; padding-bottom: 1px; margin: auto; position: relative; top: 50px;}
	#imgDisplay {display: block; width: 400px; height: 300px; margin: auto;}	
	.availPage {color: #0000ff; cursor: pointer; padding: 5px;}
	.activePage {color: #ff0000; font-weight: bold; padding: 5px; text-decoration: underline; cursor: auto;}
	 
</style>
</head>
	<body>
		<img id="imgDisplay" src="null" alt="">
		<div id="itemLinks"></div>
	</body>
</html>

**Nile** · 10-21-2008, 03:55 PM

Nice script! Its really cool, I tested it. But do you mind putting an example to the page?

**Mike H.** · 10-21-2008, 05:52 PM

...putting an example to the page?

I have no idea what that means. The code is its own example.

**Nile** · 10-21-2008, 11:33 PM

Put a page online that has the code. If its possible, of course.

Again: Nice script! Lol.

Here are some suggestions:

Code:

<img id="imgDisplay" src="null" alt="">
<div id="itemLinks"></div>

Instead of making those originally, make them in the js. That way if someone doesn't have js they won't see the remainders of that.
Also, since that doesn't have a parent div make one. Then use a code somewhat like this:

Code:

<div id="parentItemLinks">
<!-- In here would be:
		<img id="imgDisplay" src="null" alt="">
		<div id="itemLinks"></div>
-->
</div>

And in the js:

Code:

var el = document.getElementById('parentItemLinks'); //parentItemLinks, can change ID if needed.
var elEdit = new Array(null);
elEdit[0] = document.createElement('img');
elEdit[1] = document.createElement('div');
elEdit[0]["id"] = "imgDisplay";
elEdit[0]["src","alt"] = null;
elEdit[1]["id"] = "itemLinks";
el.appendChild(elEdit[0]);
el.appendChild(elEdit[1]);

This is just a quick sketch, you'll have to edit it for it to work for you.

**Mike H.** · 10-22-2008, 10:16 AM

Thanks, but I like the code the way it is. I won't be making any changes to it.

Of course, though, you are welcome to change the code all you want, so long as you keep my copyright notice intact.

Thread: Search Engine Style Image Paging Control

Thread Tools

Search Thread

Search Engine Style Image Paging Control

Bookmarks

Bookmarks

Posting Permissions