PDA

View Full Version : 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:


<!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:


<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:


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

And in the js:


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.