Select specific tag add-on to JaS

A friend of mine using JaS said that he sometimes had the scenario that he wanted to load all the images but then preload a certain tag, hence initially hiding all the pictures that doesn’t match that criteria. I though it was a simple task so I created an add-on script for those interested.

Since I want to keep the core functionality of JaS as small and lightweight as possible, I wanted to introduce the concept of add-ons to JaS. Basically, you create an external JavaScript file and put your add-on methods in it. To use the add-on I’ve created for JaS, do the following:

Download the JaSSelectCertainTag JavaScript file.

Include it in your web page:

<script type="text/javascript" src="js/JaSSelectCertainTag.js"></script>

Then you just call it like this, with a string parameter for the value you want the tag to have:

JaS.selectCertainTag("Texas Capitol");

If you automatically want to call this when the page has loaded, you just need to add this line to your code:

addEvent(window, "load", function(){JaS.selectCertainTag("Texas Capitol");}, false);

It seems I was a little too hasty with the onload event. Apparently IE sometimes doesn’t regard the JaS object to have finished loading. Therefore, the proper and failsafe way to call it onload is as is shown below.

addEvent(window, "load", selectCertainTagWithJaS, false);
var oJaSTimer;
function selectCertainTagWithJaS(){
	if(JaS.thumbnailContainer){
		clearTimeout(oJaSTimer);
		JaS.selectCertainTag("Texas Capitol");
	}
	else{
		oJaSTimer = setTimeout("selectCertainTagWithJaS()", 100);
	}
}

The code

If you’re interested in the code or how it should look when you want to create your own add-on, here goes:


JaS.selectCertainTag = function (strValue){
	var oCheckBox;
	var bNotAllSelected = false;
	for(var i=0; i<this.tagsCheckboxes.length; i++){
       	oCheckBox = this.tagsCheckboxes[i];
		oCheckBox.checked = (oCheckBox.value.search(strValue) != -1)? true : false;
		if(!bNotAllSelected && !oCheckBox.checked){
			bNotAllSelected = true;
			this.tagsSelectAll.checked = false;
		}
	}
	this.applyTagFilter();            
};

4 Comments

  • […] n Wednesday, April 12th, 2006 Lightbox feature added September 15th 2006. Select specific tag add-on added September 21th 2006. Pretty much ever […]

  • Scooby says:

    Please forgive me for being a total idiot, but I'm still unclear on what this add-on does. Is this a means of specifying a particular image when the page loads (not necessarily image #1)? Because that's exactly what my page needs.

    I've created a mini biographical gallery; each image is a different person. From a separate page, I want to link to this gallery using the names of the people. For example, you'd click on "Abe Lincoln", and the gallery would come up with Abe Lincoln displayed.

    I realize that this would probably require some kind of php parameter, right? Like I'd have to call up the url http://mydomain.com/jas.php?person=AbeLincoln

    Or something like that. Anyway, any help/clarification you could give me would be much appreciated. I don't know much about scripting, but if you tell me it's possible without too much difficulty, then I can figure it out.

    Thanks

  • Robert Nyman says:

    Scooby,

    The idea with this add-on is just to display images having a particular tag predefined (e.g. “flower”).

    And yes, sending it in like a parameter and then just calling the method is one way of approaching it. Include the code above, and then do it like this:

    addEvent(window, "load", function(){selectCertainTagWithJaS("<?php $_REQUEST["tag"] ?>")}, false);

  • Scooby says:

    Thanks for your help, Robert! This has been a stumbling block for me; until now I've been using a large, bloated php gallery script. I'm so happy that I can now accomplish the same thing with your streamlined (and much better, imo) javascript. I'll get to work on it right now. Cheers

Leave a Reply

Your email address will not be published. Required fields are marked *