A Thickbox plugin for Moodle

A Thickbox plugin for Moodle

by Ian G -
Number of replies: 3
Hi, I'm not a programmer.

Would it be possible to make a pluggin for Thickbox so that the few code bits needed to reference it would be all that people would need to add to their links?

You can read a little more about it here and see examples: http://jquery.com/demo/thickbox/

It degrades nicely. If Javascript is off, it just opens the linked file or website in a new window. If it is turned on...you have to put class="thickbox" into your link and make the title tag reflect what you would want in a caption or title. Voila! There are some more complex bits of code to do in the title tag if you want to do iFrames and such...

I don't know how hard it is to make plugins for Moodle, or if there are any drawbacks to using this automatically on a Moodle site.

Here's an actual example of how I code it now in the book module for a French course and I have attached the files for you if you want to try it out. I had to make one change to the CSS file so that it didn't conflict with Moodle.

Cheers,
Ian

---

<!--note, the next three script links allow the image enlargement to work on this page-->

<link rel="stylesheet" href="http://cll-devel19.lms.athabascau.ca/file.php/30/javascripts/thickbox.css" type="text/css" media="all" />

<script type="text/javascript" src="http://cll-devel19.lms.athabascau.ca/file.php/30/javascripts/jquery-latest.js"></script>

<script type="text/javascript" src="http://cll-devel19.lms.athabascau.ca/file.php/30/javascripts/thickbox.js"></script>

 

<!-- float element-->

<div style="width: 250px; float: right; margin: 40px 0 0 15px; color: #666;">

<a href="http://cll-devel19.lms.athabascau.ca/file.php/30/images/illustr/mod04_lec11_louis14.jpg" title="Portrait of Louis XIV, Hyacinthe Rigaud, 1701, Louvre, Paris." class="thickbox" >

<img src="http://cll-devel19.lms.athabascau.ca/file.php/30/images/illustr/mod04_lec11_louis14_sm.jpg" alt="Louis XIV" width="250" height="355" border="0" />

</a>

<p><em>Portrait of Louis XIV</em>, Hyacinthe Rigaud, 1701, Louvre, Paris. Image: <a href="http://commons.wikimedia.org/wiki/File:Louis_XIV_of_France.jpg" target="_blank">Wikimedia Commons</a></p>

</div>

<!-- float element end -->


Average of ratings: -
In reply to Ian G

Re: A Thickbox plugin for Moodle

by Mauno Korpelainen -

It's not hard - you can use thickbox in any theme.

If you add for example to standard theme header.html

 <?php include("$CFG->javascript"); ?>

 <script type="text/javascript" src="<?php echo $CFG->themewww .'/'. current_theme() ?>/jquery-latest.js"></script>
 <script type="text/javascript" src="<?php echo $CFG->themewww .'/'. current_theme() ?>/thickbox.js"></script>
 <link rel="stylesheet" href="<?php echo $CFG->themewww .'/'. current_theme() ?>/thickbox.css" type="text/css" media="screen" />

</head>

and place image loadingAnimation.gif to theme/standard/images

you should be able to use class="thickbox" immediately.

Worked for me - thanks for the link, Ian!

It should also be relatively easy to create a tinymce plugin for moodle 2.0 to add these thickbox tags - in htmlarea things are more complex.

Average of ratings: Useful (1)