Update a link href in prototype

Question

Hey all,

I'm running a prototype script (lightbox) and I want to add an extra link below each image with the url to a page that changes with each image.

I have so far managed to add the a element to the right place, but later in the script I need to update the href of the link based on the image that is loaded.

There's a point in the script where the image is inserted into the lightbox after loading/navigating the lightbox:

showImage: function(){
    this.loading.hide();
    new Effect.Appear(this.lightboxImage, { 
        duration: this.resizeDuration, 
        queue: 'end', 
        afterFinish: (function(){ this.updateDetails(); }).bind(this) 
    });
    this.preloadNeighborImages();
},

After it's finished it runs updateDetails, which includes the images' caption. This seemed to me the perfect place to also update the link:

updateDetails: function() {
    // if caption is not null
    if (this.imageArray[this.activeImage][1] != ""){
        this.caption.update(this.imageArray[this.activeImage][1]).show();
    }

    // if image is part of set display 'Image x of x' 
    if (this.imageArray.length > 1){
        this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + '  ' + this.imageArray.length).show();
    }

/**  slider effect cut from example code for the sake of brevity **/
 }

I've tried many variations based on the codes used in these functions, but nothing seems to work. How do I update the href of a link with id=toFilePage?

I figured it'd be something like

this.toFilePage.href.update('http://example.com');

But that doesnt seem to work..

example page: http://dev.mansonwiki.com/wiki/MySpace_%26_Facebook_Photo_Gallery_Archive

script: http://dev.mansonwiki.com/w/extensions/LightboxThumbs/lightbox/js/lightbox.js

Answer 1

I believe the problem may lie within this section (starting at line 175 in lightbox.js)

(function() {
var ids = 'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' + 'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';
$w(ids).each(function(id) {
    th[id] = $(id);
});

}).defer();

This creates references to the objects created in the Builder section above it. Simply adding your id to that list should do the trick.

Otherwise you may also access it through $("myIdHere").