Chris's Blog

18 Jul 2010

jQuery and prototype compatibility woes

Posted by: gollum

This website uses the ImageCaptions and Image Resizer plugins as well as the Album module for CMS made simple. Sounds straightforward but I have spent the whole day trying to resolve conflicts between the prototype javascript library required by the Album module, and the jQuery javascript library used by both the ImageCaptions and Image Resizer plugins. The solution was in fact simple and described at the jQuery website but the instructions needed a little interpretation to apply here.

What I ended up with as the following in the global metadata - within the literal block:

<!-- Lightbox 2.0.2 for album module  -->
<script type="text/javascript" src="modules/Album/templates/db/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="modules/Album/templates/db/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="modules/Album/templates/db/lightbox/js/lightbox.js"></script>
<script language="javascript" type="text/javascript" src="modules/Album/templates/db/js/SMRcode.js"></script>
<link rel="stylesheet" href="modules/Album/templates/db/lightbox/css/lightbox.css" type="text/css" media="screen" />
<!-- jquery for image caption plugin --><script type="text/javascript" src="lib/jquery.js"></script><script>jQuery.noConflict();</script>
<!-- css for lightbox for image resizer plugin  - called jquerylightbox but uses lightbox from Album module -->
<style type="text/css">
.jquerylightbox { padding: 10px 10px 0 10px;} .jquerylightbox ul { list-style: none; }
.jquerylightbox ul li { display: inline; margin: 0 0 0.25em 0.5em!important;}
.jquerylightbox ul a img { border: 1px solid #000; vertical-align:middle; margin: 0 0 1em 0}
.jquerylightbox ul a:hover img { border: 1px solid #33f; } </style>

and outside the literal block:

{imagecaptions  txtsrc='title'}

The Image Resizer plugin was modified to use jQuery rather than $ as the global descriptor [works with jQuery.noConflict() script] and to use the lightbox which is included in the Album module. I also updated this lightbox to 2.0.4. Along the way the css used by the plugins was tidied up and the default image sizes modified to get rid of the square images which I had come to dislike - the small images are now centered vertically which, I think, was the problem which led to the original use of square thumbnails. It now mostly works as I intended.

  • Image captions can be specified from with TinyMCE
  • Larger versions of images can be specified to be displayed in lightbox from within TinyMCE by setting "relationship page to target" to Lightbox in the Edit/Insert link Advanced tab.
  • Thumbnail of all the image files in a folder can be displayed with either the ImageResizer plugin or from within the Album module as indicated below, with both using the lightbox effect.

{ImageResizer category="Photo Albums/Fencing - Easter 2010" outputstyle="lightbox"}
{cms_module module='album' albums='18'}

The two methods are shown here:

Fencing - Easter 2010

Click on a thumbnail to view a larger image. Click on the close button to close it.

Previous page: Chris's page
Next page: Test Gallery

© Copyright 2004-2019 - Fairfield Web            This site is powered by CMS Made Simple