Announcement

**abduraooft** · Apr 11, 2009, 10:37 AM

Have you checked the lightbox gallery?

**cscwebmaster** · Apr 11, 2009, 03:31 PM

Hi thanks for the quick reply i actually wanted to keep the script i have and work around it, i believe the lightbox gallery is something else. but thanks......

**Old Pedant** · Apr 11, 2009, 04:37 PM

Well, the whole thing seems *WAY* overcomplicated. I'd rather see you rewrite it in about half the space.

But...

Yeah, I think I see a way to do it.

First, change your JS code to this:

Code:

<script type="text/javascript">
[B][COLOR="Red"]var currentImage = 1;
[/COLOR][/B]
function LoadGallery(pictureName,imageFile,titleCaption,captionText)
{
[B][COLOR="Red"]    // extract the picture number from the imageFile name
    var fname = imageFile.substring( imageFile.lastIndexOf("/") + 1 );
    currentImage = parseInt(fname); // will ignore the ".jpg"
[/COLOR][/B]
    // rest the same
    var picture = document.getElementById(pictureName);
    if (picture.filters)
    {
        picture.style.filter="blendTrans(duration=1)";
        picture.filters.blendTrans.Apply();
    }
    picture.src = imageFile;
    if (picture.filters)
    {
        picture.filters.blendTrans.Play();
    }
    document.getElementById(titleCaption).innerHTML = captionText;
}

[B][COLOR="Red"]function moveBy(what)
{
    // where is user asking us to move to??
    var moveTo = currentImage + what;
    if ( moveTo < 1 || moveTo > 20 ) return; // can't move too far left or right
    // move is okay...so save where we moved to
    currentImage = moveTo;

    var footer = document.getElementById("footer");
    // get the array of all <a> elements in the footer:
    var links = footer.getElementsByTagName("a");
    // and then click on that link:
    links[currentImage].click( ); 
}[/COLOR][/B]
</script>

Then add the Previous and Next links in your HTML, thus:

Code:

<div id="footer" align="center">&lt;&nbsp;
[B][COLOR="Red"]<a href="#_self" onclick="moveBy(-1)">Previous</a>
[/COLOR][/B]- <a id="act" onfocus="this.style.color='ff9900'" onblur="this.style.color=''" href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/1.jpg','topbar','Pop Music Quiz - Esquire (UK)')">1</a>
- <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/2.jpg','topbar','Ronnie Wood - Personal')">2</a>
...
- <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/20.jpg','topbar','Wacko Jacko - Personal')">20</a>
[B][COLOR="Red"] - <a href="#_self" onclick="moveBy(1)">Next</a>[/COLOR][/B]
&nbsp;&gt;&nbsp;&nbsp;<a href="../../index.html" target="_parent">[ home ]</a> </div>
</div>

I think that will do it, but 100% NOT TESTED.

NOTE: I put the PREVIOUS and NEXT links *inside* the <DIV id="footer"> and if you change them to outside that div the code will need to change.

As it is, the PREVIOUS link becomes links[0] and the NEXT becomes links[21] and so the image links are numbered 1 through 20 and correspond to their image numbers. If you move PREVIOUS and NEXT outside the footer, then your image links will be numbers 0 through 19. Minor adjustment to make.

**Old Pedant** · Apr 11, 2009, 04:41 PM

If you don't mind a suggestion for simplifying all that...

Code:

<script type="text/javascript">
var currentImage = 1;

[B][COLOR="Red"]function LoadGallery(picNum, captionText)
{
    currentImage = picNum; // save current picture number

    // rest the same
    var picture = document.getElementById("portraits1");
    if (picture.filters)
    {
        picture.style.filter="blendTrans(duration=1)";
        picture.filters.blendTrans.Apply();
    }
    picture.src = "../images/Portraits/" + picNum + ".jpg";
    if (picture.filters)
    {
        picture.filters.blendTrans.Play();
    }
    document.getElementById("topbar").innerHTML = captionText;

    return false; // cancel the click
}
[/COLOR][/B]
function moveBy(what)
{
    // where is user asking us to move to??
    var moveTo = currentImage + what;
    if ( moveTo < 1 || moveTo > 20 ) return; // can't move too far left or right
    // move is okay...so save where we moved to
    currentImage = moveTo;

    var footer = document.getElementById("footer");
    // get the array of all <a> elements in the footer:
    var links = footer.getElementsByTagName("a");
    // and then click on that link:
    links[currentImage].click( ); 
   
   [B][COLOR="Red"] return false; // cancel the click[/COLOR][/B]
}
</script>

And then simplify the HTML:

Code:

<div id="footer" align="center">&lt;&nbsp;
<a onclick="return moveBy(-1)">Previous</a>
- <a id="act" onfocus="this.style.color='ff9900'" onblur="this.style.color=''" 
     onclick="return LoadGallery(1,'Pop Music Quiz - Esquire (UK)')">1</a>
