dyadica.net

Cody Lindley has released a new version of thickbox (3.0)

Im hoping that this will address the issues that I have been having here at dyadica.net with the use of Iframe content and mozilla based browsers. It seems that whilst IE alows direct usage of a .dcr or .dir but when in mozilla browsers correct object embed must be used. This calls for additional pages to be created to house the content. Er KUDOS to IE then.

So today I commence on converting thickBox 3.0 to be mootools compatible, keeping in mind thoughts that wordpress will soon run of jQuery. Hopefully conversion will adhere to the methods for 2.0 as detailed here.

Resources:

thickBox 3.0, official home:Â http://jquery.com/demo/thickbox/
cody Lindley permalink: http://codylindley.com/Webdev/321/thickbox-3

mooTools compatability: http://docs.jquery.com/Using_jQuery_with_Other_LibrariesÂ

having a few issues with theme revamp and mozill based browsers in regards to thickbox

A little iFrame image example: here

A little iFrame .dcr example: here

A little iFrame .direxample: here

test via thickbox

To attatch to theme header:

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.js" type="text/javascript"></script>

To redefine the $ shortType, more info here.
<script type="text/javascript"> var $j = jQuery.noConflict(); </script>

Modd your jquery script to use the new short eg. $j and embed:
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/thickbox.js" type="text/javascript"></script>

test via jtip

wpcf3.zip

4. Adding additional script functionality to themes.

With a little more google searching this turns out to be quite an easy one. Just add the following to your themes header.php file between the head tags:

<script language=”javascript” type=”text/javascript” src=”<?php bloginfo(“template_directory”);?>/your-script-location.js”></script>

Additionaly you could include a .php file with script via:

<? include (“your-script-location.php”); ?>

Simple Eh………………..

2. thickBox & jQuery

With the simple embed of .dir/dcr content sorted my thoughts then turned to more advanced presentation of content.

Within my adventures, navigating the dyadic sea I came across a great little app produced by cody Lindley utilising the jQuery function set called thickBox. I have used thickBox on previous works and love both its simplicity and functionality.

To my delight with a little google play I discovered two ports already in existance for thickBox use within wordpress produced by dan Atkinson, which can be detailed as follows:

jQuery for wordPress:
http://www.dan-atkinson.com/blog/index.php/jquery-111-for-wordpress/

thickBox for wordPress:
http://dan-atkinson.com/blog/index.php/thickbox-plugin-for-wordpress/

Examples for usage:

Linking to http://www.example.com/index.html (with a thickbox window height of 400, and a width of 500):

<a href=”http://www.example.com/index.html?height=400&width=500″ title=”Example Index” class=”thickbox””>A Link to Example.com</a>

Linking to http://www.example.com/image.jpeg:

<a href=”http://www.example.com/image.jpeg” title=”A wonderful image” class=”thickbox”>text or image</a>

A few live examples:

A little iFrame shockwave example: here
A standard shockwave example: here

test via thickbox

To attatch to theme header:
<script src=”<?php bloginfo(’stylesheet_directory’); ?>/js/jquery.js” type=”text/javascript”></script>

To redefine the $ shortType, more info here.
<script type=”text/javascript”> var $j = jQuery.noConflict(); </script>

Modd your jquery script to use the new short eg. $j and embed:
<script src=”<?php bloginfo(’stylesheet_directory’); ?>/js/thickbox.js” type=”text/javascript”></script>

test via jtip

wpcf3.zip