Could someone please explain the line dealing with the array options[] array?
I was trying to write it out with document.write(options[0]) but I end up with
undefined output.

Ultimately I would like to assign the values for width and height into it.

jQuery(document).ready(function($){
	var $anchors=$('a[rel="enlargeimage"]') //look for links with rel="enlargeimage"
	$anchors.each(function(i){
		var options={}
		var rawopts=this.getAttribute('rev').split(',') //transform rev="x:value1,y:value2,etc" into a real object
		var width=this.getAttribute('width')
		var height=this.getAttribute('height')
		for (var i=0; i<rawopts.length; i++){
			var namevalpair=rawopts[i].split(/:(?!\/\/)/) //avoid spitting ":" inside "http://blabla"
			options[jQuery.trim(namevalpair[0])]=jQuery.trim(namevalpair[1])
		}		
		$(this).addthumbnailviewer2(options)

Recommended Answers

All 2 Replies

The reason way options[0] doesn't work is due to how options is indexed. The key lies in rawopts. According to the notes rawopts is an array of a serialized (string) object structured x:value1, y;value2 or a name value pair. Then the code goes through that array of strings and splits the object into an array indexed off the name of the name object pair. To loop through such a pair you would want to use a for-in loop

for(var i in options){
    var name = i;
    var value = options[i];
}

structure rather than a numerical indexed for loop.

To add width and height into the options hash ....

jQuery(document).ready(function($){
	var $anchors=$('a[rel="enlargeimage"]') //look for links with rel="enlargeimage"
	$anchors.each(function(i){
		var options = {};
		var rawopts = this.getAttribute('rev').split(','); //transform rev="x:value1,y:value2,etc" into a real object
		for (var i=0; i<rawopts.length; i++){
			var namevalpair=rawopts[i].split(/:(?!\/\/)/); //avoid spitting ":" inside "http://blabla"
			options[jQuery.trim(namevalpair[0])]=jQuery.trim(namevalpair[1]);
		}
		options.width = this.getAttribute('width');
		options.height = this.getAttribute('height');
		//or (depending on what addthumbnailviewer2 accepts)
		//options.width = Number(this.getAttribute('width'));
		//options.height = Number(this.getAttribute('height'));
		$(this).addthumbnailviewer2(options);
	});
});

document.write() is generally a bad way to inspect data as it can overwrite the entire page including the Javascript. That's not disasterous as it all comes back when the page is refreshed, but it can prevent you inspecting then allowing the script to continue.

It is much better to use alert() or document.getElementById('myMessageDiv').innerHTML = ....; .

Here is an object inspector utility

if(!Object.inspect) {
	Object.prototype.inspect = function(container, level) {
		var div, innerContainer, prop;
		container = (!container) ? null : (container.tagName) ? container : (typeof container === "string") ? document.getElementById(container) : null;
		if(!container) {
			alert("Can't find container element");
			return;
		}
		level = (!level) ? 0 : level;
		innerContainer = document.createElement("div");
		container.appendChild(innerContainer);
		function writeLine(text) {
			var d = document.createElement("div");
			innerContainer.appendChild(d);
			d.style.borderTop = "1px solid #ccc";
			d.innerHTML = text;
			return d;
		}
		if(level === 0) {
			div = writeLine("Object Inspector by <a href=\"http://www.daniweb.com/forums/member512379.html\" target=\"_new\">Airshow</a>".bold());//please keep this attribution intace
			
		}
		for(prop in this) {
			try {
				switch(typeof this[prop]) {
					case "function":
						 if(prop !== "inspect") { div = writeLine(prop.bold() + " : <i>function</i>") };
					break;
					case "object":
						writeLine(prop.bold() + " : " + ((this[prop].constructor === Array) ? "<i>Array</i>" : "<i>Object</i>") );
						div = writeLine("");
						div.style.marginLeft = "20px";
						div.style.borderWidth = 0;
						this[prop].inspect(div, level+1);//recursively drill down into object
					break;
					default: div = writeLine( prop.bold() + " : " + this[prop] );
				}
			}
			catch(e) { writeLine( prop.bold() + " : <i>print error</i> " + e.message ); }//occasionally you get something unprintable
		}
		if(level===0 && div) { div.style.borderBottom = "1px solid #ccc"; }
	}
}

To use it, temporarily include something like <div id="myDiv"></div> in your html, and include options.inspect('myDiv'); at the point(s) you want to inspect the options object.

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.