Ricochehost » Wordpress

jQuery FancyBox Plugin for IE8

Jim Atwood — Sat, 18 Jul 2009 02:44:44 +0000

Recently I had a problem with a wordpress theme I was customizing called VodPod which used a Jquery plugin called FancyBox. The problem was that I could get the fancybox to render in IE8. The site is my jimatwood.tv website.

With regards to the VodPod theme, I’m not sure what is happening. I have test around other sites using JQuery and Fancybox and they all have given me problems ( including other sites using VodPod) which suggests it may not be a Vodpod theme problem, but rather a compatibility issue with Jquery and IE8 itself. The Fancybox forums over on Google even suggests the same. Currently I’ve opted to just tell people to view my site with Firefox for best performance until Fancybox provides an update or I code something else.

I have attached two screenshots of my computer that show the IE8 version I am using and the other the Javacscript error. This error indicates a Jquery error of some sort and not VodPod. Note that the screenshots are of the DEMO version on the author’s site and in my case fancybox fails to open in both cases. The background simply dims.

http://www.ricoche.net/images/screen1.jpg
http://www.ricoche.net/images/screen2.jpg

I should also note that there are many reports of IE8 working in compatibility mode. I am not sure what that is as I test with IE8 straight out of the box. This is how I envision most users to use IE8 so I don’t test with compatibility mode. I don’t believe most will have it turned on.

Today, suddenly I found the fix. On a forum I was searching I found the following:

There seems to be 2 fancybox jquery versions: 1 works with ie8 one doesn’t and gives the debug error. You’re probably using the non-working version.

http://www.jdmweb.com/tools.php?toolid=6 -> working

http://fancy.klade.lv/ -> not working

Should be just a case of implementing the correct one. Looks like the same core but different implementation.

I changed all of the files and configured VodPod with the jdmweb.com version and now it works awesome in IE8.

Case closed! Awesome! You can check it out at http://www.jimatwood.net

Possibly Related Posts:

Post from: Ricochehost

jQuery FancyBox Plugin for IE8

Video Box and idTabs on Ricochehost

Jim Atwood — Sat, 04 Jul 2009 09:07:28 +0000

I’ve seen some people on the web creating a video box using idTabs so I thought I would make one too. Again this is nothing new but it was cool to get it working and have it displayed nicely on the front page. The CSS was the tricky part in trying to achieve a particular look for the site, but ultimately I got the look the way I wanted it. My next little project will be creating a smaller version for some of my other sites. I am a big fan of large video since I am a photographer and I want my videos to be HD and “BIG”, but a small Video Box with idTabs would be cool for the sidebar.

New idTabs box on Ricochehost.com

Possibly Related Posts:

Post from: Ricochehost

Video Box and idTabs on Ricochehost

New idTabs Box added to Ricochehost

Jim Atwood — Sat, 04 Jul 2009 08:44:08 +0000

Yesterday, I finished custom coding an idTabs Box to the Geometric Wootheme used here on Ricochehost.com. Now this is nothing new, but it was a bit tricky to figure out how to get in there. Probably the most trying task was getting the CSS right, but I think I got it. I now need to create some options in the admin area so that I can enter additional Social Sites and other info.

I also had some JQuery conflicts with MooTools when using Slimbox, but since I upgraded to Slimbox2, everything has been smooth sailing. Perhaps there is something better, but for now idTabs is pretty cool and the possibilities are endless. Today I created idTabs boxes for all the other sites deployed by Ricochehost.

The cool thing about the idTabs box setup is that each tab is can be a PHP file and you can really do some neat things by adding additional code. It will also be cool to tie that PHP code into the admin panel and have the options updated on the fly. I’m almost done with that. If you are into tabs, do give idTabs a look.

JQuery Tabs Box Addition

Possibly Related Posts:

Post from: Ricochehost

New idTabs Box added to Ricochehost

Slimbox2 Plugin for Wordpress

Jim Atwood — Sat, 04 Jul 2009 07:55:41 +0000

The theme I use here on Ricochehost is called Geometric by WooThemes. One of the features tied to the Portfolio section was the use of a Wordpress called Slimbox. The version I installed originally was 1.3 that used MooTools v1.2dev according the JS file. While custom coding the idTabs sidebox on Ricochehost, I noticed that MooTools was causing idTabs to not work. Thus I had a conflict going on between MooTools and JQuery.

Well, after searching around the internet I discovered an variation of the Slimbox plugin called Slimbox2 that uses JQuery. However, there was no Wordpress plugin. However, after reading the notes on the download site, I found that you simply had to copy over the existing Slimbox files and have it point to the JQuery JS library. After getting Slimbox2 up and running on Wordpress 2.8 I discovered that “presto”, my idTabs box worked like a charm along with the Portfolio feature. Slimbox2 also has some customization features which I plan to check out as well to make the user experience more intuitive. Right now I’m missing a “close” button and need to add that on there. Stay tuned for additional info about the Slimbox2 for Wordpress.

Note that after copying my files over the original Slimbox and adjusting the JQuery path and plugin info, I was able to effectively have a plugin that I could transfer across multiple installations. Works well.

Possibly Related Posts:

Post from: Ricochehost

Slimbox2 Plugin for Wordpress