Dave Dash2012-04-07T22:42:44-07:00http://davedash.com/Dave Dashdd+atom1@davedash.comHow to make Prototype Window Class as easy as Lightbox Gone Wild2006-11-13T00:00:00-08:00http://davedash.com/2006/11/13/how-to-make-prototype-window-class-as-easy-as-lightbox-gone-wild<p>I like the way that <a href="http://particletree.com/features/lightbox-gone-wild/" title="Lightbox Gone Wild">Lightbox Gone Wild</a> will automatically pickup any links with the <code>class=lbOn</code>, but I wanted to use (at some point) <a href="http://prototype-window.xilinus.com/" title="Prototype Window Class">Prototype Window Class</a> instead.</p>
<p>Luckily <a href="http://prototype-window.xilinus.com/" title="Prototype Window Class">PWC</a> is built on Prototype which means we've already loaded a helpful library.</p>
<!--more-->
<p>In order to take all <code>class=lbOn</code> objects and run them through <a href="http://prototype-window.xilinus.com/" title="Prototype Window Class">PWC</a> we just write a simple loop and iterate.</p>
<p>So here's the low-down:</p>
<ul>
<li>Download <a href="http://prototype-window.xilinus.com/" title="Prototype Window Class">PWC</a></li>
<li>Copy window.js</li>
<li>Use the included prototype & script.aculo.us if you don't already include it in your page</li>
<li>copy any themes you wish to use.</li>
</ul>
<p>In your page add this bit of JavaScript:</p>
<div><textarea name="code" class="js">
var mylb = Class.create();
mylb.prototype = {
initialize: function(ctrl) {
this.content = ctrl.href;
Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
ctrl.onclick = function(){return false;};
},
// Turn everything on - mainly the IE fixes
activate: function(){
var win = new Window('window_id', {className: "alphacube",title: "Tour", url: this.content, width:700, height:500});
win.setDestroyOnClose();
win.showCenter(true);
}
}
lbox = document.getElementsByClassName('lbOn');
for(i = 0; i < lbox.length; i++) {
valid = new mylb(lbox[i]);
}
</textarea></div>
<p>So, this code simply looks for all the anchor tags with <code>class=lbOn</code> and then creates a new <code>mylb</code> instance for each anchor. The end.</p>