A few simple JavaScript based utilities that you can easily add to any page, or integrate into your own CMS systems, built on top of the
YUI libraries.
Usage
Adding the modules to the page is easy and requires very little changes to your existing HTML.
The following needs to be added into the <head> section of your HTML:
<script type="text/javascript">
var RBModules = [ "lightbox", "youtube" ];
</script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yuiloader-dom-event/yuiloader-dom-event.js"></script>
<script type="text/javascript" src="http://www.richardbenson.co.uk/js/rb-global.js"></script>
Amend the RBModules array to include the functions you want available.
Modules Available
Image Lightbox
function name: "lightbox"
class name: "lightbox-link"
e.g.:
<a href="/link/to/large/image.jpg" target="_blank" title="Title for the image" class="lightbox-link"><img src="/link/to/thumbnail.jpg" /></a>
There is no need to use a thumbnail, you could have a text link there if you like, but whatever is linked in the a, will become the contents of the lightbox.
Will turn any a element with the class above into a link that opens a modal panel containing the image linked in the href of that element. Will also provide back and next buttons to move through all tagged images detected on the page.
YouTube Lightbox
function name: "youtube"
class name: "youtube-link"
e.g.:
<a href="http://www.youtube.com/watch?v=IsUYTNdNPqo" target="_blank" title="Muppet Show- Swedish Chef" class="youtube-link"><img src="http://i.ytimg.com/vi/IsUYTNdNPqo/2.jpg" /></a>
Again, this can be a text link, there is no need for it to be a thumbnail.
Will take any a element on the page tagged with the class listed and turn it into a pop-up YouTube player, similar to a lightbox used for images, but with YouTube videos playing inside.
Leave a comment