JQuery ThickBox Gallery Images Not Working

Today was my first time using Thickbox, and I’m pretty satisfied. It’s got all the features I was looking for, namely “pop-in” images, iframes and galleries.

I didn’t really like how you had to add a querystring for the Thickbox iframes (I would prefer to use the rel attribute), but it still works fine.

Gallery Images Not Working

I’ve been banging my head against the keyboard for hours trying to fix this one little bug with Thickbox. For some reason, when I used the Thickbox Image Gallery, I couldn’t get the image to appear at all!

Switching CSS on the Same Website

WiaF MascotAs I was doing some CSS research yesterday, I came upon a site that really impressed me. This site was primarily Red. It had a page called “skins”. “Skins” usually mean what the website/program look like. For example, Trillian messaging program is always the same program, but you can change the way it looks by getting new skins. Here are a couple skins from their website:

AOL, MSN, Yahoo, ICQ, and more all in one!

Now this kind of confused be, because a website will always have one look, and you have to actually edit the site to change that, right? Wrong! On this guy’s “skins” Page he had three buttons and when you clicked on them, it totally changed what the page looked like!! So of course I learned all I could about it, and here is what I have to share with you.

You can view his site here.

Here is the code:

You need two (or more) different style sheets to use for the same website. You will include it in the header like this:

<link rel=”stylesheet” type=”text/css” href=”asset/stile.css” title=”metrostation” media=”screen” />
<link rel=”alternate stylesheet” type=”text/css” media=”screen” href=”asset/cielo.css” title=”cielo” />

This is the javascript that needs to be included in the page:

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {
     if(a.getAttribute(“rel”).indexOf(“style”) != -1 && a.getAttribute(“title”)) {
       a.disabled = true;
       if(a.getAttribute(“title”) == title) a.disabled = false;
     }
   }
}

Then all you need to do is create this simple anchor on your website that will switch themes to that CSS document(You will need to make a different button for each different CSS):

onclick=”setActiveStyleSheet(‘cielo’, 1);return false;”

That is freaking the coolest thing, with endless possibilities. Once I have duplicated this on mywebsite, I’ll be sure to make a post so you can find it!

-Enjoy,
-Ashton Sanders