linking to an image in frog.js

[newbie66]

apologies if this is a really dumb question or if i'm not even on the right website to ask it but i'm wondering if its possible to link to a specific image in the frog.js image gallery and how. eg i have right sidebar links on other pages which , if a user clicks image 4 link, they will be taken to the 4th image in the gallery on the gallery page. Thanks in advance for any help as i'm new to javascript and really have to think about html too.

[Jesdisciple]

That's a neat library, but he didn't expose much of an API for doing what you want; it's all about the UI instead. I was going to suggest that we make our own array for this and generate the HTML from that array, but the library already makes an array from the HTML. So I added a method (below) to it.

But first I want to note a few things about the library's code. EDIT: Yeah, I am being rather pedantic but hopefully someone will learn if I detail his mistakes.

Least importantly, he doesn't use the standard event registration model. On that page, ppk lists both models as temporarily deprecated; this confuses me as scripts can easily achieve cross-browser compatibility in this area while being future-proof as well.

He also makes 5 global variables. The configurations could have been constructor arguments (that is, if Prototype has a certain simple feature in Class.create()). The initFrog function probably shouldn't exist in the library itself, but even so it could have been anonymous. EDIT: Oh, myFrog is also implied global (another poor practice) - so that's 6 of them.

Finally, he uses Array objects as associative. The library would work just as well and be more true to the nature of JavaScript if he had used literal {} objects instead.

Anyway, here's the method, to be inserted into the Frog prototype. It only does anything if the specified image is not the currently displayed one.

	loadURL: function(image, neu){
		//Determine what URL we're using.
		var url;
		if(typeof image == 'object'){
			if(image.constructor == Array || image.constructor == ArrayObject)
				image = {
					full: image[0],
					credit: image[1],
					thumb: image[2],
					caption: image[3],
					link: image[4]
				};
			url = image.full;
		}else
			url = image;
		
		//Find the URL in the array.
		var imageNum;
		for(var i = 0; i < imageArray.length; i++)
			if(imageArray[i].full == url){
				imageNum = i;
				break;
			}else{
				var absolute;
				var loc = window.location.toString();
				if(imageArray[i].full.charAt(0) == '/'){
					var site = loc.substring(0, loc.indexOf(window.location.pathname));
					loc = site + imageArray[i].full;
				}else{
					var dir = loc.substring(0, loc.lastIndexOf('/') + 1);
					loc = dir + imageArray[i].full;
				}
				
				if(loc == url){
					imageNum = i;
					break;
				}
			}
		
		//Prepare the necessary variables.
		if(typeof imageNum != 'undefined'){
			if(typeof image != 'object')
				image = imageArray[imageNum];
		}else{
			if(typeof image == 'object' && neu){
				imageNum = imageArray.length;
				imageArray.push(image);
			}else
			//A single URL won't work with FrogJS.
				return false;
		}
		
		//What side are we coming from?
		var side;
		var current = $('FrogJSImage').src;
		for(var i = 0; i < imageArray.length; i++){
			if(imageArray[i].full == current){
				side = imageNum - i;
				break;
			}else{
				var absolute;
				var loc = window.location.toString();
				if(imageArray[i].full.charAt(0) == '/'){
					var site = loc.substring(0, loc.indexOf(window.location.pathname));
					loc = site + imageArray[i].full;
				}else{
					var dir = loc.substring(0, loc.lastIndexOf('/') + 1);
					loc = dir + imageArray[i].full;
				}
				
				if(loc == current){
					side = imageNum - i;
					break;
				}
			}
		}
		if(side == 0) //We're already there.
			return true;
		if(side < 0)
			side = 'left';
		else if(side > 0)
			side = 'right';
		
		//How wide is the image?
		var imgPreloader = new Image();
		imgPreloader.onload = function(){
			myFrog.loadImage(imageNum, side, imgPreloader.width);
		};
		imgPreloader.src = url;
		return true;
	},

Example usage, built around the example page distributed on Eric's site:

<a id='someId' href='images/3.jpg'>No, don't click here!</a>

// It's time for this frog to hop
function initFrog(){ myFrog = new Frog(); myFunc(myFrog); }
Event.observe(window, 'load', initFrog, false);

function myFunc(myFrog){
	$('someId').onclick = function (){
		myFrog.loadURL(this.href);
		return false;
	};
}

[newbie66]

wow - thank you so much for taking the time to reply to my query. First quick read is a little overwhelming due to my lack of experience but i look forward to playing around and working through this. Thanks again. I'll let you know how i go, and soon i hope.

[Jesdisciple]

I should also note that I tried to make it able to append an image to the gallery, but that feature's not tested. The method prototype for that looks like this... (If an image with an identical 'full' value already exists in the gallery, nothing is added; the same syntax may be used with only one argument or a 'false' second argument to avoid adding an image.)

The method always returns true on success or false on failure.

Object syntax: This passes the object that will be used internally. Values may be in any order.

loadURL({full: href, credit: title, thumb: img_src, caption: img_alt, link: rel}, true);

Array syntax: The values are identified by their indices and transferred to an object similar to the above. Order matters.

loadURL([href, title, img_src, img_alt, rel], true);