- <a onclick="return LoadGallery(2,'Ronnie Wood - Personal')">2</a>
- <a onclick="return LoadGallery(3,'Denys Lasdun - Guardian Review')">3</a>
- <a onclick="return LoadGallery(4,'Sam West - Guardian Review')">4</a>
- <a onclick="return LoadGallery(5,'Alan Lamb - Brown Shipley Bank ')">5</a>
- <a onclick="return LoadGallery(6,'Tony Blair V’s Gordon Brown - FT ')">6</a>
- <a onclick="return LoadGallery(7,'Bruce Willis - Times Eye')">7</a>
- <a onclick="return LoadGallery(8,'The Thick Of It - Guardian Guide')">8</a>
- <a onclick="return LoadGallery(9,'President Mugabe - Personal')">9</a>
- <a onclick="return LoadGallery(10,'Conrad Black - FT')">10</a>
- <a onclick="return LoadGallery(11,'Ricardo Mutti - Independent')">11</a>
- <a onclick="return LoadGallery(12,'Gordon Brown and Alistair Darling - GQ')">12</a>
- <a onclick="return LoadGallery(13,'Mickey Rourke - Jack')">13</a>
- <a onclick="return LoadGallery(14,'Brits and Germans - Legal Business')">14</a>
- <a onclick="return LoadGallery(15,'Orphan Pamuk - Guardian Guide')">15</a>
- <a onclick="return LoadGallery(16,'Jude Law - Independent ')">16</a>
- <a onclick="return LoadGallery(17,'Yasser Arafat - Personal')">17</a>
- <a onclick="return LoadGallery(18,'Graham Greene - Guardian Review ')">18</a>
- <a onclick="return LoadGallery(19,'Russian Presidents - FT')">19</a>
- <a onclick="return LoadGallery(20,'Wacko Jacko - Personal')">20</a>
- <a onclick="return moveBy(1)">Next</a>
&nbsp;&gt;&nbsp;&nbsp;<a href="../../index.html" target="_parent">[ home ]</a> </div>
</div>

**cscwebmaster** · Apr 11, 2009, 09:16 PM

Thank you old pedant

Hi thanks for your help it all works great, It does everything I wanted it to do. once again many thanks. you are great.

**cscwebmaster** · Apr 11, 2009, 09:58 PM

Hi I just noticed that the image number link
doesnt turn orange when its selected using the next and previous button is there a way of doing this????

**Old Pedant** · Apr 11, 2009, 10:21 PM

I don't see anything in the original code that did that.

The only color changing in the original was here:

Code:

- <a id="act" onfocus="this.style.color='ff9900'" onblur="this.style.color=''" 
     onclick="return LoadGallery(1,'Pop Music Quiz - Esquire (UK)')">1</a>

But that was just for onfocus/onblur AND just for that first link. If you clicked on the link and then clicked anywhere else on the page, the color would change back. (That is, you wouldn't have to click on another link to make it go away.) AND it was just for that ONE link.

I didn't change any of the functionality of LoadGallery when it comes to filters, etc. So dunno why any action on that would have changed.

If you really mean you want the orange when the mouse is *OVER* any of those links, then let's fix it right:

Change that first link to:

Code:

- <a id="act"  
     onclick="return LoadGallery(1,'Pop Music Quiz - Esquire (UK)')">1</a>

That is, get rid of the focus/blur stuff.

And then add this to your <style> section (or create a style section of you don't have one):

Code:

<style>
#footer a:hover { color: #ff9900; }
</style>

But if you want to change the clicked on link to orange and you do *NOT* want clicking just anywhere on the page to change it back, then...

ONCE AGAIN UNTESTED!

Code:

<script type="text/javascript">
var currentImage = 1;

function LoadGallery(picNum, captionText)
{
    var footer = document.getElementById("footer");
    // get the array of all <a> elements in the footer:
    var links = footer.getElementsByTagName("a");
    // and unclick (change color back to normal) of the current link:
    links[currentImage].style.color = "transparent";

    // then change which is current image
    currentImage = picNum; // save current picture number
    // and change color of new current link:
    links[currentImage].style.color = "#ff9900";

    // rest the same
    var picture = document.getElementById("portraits1");
    if (picture.filters)
    {
        picture.style.filter="blendTrans(duration=1)";
        picture.filters.blendTrans.Apply();
    }
    picture.src = "../images/Portraits/" + picNum + ".jpg";
    if (picture.filters)
    {
        picture.filters.blendTrans.Play();
    }
    document.getElementById("topbar").innerHTML = captionText;

    return false; // cancel the click
}

function moveBy(what)
{
    // where is user asking us to move to??
    var moveTo = currentImage + what;
    if ( moveTo < 1 || moveTo > 20 ) return; // can't move too far left or right

    var footer = document.getElementById("footer");
    // get the array of all <a> elements in the footer:
    var links = footer.getElementsByTagName("a");
    // and then click on that link:
    links[moveTo].click( ); 
   
    return false; // cancel the click
}
</script>

You probably want to set the color of the first link to orange just to get things started.

So:

Code:

- <a id="act" style="color: #ff9900;"
     onclick="return LoadGallery(1,'Pop Music Quiz - Esquire (UK)')">1</a>

**cscwebmaster** · Apr 12, 2009, 09:46 AM

thanks once again old penant

That script worked a treat....i only had to add alter link style color from transparency to #ffffff as it was coming up black which i guess is the default,
but once again thanks. you are a star: thumbsup:

**12 Pack Mack** · Apr 12, 2009, 11:27 AM

Code:

var links = footer.getElementsByTagName("a");
 // [ICODE]and then click on that link:[/ICODE]
 links[moveTo][ICODE].click( ); [/ICODE]

Calling the click() method from an anchor tag works only in IE.

The click() method is cross-browser when associated with a button object.

See, w3schools.

Announcement

adding back forward buttons in gallery

adding back forward buttons in gallery

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment