A.R. Van Halleorg

The following is just a small blurb from the post I wrote earlier today for a blog we’ve started at work among in the web team. You can go ahead and read more about it here.

“This is a snippet of code that I was working on this morning with the input of a coworker for the concept. Basically we needed to have a way to include a navbar at the top of every site, which includes javascript functionality, but also doesn’t conflict with already present jQuery libraries.”

Small note: In IE, you need the jQuery.noConflict() line to be separate from the rest of your snippet code if you want it to work. IE seems to have an issue with the XML connotation of CDATA Comments. It sucks. I swear I’mma just boycott them until they conform. Okay, I won’t, but it’s nice to dream. I don’t know why IE does this to be honest, it just does.

<script src=”js/jquery-1.4.2.js” type=”text/javascript” language=”javascript”></script>
<script>var $newJS = jQuery.noConflict();</script>
<script>alert(‘do a bunch of stuff here’);</script>

Amendment : Please read this post for additional details.

Recently someone used the above to get to my site and I realize I haven’t written a post yet to explain what you can do about calling the Colorbox. After much trial and error on a project at work I ended up with a few options.

For those that don’t know how Colorbox is called…

Firstly you have an element with a class or id, i’d probably use an id unless you have a class that is pretty unique for the page (like the name of a button) for this case, let’s name the id as showGoogle

$(“#showGoogle”).colorbox({href:”http://www.google.ca/”});

The above will open a colorbox with Google’s homepage on it. Now the issue that came up afterwards is how do you do things inside the colorbox or access things in the colorbox once it’s up. Well, first, let’s show you two other things you can do.

Before you open your colorbox (I use this at work because we need to hide our videos before the colorbox opens):
$.bind(‘cbox_open’, function(){alert(“Whatever you want!”);});

After your colorbox is closed (I used it to bring back the videos):
$.bind(‘cbox_closed’, function(){alert(“Whatever you want when it’s closed!”);});

And finally there’s this other bit that works once it’s loaded:
$(“#showGoogle”).colorbox({href:”http://www.google.ca”}, function(){alert(“Show this bit here!”)});

The last issue I ran into was how do I get Javascript to go off on things inside the colorbox? I called it inside the code that shows up. Calling the function on the side with $(“#whatever”).click(function(){}); didn’t work, so I put the things I wanted in the click into a function, then called that function in the onClick.

So far I haven’t found an easier way about it, but I’m sure I’ll find it soon and I’ll update this post in the future to make sure it’s up to date.

Also someone searched for a colorbox bug in chrome, what was the bug? Maybe I can post the solution here or another colorbox post.

I was messing around with this yesterday. I was trying to get the javascript loaded by colorbox to fire when it showed on the screen. I wanted a default width to something and provide the default result in another box at the same time.
If you’re using jQuery, which is what I was using, don’t bother trying to make it work with your CSS style call for the element to capture the click/key events. Put it directly into the click=”" onkeyup=”" etc. Sounds lame, and it is, but that’s the easiest way to do it. You can still keep the functions you made (just call them). You can still call it like $(“#element”).val(‘value’). It just avoids the lack of event capture issue.
If you have another tip, add it to the comments of this post! I’d certainly like another workaround!

As if prettyPhoto could possibly get any better, it has! Some modifications have been made to the plugin to make displaying your images a fun experience. Not only that, but now it also once again allows you to be able to put quicktime, flash and various embedded videos inside it as well (he fixed the issue). Something really new and interesting is the callback feature that is now attached to the plugin.

Have you ever had that issue where you click an image, the thickbox shows, but the damned embed peeks through it to ruin your day in the best possible way?…Well the solution was to ‘hide’ that embed till you close the screen. Something that prettyPhoto wasn’t able to do before, but now is capable of doing.

You can find the demos here in order to test what prettyPhoto can do.
Don’t forget to include jQuery in order to make this work as well.
The plugin works in the following browsers :

- Firefox 2.0+
- Safari 3.1.1+
- Opera 9+
- IE 6.0+

I was very recently made aware of the presence of a very decent version of what we call ‘thickbox’ or ‘lightbox’. My supervisor sent me the link and at first I whined in my head about having to deal with yet another piece of dung version of something that COULD be nice, but never quite made it.

PrettyPhoto has at least changed my mind about it. There are things that need to be worked on, but it is a very good, usable version. It allows you to enter a title (image alt), a description (link title), and then setting the link’s rel to ‘prettyPhoto ‘ for a single image or ‘prettyPhoto[ gallery ]’ for an image that you’d like to contain in a gallery (this shows the 1 of 3, etc when you open the image).

Here are the defaults you’re given when putting it in your code :

animationSpeed: ‘normal’, /* fast/slow/normal */

padding: 40, /* padding for each side of the picture */

opacity: 0.35, /* Value betwee 0 and 1 */

showTitle: true, /* true/false */

allowresize: true, /* true/false */

counter_separator_label: ‘/’, /* The separator for the gallery counter 1 “of” 2 */

theme: ‘light_rounded’ /* light_rounded / dark_rounded / light_square / dark_square */

I’d go into full detail about the project, but you really need to go see it for yourself and Try it out! Also available as a WP plugin!