Originally Posted by
MikeFoster
For your second question, no I don't think I have any demo that's like that - except... this img_gallery demo might work - just set imgsPerPg to 1 and probably have to modify a few other little things.
good thinking!!
I tryed this with the following code...
gallery.html
Code:
<html>
<head>
<title>Image Gallery</title>
<style type="text/css">
#galPrev, #galNext {
font-weight:bold;
margin-right:20px;
}
img {
cursor:pointer;
}
</style>
<script type="text/javascript">
var imgsPerPg = 20;
var imgsMax = 40;
window.onload = function()
{
if (window.winOnLoad) window.winOnLoad();
}
function winOnLoad()
{
if (document.getElementById) {
var n = 1, a = xGetURLArguments();
if (a.length) {
n = parseInt(a[0]);
if (n <= 0 || n > imgsMax) {
n = 1;
}
}
setImages(n);
setLinks(n);
}
}
function setImages(firstNum)
{
var i, img, id, src;
for (i = 0; i < imgsPerPg; ++i) {
id = leadingZeros(i+1);
img = document.getElementById(id);
src = 'images/' + leadingZeros(firstNum + i);
img.title = 'Click to view large image';
img.alt = img.src = src + '_tn.jpg'; // img to load now
img.onClickSrc = 'slide.html?pid=' + leadingZeros(firstNum + i); // img to load onclick
img.onclick = imgOnClick;
img.onerror = imgOnError;
}
}
function imgOnClick()
{
window.location = this.onClickSrc;
}
function imgOnError()
{
this.style.display = 'none';
}
function setLinks(firstNum)
{
var n = document.getElementById('galNext');
if (firstNum + imgsPerPg < imgsMax) {
n.href = 'gallery.html?n=' + (firstNum + imgsPerPg);
}
else {
n.style.visibility = 'hidden';
}
var p = document.getElementById('galPrev');
if (firstNum > imgsPerPg) {
p.href = 'gallery.html?n=' + (firstNum - imgsPerPg);
}
else {
p.style.visibility = 'hidden';
}
}
function xGetURLArguments()
{
var idx = location.href.indexOf('?');
var params = new Array();
if (idx != -1) {
var pairs = location.href.substring(idx+1, location.href.length).split('&');
for (var i=0; i<pairs.length; i++) {
nameVal = pairs[i].split('=');
params[i] = nameVal[1];
params[nameVal[0]] = nameVal[1];
}
}
return params;
}
function leadingZeros(num) {
if ( num < 10) return "00" + num;
else if ( (num > 9) && (num < 100) ) return "0" + num;
else if ( num > 99 ) return "" + num;
}
</script>
</head>
<body>
<h3>page title</h3>
<div>
<img id="001">
<img id="002">
<img id="003">
<img id="004">
<img id="005">
</div>
<div>
<img id="006">
<img id="007">
<img id="008">
<img id="009">
<img id="010">
</div>
<div>
<img id="011">
<img id="012">
<img id="013">
<img id="014">
<img id="015">
</div>
<div>
<img id="016">
<img id="017">
<img id="018">
<img id="019">
<img id="020">
</div>
<div>
<a id="galPrev" href=""><< Previous 20</a>
<a id="galNext" href="">Next 20 >></a>
</div>
</body>
</html>
slide.html
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Image Slide</title>
<style>
.singleSlide {text-align: center}
.slideControls {text-align: center}
</style>
<script type="text/javascript">
window.onload = function()
{
if (window.winOnLoad) window.winOnLoad();
}
var imgsPerPg = 1;
var imgsMax = 34;
function winOnLoad()
{
if (document.getElementById) {
var n = 1, a = xGetURLArguments();
if (a.length) {
n = parseInt(a[0]);
if (n <= 0 || n > imgsMax) {
n = 1;
}
}
setImages(n);
setLinks(n);
}
}
function setImages(firstNum)
{
var i, img, id, src;
for (i = 0; i < imgsPerPg; ++i) {
id = leadingZeros(i+1);
img = document.getElementById(id);
src = 'images/' + leadingZeros(firstNum + i);
img.alt = img.src = src + '.jpg'; // img to load now
}
}
function setLinks(firstNum)
{
var n = document.getElementById('slideNext');
if (firstNum + imgsPerPg < imgsMax) {
n.href = 'slide.html?pid=' + leadingZeros(firstNum + imgsPerPg);
}
else {
n.style.visibility = 'hidden';
}
var p = document.getElementById('slidePrev');
if (firstNum > imgsPerPg) {
p.href = 'slide.html?pid=' + leadingZeros(firstNum - imgsPerPg);
}
else {
p.style.visibility = 'hidden';
}
}
function xGetURLArguments()
{
var idx = location.href.indexOf('?');
var params = new Array();
if (idx != -1) {
var pairs = location.href.substring(idx+1, location.href.length).split('&');
for (var i=0; i<pairs.length; i++) {
nameVal = pairs[i].split('=');
params[i] = nameVal[1];
params[nameVal[0]] = nameVal[1];
}
}
return params;
}
function leadingZeros(num) {
if ( num < 10) return "00" + num;
else if ( (num > 9) && (num < 100) ) return "0" + num;
else if ( num > 99 ) return "" + num;
}
</script>
</head>
<body>
<div class="singleSlide">
<img id="001">
</div>
<div class="slideControls">
<a id="slidePrev" href=""><< Previous</a>
<a id="slideNext" href="">Next >></a>
</div>
</body>
</html>
...seems to work but for some reason it only works properly for the first 7 images in the gallery. then it resets to 001...
any suggestions would be GREATLY appreciated! I m so close - just some little bug i guess but i dont know enough about your script to figure it out without another set of javascript guru eyes..
...a live example - same thing as code above just in action with pictures..
THANKS FOR YOUR PATIENCE MIKE!!!!!!!!!!!!!!!!!!!
...what about adding an auto advance slideshow type option?
Bookmarks