pootato.org » Javascript http://pootato.org Tutorials for your website Tue, 22 Jul 2008 01:05:40 +0000 http://wordpress.org/?v=2.2.2 en Auto detect image link for lightbox http://pootato.org/tutorials/javascript/auto-detect-image-link-for-lightbox/ http://pootato.org/tutorials/javascript/auto-detect-image-link-for-lightbox/#comments Thu, 16 Aug 2007 21:14:13 +0000 Clara http://pootato.org/tutorials/javascript/auto-detect-image-link-for-lightbox/ With jQuery

Using jQuery and interface imagebox plugin, we need to add rel="imagebox" to our image link. If you don't want to add this manually to all your pictures like me, here is a little solution I've found. Insert this between <head> and </head>.

<script type="text/javascript">
$(document).ready(function() {
$('a[@href$=jpg]').attr("rel","imagebox");
});
</script>

This will find all links to .jpg files and add rel="imagebox" to them.

With Mootools

Edit: In the end, I'm not sure this will work!

Here is a snippet I use for Mootools and Slimbox plugin. With Slimbox, we need to add rel="lightbox" to our image link. In a javascript file, paste this code:

function autoLightbox()
{
var anchors = document.getElementsByTagName("a");
var imgex = /\.(jpg|jpeg|gif|png|bmp)$/;
for (var i = 0; i < anchors.length; i++){
var anchor = anchors[i];
if (anchor.getAttribute('href') && (anchor.getAttribute('href').toLowerCase().search(imgex) >= 0)){
anchor.setAttribute('rel', 'lightbox');
}
}
}
window.addEvent('domready', function(){ autoLightbox();})

This should work. There are probably better ways to do this using Mootools but I've dropped this library for jQuery. ^^;

Share This

]]> http://pootato.org/tutorials/javascript/auto-detect-image-link-for-lightbox/feed/ Accordion menu with Mootools http://pootato.org/tutorials/javascript/accordion-menu-with-mootools/ http://pootato.org/tutorials/javascript/accordion-menu-with-mootools/#comments Wed, 15 Aug 2007 01:37:21 +0000 Clara http://pootato.org/tutorials/javascript/accordion-menu-with-mootools/ Here is what we'll do. You first have to download mootools.js.

Let's take care of the HTML codes for the menu first…

<div id="accordion">
<h1 class="toggler">Lorem</h1>
<div class="stretch">
<p>Text 1 goes here</p>
</div>
<h1 class="toggler">Ipsum</h1>
<div class="stretch">
<p>Text 2 goes here</p>
</div>
</div>

Now let's link the script to your page, add this code between head tags:

<script src="mootools.js" type="text/javascript" language="JavaScript"></script>

Now, we need to write the javascript to make your accordion menu. Add it directly to your source in the head part:

<script type="text/javascript" language="JavaScript">
window.addEvent('domready', function() {
var accordion = new Accordion('h1.toggler', 'div.stretch', $('accordion'));
});
</script>

You're done! Test it and style it with CSS now!

Note: There is a file embedded within this post, please visit this post to download the file.

Share This

]]> http://pootato.org/tutorials/javascript/accordion-menu-with-mootools/feed/