So now we have jquery packaged with DNN 5.0 I thought it would be a good idea to utilise that on a new site I am developing, specifically I mean use it to provide a lightbox style effect to some pictures on my new website.

After some research (5 minutes with google),  I found an excellent blog article http://dnnuke.blogspot.com/2007/12/integrating-lightbox-js-2033-image.html which covers integrating lightbox, but I also discovered a jQuery / Thickbox script that I felt would be a better option.

So, very similar to the above blog posting I have successfully and relatively easily integrated the Thickbox plug-in into the Minimal Extropy skin, and here is how.

The website I used to obtain the thickbox script is http://jquery.com/demo/thickbox/

I created a directory in the Minimal Extropy skin folder called thickbox.

Into this folder, I downloaded the file ‘thickbox-compressed.js’

I then downloaded the css file, ThickBox.css and pasted its contents to the bottom of the skin.css file for the Minimal Extropy skin.

I then open each of the index####.ascx files and added the following 2 lines

<script type="text/javascript" src="/Resources/Shared/Scripts/jquery.js"></script>

<script type="text/javascript" src="<%=skinpath%>/thickbox/thickbox-compressed.js"></script>

After the section containing the  <%@ Register TagPrefix="dnn"…. Lines.

Lastly I downloaded the loadingAnimation.gif image into the images folder off of the root directory, and then opened the thickbox-compressed.js file, and set the variable tb_pathToImage = “/images/loadingAnimation.gif”

You can then follow the instructions at the thickbox page for any images on your site (so long as they are on a page using the Minimal Extropy skin), and you are set.

I’m sure there will be an easier or simpler way, but this worked for me and I hope it can be of benefit to others.

It works for most jquery, but may not work for all.  Remember that DNN has some jquery in it and that third party modules may add more, so adding jquery scripts into the skin can cause conflicts.  Of course, you'd find that on testing.  :)

Jeff

I was all excited about using ClueTip but it doesn't seem to want to work.  At least the following I hacked to gether from your post and the cluetip samples and some other tidbits of advice I made the following attempt in my skin:

<script type="text/javascript" src="/Resources/Shared/Scripts/jquery.js"></script>
<script type="text/javascript" src="/Resources/Shared/jquery/js/jquery.hoverIntent.js"></script>

<!-- optional -->

<script type="text/javascript" src="/Resources/Shared/jquery/js/jquery.cluetip.js"></script>
<script type="text/javascript" src="/Resources/Shared/jquery/js/jquery-ui-1.7.2.custom.min.js"></script>
<link rel="stylesheet" href="/Resources/Shared/Jquery/CSS/jquery.cluetip.css" type="text/css" />
<link type="text/css" href="/Resources/Shared/Jquery/css/pepper-grinder/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> 

<script type="text/javascript">
    jQuery(document).ready(function() {

    jQuery('a.siClueTip').cluetip();
        ('#houdini').cluetip({
            splitTitle: '|', // use the invoking element's title attribute to populate the clueTip...                     
            // ...and split the contents into separate divs where there is a "|"
            showTitle: true // hide the clueTip's heading
        });
    });
</script>
 

I moved the scripts to the shared resource folder thinking maybe that would make a difference over using <%=skinpath%>.  Unfortunately all I get is "Microsoft JScript runtime error: Object doesn't support this property or method" at the "jQuery('a.siClueTip').cluetip();" line.

Is this a problem with jQuery.UI, or ClueTip or something I screwed up in my hacking?