Opening Popup Windows With No Extra Markup

Because the script looks for links within a particular element, it is easy to take advantage of this and mark up your pages accordingly. For example, one could use a DIVision to contain thumbnail images linked to larger ones and let the script do the work (applying the behavior only to the thumbnails inside that DIV).

Another possibility is to use this method to target files inside a specific folder; to use another example involving thumbnails and larger images, imagine using a folder's name ("bigPic" for example)...

This would be the markup:

<a href="img/bigpic/superman.jpg" title="Click to see larger image"><img src="img/superman.jpg" alt="Superman" /></a>

To create this thumbnail:

This would be the script to create custom popup windows only for files within this directory:

function TJKpopFolder(){ // v1.0 | www.TJKDesign.com var e = document.getElementById('wrapper'); if (e){ var a=e.getElementsByTagName('a'); for (var i=0;i<a.length;i++){ if (a[i].getAttribute('href') != null && a[i].getAttribute('href').toUpperCase().indexOf("BIGPIC") >= 0){ a[i].className+=a[i].className?' popup':'popup'; a[i].title+=' (opens in new window)'; a[i].onclick=function(){newWin=window.open(this.href,'TJKWin','location=no,menubar=no,status=no,toolbar=no,width=755,height=200');if(window.focus){newWin.focus()} return false;} } } } } window.onload = function(){if(document.getElementById) TJKpopFolder();} 

Et voilà!

This article is about selecting a particular set of links inside a document without extra markup, it does not take into consideration all issues related to popups.

Special thanks to Adam Smith, Ben Curtis, Andrew Krespanis and Gary White for their valuable feedback.

 |