rel #18297: Accessible slimbox replacement

application/modules/opac/views/scripts/head.phtml

@@ -13,7 +13,7 @@
 	Class_ScriptLoader::getInstance()->loadMeta();
 
 	echo $current_profil->getStyleCss();
-  if ($current_profil->hasFavicon())
+	if ($current_profil->hasFavicon())
 		echo sprintf('<link rel="shortcut icon" href="%s"/>', $current_profil->getFavicon());
 
 	$head_scripts = Class_ScriptLoader::newInstance()
@@ -32,7 +32,6 @@
 											'division-five', 'reload_module'])
 		->addJQueryReady('
        $("input").placeholder();
-       setupAnchorsTarget();
        autoHideShowConfigurationModule();
        initializeNoticeMurAnimation();
        initializeImgHover();
@@ -102,6 +101,7 @@
 		$script_loader->addSkinStyleSheet('ie' . $ie, ['ie_version' => $ie])
 									->addUserFilesStylSheet($current_profil->getHeaderCssIE($ie),
 																					['ie_version' => $ie]);
+	$script_loader->addJQueryReady('setupAnchorsTarget();');
 
 	$head_scripts->renderStyleSheets();
 	$script_loader->renderStyleSheets();

application/modules/opac/views/scripts/recherche/viewnotice.phtml

@@ -2,8 +2,8 @@
 $this->openBoite($this->title);
 
 $script_loader = Class_ScriptLoader::getInstance()
-	   ->addStyleSheet(URL_ADMIN_JS.'slimbox/slimbox2')
-	   ->addAdminScript('slimbox/slimbox2.min.js')
+		 ->loadButterflyLightbox()
+
 		 ->addAdminScript('multi_inputs/multi_inputs.js')
 
 	   ->addStyleSheet(URL_ADMIN_JS.'rating/jquery.rating')
@@ -13,19 +13,19 @@ $script_loader = Class_ScriptLoader::getInstance()
 	   ->addOpacScripts(['subModal',
 										   'recherche',
 										   'liste_notices_mur'])
+
      ->addJQueryReady(sprintf('$("#reseaux-sociaux").load("%s")',
-													    $this->url(array('controller' => 'recherche',
-																						   'action' => 'reseau',
-																						   'id_notice' => $this->notice->getId(),
-																						   'type_doc' => $this->notice->getTypeDoc()))));
+													    $this->url(['controller' => 'recherche',
+																					'action' => 'reseau',
+																					'id_notice' => $this->notice->getId(),
+																					'type_doc' => $this->notice->getTypeDoc()])));
 ?>
 
 <div class="navigation">
-	<a class="retour" href="<?php echo  $this->url($this->criteres_recherche->getUrlRetourListe(), null, true).'#'.$this->notice->getId(); ?>">
+	<a class="retour" href="<?php echo $this->url($this->criteres_recherche->getUrlRetourListe(), null, true).'#'.$this->notice->getId(); ?>">
     <?php echo $this->_('Retour à la liste') ?>
   </a>
 
-
 	<?php echo $this->tagAnchor($this->url_panier,
 															$this->_('Ajouter au Panier'),
 															['class'=>'panier'.
@@ -55,8 +55,7 @@ $script_loader = Class_ScriptLoader::getInstance()
 										['id' => 'vignette',
 										 'href' => $this->notice->getUrlImage(),
 										 'title' => htmlentities($this->notice->getTitrePrincipal())]);
-
-		echo '<script type="text/javascript">$("a[id=\'vignette\']").slimbox({}, null, null)</script>';
+		$script_loader->addJQueryReady('$("a#vignette").butterfly({closeButton:false});');
 	}
 	else
 		echo $this->notice_Vignette($this->notice);

doc/extern_libs.org

@@ -39,6 +39,7 @@
 | DateTimepicker                      | MIT License                 |               | Choix de la date et de l'heure dans les articles | X ajout du support des dates courante sans partie d'heures | https://github.com/mugifly/jquery-simple-datetimepicker/                                                                       |
 | DataTables                          | MIT Licence                 |               | Ecran des variables                              |                                                            | http://www.datatables.net/                                                                                                     |
 | CodeMirror                          | MIT Licence                 |               | Edition code source javascript                   |                                                            | http://codemirror.net                                                                                                          |
-|                                     |                             |               |                                                  |                                                            |                                                                                                                                |
+| Butterfly Lighbox                   | GPL                         | -             | Accessible lightbox plugin                       |                                                            | http://irama.org/web/dhtml/butterfly/                                                                                          |
+
 
 

library/Class/ScriptLoader.php

@@ -256,6 +256,14 @@ class Class_ScriptLoader {
 	}
 
 
+ 	/**
+	 * @return ScriptLoader
+	 */
+	public function addOPACScriptStyleSheet($style_sheet, $attributes=null) {
+		return $this->addStyleSheet(BASE_URL."/public/opac/js/".$style_sheet, $attributes);
+	}
+
+
  	/**
 	 * @return ScriptLoader
 	 */
@@ -733,6 +741,15 @@ class Class_ScriptLoader {
 	}
 
 
+	public function loadButterflyLightbox() {
+		return $this->addOPACScript('butterfly/jquery.resize-events')
+								->addOPACScript('butterfly/jquery.history')
+								->addOPACScript('butterfly/jquery.butterfly.min')
+								->addOPACScriptStyleSheet('butterfly/butterfly')
+								->addOPACScriptStyleSheet('butterfly/butterfly-ie', ['ie_version' => 6]);
+	}
+
+
 	public function addRecordMeta($record) {
 		$this->_metas[] = '<meta property="og:title" content="' .  htmlentities($record->getTitrePrincipal()) . ' - ' . $record->getAuteurPrincipal() . '" />';
 		$this->_metas[] = '<meta property="og:description" content="' .  htmlentities($record->getResume()) . '" />';

public/admin/js/onload_utils.js

@@ -48,22 +48,26 @@ if (typeof jQuery != "undefined")
 
 //Les liens qui référencent des sites externes doivent être ouverts dans un nouvel onglet
 var setupAnchorsTarget = function() {
-	var internalLink = new RegExp('/' + window.location.host + '/');
-	$('a[href^="http"]').each(function() {
-		if (!internalLink.test($(this).attr('href')) && (undefined == this.onclick)  && (undefined == $(this).data('events') || undefined == $(this).data('events').click)) {
-			if ($.browser.msie || !!navigator.userAgent.match(/Trident/)) {
-        // Otherwise IE doesn't send HTTP Referer
-				this.target = '_blank';
-				return;
-			}
-
-			$(this).click(function(event) {
-				event.preventDefault();
-        event.stopPropagation();
-        window.open(this.href, '_blank');
+  var internalLink = new RegExp('/' + window.location.host + '/');
+  $('a[href^="http"]').each(function() {
+    if (!internalLink.test($(this).attr('href')) 
+	&& (undefined == this.onclick) 
+	&& (undefined == $(this).data('events') || undefined == $(this).data('events').click) // jquery < 1.8
+	&& (undefined == $._data(this, 'events') || undefined == $._data(this, 'events').click) // jquery >= 1.8
+       ) {
+      if ($.browser.msie || !!navigator.userAgent.match(/Trident/)) {
+	// Otherwise IE doesn't send HTTP Referer
+	this.target = '_blank';
+	return;
+      }
+      
+      $(this).click(function(event) {
+	event.preventDefault();
+	event.stopPropagation();
+	window.open(this.href, '_blank');
       });
-		}
-	});
+    }
+  });
 }
 
 

public/opac/js/butterfly/butterfly-ie.css

+/**
+ * jquery.butterfly.js
+ * @version 0.10
+ * @see http://irama.org/web/dhtml/butterfly/
+ * @license GNU GENERAL PUBLIC LICENSE (GPL) <http://www.gnu.org/licenses/gpl.html>
+ */
+ /* butterfly lightbox IE6 hacks */
+	* html #jb-overlay {
+		position: absolute !important;
+		top: expression(eval(document.documentElement.scrollTop));
+		height: expression(eval(document.documentElement.clientHeight) + 'px');
+		filter: alpha(opacity = 70);
+	}
+	* html #jb-window {
+		position: absolute;
+		top: expression(eval(document.documentElement.scrollTop));
+		height: expression(eval(document.documentElement.clientHeight) + 'px');
+	}
+	* html #jb-window.reactive {
+		background-image: url(../images/skin/reactive-overlay.gif);
+	}
+	* html #jb-window-inner {
+		margin-top: expression( (( this.parentNode.clientHeight - this.clientHeight ) / 2 ) + "px" );
+		margin-left: auto;
+		margin-right: auto;
+		overflow: auto !important;
+	}
+	* html #jb-window-content {
+		overflow: hidden;
+	}
+
+
+	/* IE6 Fixed Position Jitter Fix */
+	* html {
+		background-image: url(about:blank);
+		background-attachment: fixed;
+	}

public/opac/js/butterfly/butterfly.css

+/**
+ * jquery.butterfly.js
+ * @version 0.10
+ * @see http://irama.org/web/dhtml/butterfly/
+ * @license GNU GENERAL PUBLIC LICENSE (GPL) <http://www.gnu.org/licenses/gpl.html>
+ */
+ 
+#jb-overlay {
+	background: #000;
+	z-index: 999;
+	position: fixed;
+	top: 0;
+	height: 100%;
+	left: 0;
+	width: 100%;
+}
+#jb-window {
+	z-index: 1000;
+	position: fixed;
+	top: 0;
+	height: 100%;
+	left: 0;
+	width: 100%;
+}
+
+#jb-window-inner {
+	background-color: #fff;
+	color: #444;
+	width: 50%;
+	height: 50%;
+	margin: auto;
+	overflow: auto;
+	/*position: relative;*/
+}
+
+#jb-loading { /* For semantic value, not to be seen */
+	position: absolute;
+	left: 0; top: 0;
+	width: 0; height: 0;
+	padding: 0; margin: 0;
+	line-height: 0;
+	display: block;
+	overflow: hidden;
+}
+
+#jb-window.reactive {
+	background: transparent url(reactive-overlay.png) right top no-repeat;
+}
+
+
+#jb-window.loading #jb-window-inner {
+	background-image: url(loading-black-on-white.gif);
+	background-position: center center;
+	background-repeat: no-repeat;
+}
+/*.type-fragment #jb-window-content, */
+.type-ajax #jb-window-content {
+	padding: 0 1em 1em;
+}
+
+.type-media #jb-window-content {
+	padding: 0;
+}
+
+#jb-window-content:focus {
+	outline: none;
+}
+
+#jb-window-content .jb-caption {
+	display: block;
+	clear: both;
+	margin: 0;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	background: #fff;
+	width: 100%;
+}
+#jb-window-content .jb-caption span {
+	display: block;
+	padding: .5em 1em;
+}
+
+
+
+
+#jb-close-button img {
+	border: none;
+}
+
+#jb-window.error-no-content #jb-window-content {
+	background: transparent url(alert-64.png) 15px center no-repeat;
+	padding-left: 70px;
+}
+
+/* Image replacement on gallery controls */
+	#jb-gallery-prev,
+	#jb-gallery-next {
+		height: 0;
+		padding-top: 85px;
+		width: 49px;
+		background: transparent url(gallery-controls-sprite.png) left top no-repeat;
+	}
+	#jb-gallery-next {
+		background-position: -49px top;
+	}
+	#jb-gallery-prev:hover,
+	#jb-gallery-prev:focus {
+		background-position: left -85px;
+	}
+	#jb-gallery-next:hover,
+	#jb-gallery-next:focus {
+		background-position: -49px -85px;
+	}
+	#jb-gallery-prev.disabled,
+	#jb-gallery-next.disabled {
+		background: none;
+		cursor: default;
+	}
+	
+	.type-iframe #jb-window-content iframe {
+		border: none;
+		background: transparent;
+		padding: 0;
+	}

public/opac/js/butterfly/external.html

+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Test content</title>
+</head>
+
+<body>
+
+<p>A page with test content.</p>
+
+<div id="external-fragment">
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Aliquam  hendrerit lacinia justo,</a> eu ornare eros convallis sed. Nam lacus urna,  auctor quis fringilla in, malesuada sit amet lacus. Aliquam erat  volutpat. Vivamus turpis sapien, luctus sit amet rutrum vitae, dapibus  sed ipsum. Ut interdum suscipit pretium. Etiam semper aliquam sapien  nec porttitor. Nunc quis lacinia augue. Fusce eros neque, vulputate ut  dignissim quis, fringilla fermentum velit. Nulla lacinia sollicitudin  faucibus. In id nibh justo. Quisque hendrerit, nulla at placerat  accumsan, magna augue placerat sem, eget tempus dui ipsum eu tellus.  Phasellus interdum semper sapien, sit amet tristique metus porta ac.  Integer vestibulum, dolor eu rhoncus porta, augue risus condimentum  tortor, sed rhoncus ante dui sit amet lorem. Sed pellentesque nulla et  erat sollicitudin at scelerisque lectus faucibus. Nulla quis dapibus  turpis. Sed id velit sapien, at pulvinar nibh. In tincidunt laoreet  urna vel molestie.</p>
+    <p>Praesent mauris nisl, vulputate id ultricies non, semper quis nisl.  Integer enim neque, egestas eget consequat ut, facilisis non lectus.  Nam molestie vulputate tincidunt. Sed at dui dui, nec lacinia mi.  Praesent posuere leo eget nibh fermentum a eleifend tortor aliquet. Sed  ac urna mauris, eu cursus elit. Nunc quis felis et justo aliquet  pretium. Ut massa quam, interdum vitae rutrum vitae, auctor non ligula.  Ut facilisis faucibus lorem, vitae rhoncus felis posuere ac. Vivamus  vitae tellus eget tellus tincidunt scelerisque vel at tortor. Donec non  ullamcorper nulla. Mauris pulvinar interdum felis eget egestas. Donec  ac nunc velit, at eleifend sem. Duis mollis tempus vehicula. Etiam id  mauris nunc. Vivamus sollicitudin sem ullamcorper leo commodo non  pellentesque est fermentum. Maecenas adipiscing dui vel odio vulputate  lacinia. Vestibulum sed mattis sapien. Aenean odio justo, ultrices eu  dignissim laoreet, mattis id lacus. Vestibulum sed felis nulla, ac  molestie nisl.</p>
+    <p>Nulla rhoncus mi eget nisi aliquam id porta metus consectetur. Nulla  tempor magna ut odio tincidunt sollicitudin. Quisque ac venenatis  felis. Donec blandit nisl id turpis rhoncus molestie. Pellentesque  consequat dapibus lobortis. Pellentesque ut arcu metus. Morbi vel dui  quis augue convallis placerat non at sem. Morbi quis sem ut felis  hendrerit mattis. Proin non ante in sapien accumsan adipiscing id sit  amet nulla. Nunc accumsan fringilla diam, quis molestie nibh bibendum  ac. Aenean libero libero, placerat quis laoreet in, lobortis ac risus.  Nam lorem sapien, laoreet nec vehicula sit amet, placerat malesuada  sapien. Mauris mattis placerat quam, sit amet blandit nulla viverra et.  Proin condimentum egestas est in mattis.</p>
+    
+    <p>Nam ultrices pulvinar quam ac aliquam. Praesent vel ultricies massa.  Donec varius mi non tortor sodales quis ullamcorper odio volutpat.  Morbi dapibus eros et justo convallis eget dictum elit fringilla.  Suspendisse volutpat auctor pulvinar. Donec mattis feugiat mi eu  suscipit. Sed sed nisl enim. Sed eu urna eu risus eleifend pellentesque  eu sit amet odio. Vivamus sodales felis ac diam pellentesque ut  tincidunt sem tincidunt. Maecenas magna dolor, tincidunt vitae luctus  quis, tincidunt a justo. Mauris eros leo, varius vel vestibulum quis,  interdum feugiat nulla. </p>
+    <p>Quisque ut nisl mattis metus dictum viverra. Aliquam enim ante,  lobortis eget varius sed, tincidunt sagittis justo. In fermentum  ullamcorper eros at mollis. Donec semper feugiat justo et varius. Ut  ultrices, massa sit amet pellentesque malesuada, velit eros dictum  justo, vitae pellentesque mauris dui ac nunc. Suspendisse posuere  eleifend orci, ac dictum risus venenatis ac. Cras ut justo ac tortor  egestas condimentum. Suspendisse quis mi nec nunc convallis laoreet ut  vitae lorem. Fusce nisi odio, dapibus quis auctor quis, facilisis  accumsan sem. Vestibulum sem ante, condimentum ut pellentesque porta,  lacinia id mauris. Etiam dapibus nisi sit amet nisl euismod facilisis.  In quis lacus eget lectus venenatis tincidunt vitae sit amet nibh. Nunc  fermentum tellus mollis magna rhoncus pellentesque. Praesent  scelerisque odio a diam ultricies sed bibendum leo adipiscing. Class  aptent taciti sociosqu ad litora torquent per conubia nostra, per  inceptos himenaeos. Ut aliquet, libero eget vestibulum 	posuere, est  ante aliquet urna, ac rhoncus ligula arcu et leo. Cras fermentum  gravida auctor. Morbi ac elit eget velit <a href="#">malesuada blandit</a>. In  tincidunt nisi sed ligula viverra malesuada. Sed eleifend luctus arcu  in tincidunt. </p>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam  hendrerit lacinia justo, eu ornare eros convallis sed. Nam lacus urna,  auctor quis fringilla in, malesuada sit amet lacus. Aliquam erat  volutpat. Vivamus turpis sapien, luctus sit amet rutrum vitae, dapibus  sed ipsum. Ut interdum suscipit pretium. Etiam semper aliquam sapien  nec porttitor. Nunc quis lacinia augue. Fusce eros neque, vulputate ut  dignissim quis, fringilla fermentum velit. Nulla lacinia sollicitudin  faucibus. In id nibh justo. Quisque hendrerit, nulla at placerat  accumsan, magna augue placerat sem, eget tempus dui ipsum eu tellus.  Phasellus interdum semper sapien, sit amet tristique metus porta ac.  Integer vestibulum, dolor eu rhoncus porta, augue risus condimentum  tortor, sed rhoncus ante dui sit amet lorem. Sed pellentesque nulla et  erat sollicitudin at scelerisque lectus faucibus. Nulla quis dapibus  turpis. Sed id velit sapien, at pulvinar nibh. In tincidunt laoreet  urna vel molestie.</p>
+    <p>Praesent mauris nisl, vulputate id ultricies non, semper quis nisl.  Integer enim neque, egestas eget consequat ut, facilisis non lectus.  Nam molestie vulputate tincidunt. Sed at dui dui, nec lacinia mi.  Praesent posuere leo eget nibh fermentum a eleifend tortor aliquet. Sed  ac urna mauris, eu cursus elit. Nunc quis felis et justo aliquet  pretium. Ut massa quam, interdum vitae rutrum vitae, auctor non ligula.  Ut facilisis faucibus lorem, vitae rhoncus felis posuere ac. Vivamus  vitae tellus eget tellus tincidunt scelerisque vel at tortor. Donec non  ullamcorper nulla. Mauris pulvinar interdum felis eget egestas. Donec  ac nunc velit, at eleifend sem. Duis mollis tempus vehicula. Etiam id  mauris nunc. Vivamus sollicitudin sem ullamcorper leo commodo non  pellentesque est fermentum. Maecenas adipiscing dui vel odio vulputate  lacinia. Vestibulum sed mattis sapien. Aenean odio justo, ultrices eu  dignissim laoreet, mattis id lacus. Vestibulum sed felis nulla, ac  molestie nisl.</p>
+    <p>Nulla rhoncus mi eget nisi aliquam id porta metus consectetur. Nulla  tempor magna ut odio tincidunt sollicitudin. Quisque ac venenatis  felis. Donec blandit nisl id turpis rhoncus molestie. Pellentesque  consequat dapibus lobortis. Pellentesque ut arcu metus. Morbi vel dui  quis augue convallis placerat non at sem. Morbi quis sem ut felis  hendrerit mattis. Proin non ante in sapien accumsan adipiscing id sit  amet nulla. Nunc accumsan fringilla diam, quis molestie nibh bibendum  ac. Aenean libero libero, placerat quis laoreet in, lobortis ac risus.  Nam lorem sapien, laoreet nec vehicula sit amet, placerat malesuada  sapien. Mauris mattis placerat quam, sit amet blandit nulla viverra et.  Proin condimentum egestas est in mattis.</p>
+</div>
+
+<div id="another-fragment">
+
+    <p>Praesent mauris nisl, <a href="#">vulputate id ultricies non</a>, semper quis nisl.  Integer enim neque, egestas eget consequat ut, facilisis non lectus.  Nam molestie vulputate tincidunt. Sed at dui dui, nec lacinia mi.  Praesent posuere leo eget nibh fermentum a eleifend tortor aliquet. Sed  ac urna mauris, eu cursus elit. Nunc quis felis et justo aliquet  pretium. Ut massa quam, interdum vitae rutrum vitae, auctor non ligula.  Ut facilisis faucibus lorem, vitae rhoncus felis posuere ac. Vivamus  vitae tellus eget tellus tincidunt scelerisque vel at tortor. Donec non  ullamcorper nulla. Mauris pulvinar interdum felis eget egestas. Donec  ac nunc velit, at eleifend sem. Duis mollis tempus vehicula. Etiam id  mauris nunc. Vivamus sollicitudin sem ullamcorper leo commodo non  pellentesque est fermentum. Maecenas adipiscing dui vel odio vulputate  lacinia. Vestibulum sed mattis sapien. Aenean odio justo, ultrices eu  dignissim laoreet, mattis id lacus. Vestibulum sed felis nulla, ac  molestie nisl.</p>
+    <p>Nulla rhoncus mi eget nisi aliquam id porta metus consectetur. Nulla  tempor magna ut odio tincidunt sollicitudin. Quisque ac venenatis  felis. Donec blandit nisl id turpis rhoncus molestie. Pellentesque  consequat dapibus lobortis. Pellentesque ut arcu metus. Morbi vel dui  quis augue convallis placerat non at sem. Morbi quis sem ut felis  hendrerit mattis. Proin non ante in sapien accumsan adipiscing id sit  amet nulla. Nunc accumsan fringilla diam, quis molestie nibh bibendum  ac. Aenean libero libero, placerat quis laoreet in, lobortis ac risus.  Nam lorem sapien, laoreet nec vehicula sit amet, placerat malesuada  sapien. Mauris mattis placerat quam, sit amet blandit nulla viverra et.  Proin condimentum egestas est in mattis.</p>
+
+</div>
+
+
+</body>
+</html>

public/opac/js/butterfly/index.html

+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Butterfly lightbox test page</title>
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
+<script type='text/javascript' src='jquery.resize-events.js'></script>
+<script type='text/javascript' src='jquery.history.js'></script>
+<script type='text/javascript' src='jquery.pxToEm.js'></script>
+<script type='text/javascript' src='jquery.butterfly.js'></script>
+<script type="text/javascript">
+$(function(){
+	/* Enhance all image links, and internal (relative) links only */
+	//$('a:not([href^="http://"]), a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"]').butterfly(options={
+	$('#examples a').not('.image').butterfly(options={
+		contentDefaultWidth: '50em', // for content
+		contentDefaultHeight: '100%', // for content
+		mediaMaxWidth: '100%', // for images
+		mediaMaxHeight: '100%', // for images
+		lightBoxMargin: '2em', // margin around screen (can be em, % or px)
+		animateResize: true,
+		//animationSpeed: 250, // in ms
+		//preloadNextGalleryImage: false,
+		//reuseFragment: true,
+		//closeButton: true,
+		//closeButtonImage: 'close.png',
+		//galleryMode: 'all',
+		//galleryLoops: true,
+		galleryContainers: '.gallery-test', // can specify more than one, i.e.  '#gallery-container, .gallery-test'
+		preloadLoadingImage: 'loading-black-on-white.gif',
+		preloadGalleryControlsSprite: 'gallery-controls-sprite.png'
+	});
+	
+	options.treatAsImage = true;
+	$('#examples a.image').butterfly(options);
+});
+</script>
+<link type="text/css" rel="stylesheet" href="butterfly.css" />
+<!--[if lt IE 9]>
+	<link type="text/css" rel="stylesheet" href="butterfly-ie.css" />
+<![endif]-->
+<style type="text/css">
+	/*
+		Styles for this page
+	*/
+	body {
+		font-family: Helvetica, Arial, sans-serif;
+		background: #efefef;
+		color: #000;
+	}
+	#page-container {
+		width: 48em;
+		padding: 1em;
+		margin: 1em auto;
+		background: #fff;
+	}
+	
+	.butterfly-gallery-demo {
+		overflow: hidden;
+		clear: both;
+	}
+	.butterfly-gallery-demo ul {
+		overflow: hidden;
+		clear: both;
+		background: #000;
+		float: left;
+		padding: 0 1em;
+	}
+	.butterfly-gallery-demo li {
+		list-style-type: none;
+		float: left;
+		margin: 1em;
+		padding: 0;
+	}
+	.butterfly-gallery-demo li a {
+		display: block;
+		float: left;
+	}
+	.butterfly-gallery-demo li a:hover,
+	.butterfly-gallery-demo li a:focus {
+		outline: 2px solid #fff;
+	}
+
+</style>
+</head>
+
+<body>
+
+<div id="page-container">
+    
+    <h1>Butterfly lightbox test page</h1>
+    <p>This page demonstrates <a href="http://irama.org/web/dhtml/butterfly/"><em>Butterfly</em>, a robust, flexible and fully accessible lightbox solution</a>.</p>
+    
+    <p>Note: This lightbox effect will not work in IE6, but the fallback (linked content) is still accessible and usable to visitors using IE6.</p>
+    <p>Butterfly has been tested and works in Internet Explorer 7&ndash;9, Safari 5, Chrome 11, Opera 11 and Firefox 3&ndash;4.</p>
+    
+    <div id="examples">
+        <p>Butterfly can link to any content, for example:</p>
+        <ul class="gallery-test">
+            <li><a href="butterfly.jpg" rel="gallery" title="The Cairns Birdwing butterfly">An image (with a caption)</a></li>
+            <li><a href="#same-page-fragment" rel="gallery">A fragment of content from the same page</a></li>
+            <li><a href="external.html" rel="gallery">Another page of content (using Ajax)</a></li>
+            <li><a href="external.html#external-fragment" rel="gallery">A fragment from within the external content page</a></li>
+            <li><a href="http://en.wikipedia.org/wiki/Cairns_Birdwing" rel="gallery">External domain, via iframe</a></li>
+        </ul>
+        
+        <p>Test also:</p>
+        <ul>
+            <li>An image with thumbnail (at right) <a href="http://irama.org/assets/images/dhtml/butterfly/butterfly-1.jpg" style="float: right;"><img src="http://irama.org/assets/images/dhtml/butterfly/butterfly-1-preview.jpg" alt="test image" /></a></li>
+            <li><a href="external.html#another-fragment">Another fragment from the external content page</a></li>
+            <li>Try resizing the window and making it quite narrow or short (or change the text size)!</li>
+            <li><a class="image" href="http://chart.apis.google.com/chart?cht=qr&chs=500x500&chl=http://irama.org/web/dhtml/butterfly/">Link to an image without an image file extension (option set to treat as imnage anyway).</a></li>
+        </ul>
+       
+        <div class="section" id="gallery">
+            <h2>Gallery</h2>
+            <p>A gallery can be created using a container element or by specifying links with the same <code>rel</code> attribute.</p>
+            <div class="butterfly-gallery-demo">
+            <ul>
+                <li><a href="http://irama.org/assets/images/dhtml/butterfly/butterfly-1.jpg" rel="butterflies"><img src="http://irama.org/assets/images/dhtml/butterfly/butterfly-1-preview.jpg" alt="Cairns Birdwing" /></a></li>
+                <li><a href="http://irama.org/assets/images/dhtml/butterfly/butterfly-2.jpg" rel="butterflies"><img src="http://irama.org/assets/images/dhtml/butterfly/butterfly-2-preview.jpg" alt="Orange butterfly" /></a></li>
+                <li><a href="http://irama.org/assets/images/dhtml/butterfly/butterfly-3.jpg" rel="butterflies"><img src="http://irama.org/assets/images/dhtml/butterfly/butterfly-3-preview.jpg" alt="Blue butterfly" /></a></li>
+                <li><a href="http://irama.org/assets/images/dhtml/butterfly/butterfly-4.jpg" rel="butterflies"><img src="http://irama.org/assets/images/dhtml/butterfly/butterfly-4-preview.jpg" alt="Green butterfly" /></a></li>
+            </ul>
+            </div>
+        </div>
+        
+        <div class="section" id="same-page-fragment">
+            <h2>A fragment of this page</h2>
+            The <a href="butterfly.jpg">Cairns Birdwing</a> (<em>Ornithoptera euphorion</em>) is Australia's  largest endemic butterfly species, with females reaching a wingspan of  up to 16 cm. Males are usually a few centimeters smaller. A closely  allied species, the New Guinea or Priam's Birdwing (<em>Ornithoptera priamus</em>)  reaches 19 cm and is the largest butterfly species found in Australia,  but it is not endemic. Cairns Birdwings are found southwards from Mount  Webb and Cooktown to Mackay in Queensland. Its favoured habitat is  primary rainforest, although the species will breed readily in a home  garden if the correct larval host plants are grown. (via <a href="http://en.wikipedia.org/wiki/Cairns_Birdwing">Wikipedia</a>)</div>
+            
+            <div class="section" id="error-handling">
+                <h2>Error handling</h2>
+                <p>These links are all broken:</p>
+                <ul>
+                    <li><a href="butterfly-error.jpg">A broken image</a></li>
+                    <li><a href="#fragment-error">A non-existent fragment</a></li>
+                    <li><a href="external-error.html">A non-page</a></li>
+                    <li><a href="external.html#fragment-error">A non-existent fragment from within a real external content page</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

public/opac/js/butterfly/jquery.butterfly.min.js

+/**
+ * @author Andrew Ramsden <http://irama.org/>
+ * @see http://irama.org/web/dhtml/butterfly/
+ * @license GNU GENERAL PUBLIC LICENSE (GPL) <http://www.gnu.org/licenses/gpl.html>
+ */
+jQuery.butterfly={},jQuery.butterfly.defaultOptions={contentDefaultWidth:null,contentDefaultHeight:"100%",mediaMaxWidth:"100%",mediaMaxHeight:"100%",treatAsMedia:!1,lightBoxMargin:null,animateResize:!0,animationSpeed:150,useIframe:"autodetect",collapseHeightWhenPossible:!0,reuseFragment:!1,closeButton:!0,closeButtonImage:"close.png",closeButtonCorner:"tr",clickOverlayCloses:!0,preloadLoadingImage:"",preloadGalleryControlsSprite:"",galleryControlWidth:49,galleryControlHeight:85,galleryMode:"rel",galleryContainers:"",galleryLoops:!1,captionMode:"title",preloadNextGalleryImage:!0,zoomFromClicked:!1,callbackPreOpen:null,callbackPreResize:null,callbackPostResize:null,callbackPostOpen:null,callbackPreClose:null,callbackPostClose:null,treatAsImage:!1},jQuery.butterfly.conf={overlayOpacity:".7",lightboxClass:"lightbox",lightboxLinkSelector:"a.lightbox"},jQuery.butterfly.linkCount=0,DOM_VK_END=35,DOM_VK_HOME=36,DOM_VK_LEFT=37,DOM_VK_UP=38,DOM_VK_RIGHT=39,DOM_VK_DOWN=40,DOM_VK_ESCAPE=27,function(e,t){"use strict";function i(e){return e=e||window.event,e.keyCode?e.keyCode:e.which?e.which:null}var n,a,o,l,s,r,d,c,h,b,p,u,f;e.fn.accessibleText=function(){return this.is("img")?this.attr("alt"):this.is("input")?this.attr("value"):e.map(this.contents(),function(t){if(3===t.nodeType)return t.data;if(1===t.nodeType){var i=e(t);return i.is("img, input")||i.find("img[alt], input[value]").length>0?i.accessibleText():i.text()}}).join("")},e(function(){"undefined"!=typeof t&&e(this).each(function(){t.bind("x-text-resize x-window-resize",n)}),e(document.body).append('<div id="jb-overlay"></div><div id="jb-window"><div id="jb-window-inner"><div id="jb-window-content" style="width: auto; height: auto;" tabindex="0"></div></div></div>').bind("keydown",r),e("#jb-overlay").fadeTo(0,e.butterfly.conf.overlayOpacity,function(){e(this).hide()}),e("#jb-window").hide().click(d),e("#jb-window-inner").centre(),e("#jb-window-content").css({overflow:"hidden"}).hide(),e.history.init(function(t){""===t?a.apply():/^!/.test(t)&&(t=t.substring(1),e("#"+t).trigger("click",[!1]))},{unescape:",/"})}),e.fn.butterfly=function(t){return t="undefined"!=typeof t?t:{},t.closeButtonImage&&e('<img src="'+t.closeButtonImage+'" alt="" />'),t.preloadLoadingImage&&e('<img src="'+t.preloadLoadingImage+'" alt="" />'),t.preloadGalleryControlsSprite&&e('<img src="'+t.preloadGalleryControlsSprite+'" alt="" />'),this.each(function(){o.apply(this,[t])})},o=function(t){var i="undefined"!=typeof Number.prototype.pxToEm?!0:!1;t="undefined"==typeof t?e.butterfly.defaultOptions:e.extend({},e.butterfly.defaultOptions,t),null===t.lightBoxMargin&&(t.lightBoxMargin=i?"2em":"20px"),null===t.contentDefaultWidth&&(t.contentDefaultWidth=i?"50em":"700px"),("undefined"==typeof e(this).attr("id")||""===e(this).attr("id"))&&e(this).attr("id",e.butterfly.conf.lightboxClass+"-uid-"+e.butterfly.linkCount),t.linkID=e(this).attr("id"),e.butterfly.linkCount++,e(this).data("options",t),e(this).addClass(e.butterfly.conf.lightboxClass),e(this).click(l)},l=function(t,i){var n,o,l,r,d,h,p,u,f;if("undefined"!=typeof t&&t.preventDefault(),i="undefined"!=typeof i?i:!0)return void e.history.load("!"+e(this).attr("id"));switch(e("#jb-window-inner").css("overflow","hidden"),e("#jb-overlay").is(":visible")?(n=e("#jb-overlay").data("options"),"fragment"===n.linkType&&n.reuseFragment&&e(".jb-placeholder").remove(),o=n.originalTrigger):o=this,r=window.location.href.replace(/#.*$/,""),l=e(this).attr("href"),0===l.indexOf(r)&&(l=l.substring(r.length)),d=e(this).attr("title"),h=e(this).accessibleText(),n=e(this).data("options"),n.href=l,n.title=d,n.linkText=h,n.trigger=this,n.originalTrigger=o,document.getElementById("jb-window-inner").className=n.className||"",n.treatAsImage||b(l)?n.linkType="image":"#"===l.substring(0,1)?n.linkType="fragment":n.useIframe===!0||n.useIframe!==!1&&this.hostname!==window.location.hostname?(n.linkType="iframe",n.useIframe=!0,n.contentDefaultWidth="100%",n.contentDefaultHeight="100%"):n.linkType="ajax",null!==n.callbackPreOpen&&"function"==typeof n.callbackPreOpen&&n.callbackPreOpen.apply(this),n.closeButton?0===e("#jb-close-button").length&&(e("#jb-window").prepend('<a href="#" id="jb-close-button"><img src="'+n.closeButtonImage+'" alt="Close lightbox" /></a>'),e("#jb-close-button").click(a)):e("#jb-close-button").remove(),n.clickOverlayCloses?e("#jb-window").addClass("reactive"):e("#jb-window").removeClass("reactive"),p=e(this),""!==n.galleryContainers&&(n.galleryMode="container"),n.gallerySelector="",n.galleryMode){case"all":n.gallerySelector=e.butterfly.conf.lightboxLinkSelector;break;case"container":e.each(n.galleryContainers.split(","),function(){return u=this+" "+e.butterfly.conf.lightboxLinkSelector,p.is(u)?(n.gallerySelector=u,!1):void 0})}""===n.gallerySelector&&""!==e(this).attr("rel")&&(n.gallerySelector=e.butterfly.conf.lightboxLinkSelector+'[rel="'+e(this).attr("rel")+'"]'),f=e("#jb-overlay").data("options")||{},e(this).data("options",n),e("#jb-overlay").data("options",n),e("#jb-window").append('<p id="jb-loading">Loading...</p>'),e("#jb-loading").attr("tabindex","0").focus(),e("#jb-overlay").is(":visible")?("fragment"===f.linkType&&f.reuseFragment&&(e(".jb-placeholder").after(e(f.href)),e(".jb-placeholder").remove(),e(f.href).disableFocussableElements()),e("#jb-window-content").hide().empty(),e("#jb-window").addClass("loading"),s.apply(this,[c])):(e(document.body).disableFocussableElements("#jb-window *"),e("#jb-close-button").hide(),e("#jb-gallery-controls").hide(),e("#jb-overlay").fadeIn(n.animationSpeed).centre(),e("#jb-window").addClass("loading").show(),n.zoomFromClicked?e("#jb-window-inner").css({top:e(this).offset().top,left:e(this).offset().left,width:e(this).width(),height:e(this).height()}):e("#jb-window-inner").css({width:"100px",height:"100px"}).centre(),s.apply(this,[c]))},c=function(){var t=e("#jb-overlay").data("options");e("#jb-window").restoreFocussableElements(),e("#jb-window").removeClass("loading"),setTimeout(function(){switch(e("#jb-window").removeClass("type-media type-image type-fragment type-ajax"),t.linkType){case"image":e("#jb-window").addClass("type-image type-media"),e("#jb-window-inner").css("overflow","hidden");break;case"fragment":e("#jb-window").addClass("type-fragment"),e("#jb-window-inner").css("overflow","auto");break;case"iframe":e("#jb-window").addClass("type-iframe"),e("#jb-window-inner").css("overflow","hidden");break;case"ajax":e("#jb-window").addClass("type-ajax"),e("#jb-window-inner").css("overflow","auto")}t.treatAsMedia&&e("#jb-window").addClass("type-media"),n.apply(this,[function(){var i;"iframe"===t.linkType&&e("#jb-window-content").css("visibility","visible"),e("#jb-window-content").fadeIn(t.animationSpeed,function(){e("#jb-window-content").focus(),e("#jb-loading").remove(),null!==t.callbackPostOpen&&"function"==typeof t.callbackPostOpen&&t.callbackPostOpen.apply(this),i=e("#jb-gallery-next"),t.preloadNextGalleryImage&&i.length>0&&i.is(":visible")&&"#"!==i.attr("href")&&b(i.attr("href"))&&e('<img src="'+i.attr("href")+'" alt="" />')})}])},0)},n=function(t){var i,n,a,o,l,s,r,d,c,h,b,f,w,g,y,j,m,v,k,x,C,I=e("#jb-overlay").data("options");"undefined"!=typeof I&&(i=parseInt(p(I.lightBoxMargin),10),n=e("#jb-window").width()-2*i,a=e("#jb-window").height()-2*i,o=p(I.contentDefaultWidth,n),l=p(I.contentDefaultHeight,a),s=p(I.mediaMaxWidth,n),r=p(I.mediaMaxHeight,a),null!==I.callbackPreResize&&"function"==typeof I.callbackPreResize&&I.callbackPreResize.apply(e("#jb-window"),[n,a,o,l,s,r]),"image"===I.linkType||I.treatAsMedia?(d=e("#jb-window-content").lightBoxContentWidth(),c=e("#jb-window-content").lightBoxContentHeight(),d>s&&(h=d/s,d=s,c/=h),c>r&&(h=c/r,c=r,d/=h),d>n&&(h=d/n,d=n,c*=h),c>a&&(h=c/a,c=a,d*=h)):"iframe"===I.linkType?(d=o,c=l):(d=e("#jb-window-content").lightBoxContentWidth(),d=""===o||"100%"===o||o>n?n:o,I.collapseHeightWhenPossible?(b=e("#jb-window-inner").width(),e("#jb-window-inner").animate({width:d},0),c=e("#jb-window-content").lightBoxContentHeight(!1),e("#jb-window-inner").width(b),c>a&&(c=a)):(c=e("#jb-window-content").lightBoxContentHeight(),c=""===l||"100%"===l||l>a?a:l)),f=u(d,c),w=I.animateResize?I.animationSpeed:0,e("#jb-close-button").hide(),e("#jb-gallery-controls").hide(),"iframe"===I.linkType&&e("#jb-window-inner iframe").css("visibility","hidden"),e("#jb-window-inner").animate({width:d,height:c,left:f[1],top:f[0]},w,0,function(){if(I=e("#jb-overlay").data("options"),d=e("#jb-window-inner").width(),c=e("#jb-window-inner").height(),"iframe"===I.linkType&&(e("#jb-window-inner iframe").width(d).height(c),e("#jb-window-inner iframe").css("visibility","visible")),e("#jb-close-button").length>0){switch(g=parseInt(e("#jb-close-button").width(),10),y=parseInt(e("#jb-close-button").height(),10),I.closeButtonCorner){case"tr":j=f[1]+d-g/2,m=f[0]-y/2;break;case"br":j=f[1]+d-g/2,m=f[0]+c-y/2;break;case"bl":j=f[1]-g/2,m=f[0]+c-y/2;break;default:j=f[1]-g/2,m=f[0]-y/2}e("#jb-close-button").css({position:"absolute","z-index":"999999",left:j,top:m}).show()}e("#jb-gallery-controls").is(".active")&&(v=f[0]+c/2-I.galleryControlHeight/2,k=f[1]-I.galleryControlWidth,e("#jb-gallery-prev").css({top:v,left:k}),x=f[0]+c/2-I.galleryControlHeight/2,C=f[1]+d,e("#jb-gallery-next").css({top:x,left:C}),e("#jb-gallery-controls").show()),null!==I.callbackPostResize&&"function"==typeof I.callbackPostResize&&I.callbackPostResize.apply(e("#jb-window"),[n,a,o,l,s,r]),"undefined"!=typeof t&&"undefined"!=typeof t.apply&&t.apply()}))},s=function(t){var i,n,a,o,l,s,r,d,c,b,u,w,g=e("#jb-overlay").data("options"),y=g.href;switch(g.captionMode){case"title":i=g.title?"<p class='jb-caption'><span>"+g.title+"</span></p>":"";break;case"text":i=g.linkText?"<p class='jb-caption'><span>"+g.linkText+"</span></p>":"";break;default:i=""}switch(e("#jb-window").removeClass("error-no-content"),n=e(g.gallerySelector),e("#jb-gallery-controls").removeClass("active"),n.length>1&&n.isInSet("#"+g.linkID)?(0===e("#jb-gallery-controls").length?(e("#jb-window").append('<div id="jb-gallery-controls"></div>'),a=e('<a id="jb-gallery-prev" href="#">Previous</a>').click(h),o=e('<a id="jb-gallery-next" href="#">Next</a>').click(h),e("#jb-gallery-controls").append(a).append(o),a.add(o).css({position:"absolute","z-index":"99999",display:"block",overflow:"hidden"})):(a=e("#jb-gallery-prev"),o=e("#jb-gallery-next"),a.add(o).removeClass("disabled").attr("tabindex","0").attr("title","").show()),e("#jb-gallery-controls").hide(),e("#jb-gallery-controls").addClass("active"),l=n.prevInSet("#"+g.linkID),l===!1&&(g.galleryLoops?l=n.lastInSet():(l=e('<a href="#" id=""></a>'),a.addClass("disabled").attr("tabindex","-1").hide())),a.attr("href",l.attr("href")).data("linkID",l.attr("id")).attr("title",e.trim(l.accessibleText())),s=n.nextInSet("#"+g.linkID),s===!1&&(g.galleryLoops?s=n.firstInSet():(s=e('<a href="#" id=""></a>'),o.addClass("disabled").attr("tabindex","-1").hide())),o.attr("href",s.attr("href")).data("linkID",s.attr("id")).attr("title",e.trim(s.accessibleText()))):e("#jb-gallery-controls").hide(),g.linkType){case"fragment":g.reuseFragment?(e(y).after('<span class="jb-placeholder"></span>'),e("#jb-window-content").empty().append(e(y))):e("#jb-window-content").empty().append(e(y).clone(!0)),f.apply(this,[g.linkType,y]),t.apply(this);break;case"image":e("#jb-window-content").empty().append('<img src="'+y+'" alt="" style="max-width: 100%; max-height: 100%; float: left;" />'+i),e("#jb-window-content img").error(function(){f.apply(this,[g.linkType,y,t])}).data("full-width","").data("full-height","").load(t);break;case"iframe":e("#jb-window-content").show().css("visibility","hidden"),e("#jb-window-content").empty().append('<iframe src="'+y+'" title="'+i+'" width="100%" height="1000" />'),e("#jb-window-content").css("visibility","hidden"),r=parseInt(p(g.lightBoxMargin),10),d=e("#jb-window").width()-2*r,c=e("#jb-window").height()-2*r,b=p(g.contentDefaultWidth,d),u=p(g.contentDefaultHeight,c),e("#jb-window-content > iframe").width(b).height(u).error(function(){f.apply(this,[g.linkType,y,t])}).load(t);break;default:e.ajaxSetup({cache:!0}),w=-1!==y.indexOf("#")?y.split("#").join(" #"):y,e("#jb-window-content").empty().load(w,function(){f.apply(this,[g.linkType,y]),t.apply(this)})}},f=function(t,i,n){var a,o=!1;("image"===t||0===e("#jb-window-content").children().length)&&(o=!0),o&&(a=e("#jb-overlay").data("options"),a.linkType="fragment",a.treatAsMedia=!1,e("#jb-overlay").data("options",a),e("#jb-window").removeClass("type-image type-media").addClass("type-fragment error-no-content"),e("#jb-window-content").empty().append("<p>There was an error loading lightbox content. <strong>"+e(a.trigger).text()+"</strong> (<samp>"+i+"</samp>) could not be found.</p>")),"undefined"!=typeof n&&n.apply(this)},a=function(t){var i,n,a;t&&t.preventDefault(),e("#jb-window:hidden").length||(i=e("#jb-overlay").data("options"),n=i.href,null!==i.callbackPreClose&&"function"==typeof i.callbackPreClose&&i.callbackPreClose.apply(i.trigger),"fragment"===i.linkType&&i.reuseFragment&&(e(".jb-placeholder").after(e(n)),e(".jb-placeholder").remove()),e(document.body).restoreFocussableElements(),e("#jb-overlay").fadeOut(i.animationSpeed),e("#jb-window").hide(),e("#jb-window-content").hide(),a=e(i.originalTrigger),"undefined"==typeof a.attr("tabindex")&&a.attr("tabindex",0),a.focus(),e("#jb-loading").remove(),null!==i.callbackPostClose&&"function"==typeof i.callbackPostClose&&i.callbackPostClose.apply(i.trigger),e.history.load(""))},e.fn.lightBoxContentWidth=function(){var t,i=this.closest("#jb-window"),n=e("#jb-window-inner"),a=i.hasClass("type-media")?!0:!1,o=i.hasClass("media-image")?!0:!1,l=n.width(),s=n.height(),r=n.css("left"),d=n.css("top");return n.css(e.browser.msie&&7===e.browser.version&&a&&o&&0===this.find("img").outerWidth(!0)?{width:"100%",height:"100%",left:0,top:0}:{width:"auto",height:"auto",left:0,top:0}),"none"===this.css("display")?(this.css("display","block"),t=a?this.find("img").outerWidth(!0):this.outerWidth(!0),this.css("display","none")):t=this.outerWidth(!0),n.css({left:r,top:d}),n.animate({width:l,height:s},0),t},e.fn.lightBoxContentHeight=function(t){var i,n=this.closest("#jb-window"),a=n.find("#jb-window-inner"),o=n.hasClass("type-media")?!0:!1,l=n.hasClass("media-image")?!0:!1,s=a.width(),r=a.height(),d=a.css("left"),c=a.css("top");return t="undefined"!=typeof t?t:!0,e.browser.msie&&7===e.browser.version&&o&&l&&0===this.find("img").outerWidth(!0)?(e("#jb-window-inner").height("100%"),t&&e("#jb-window-inner").width("100%").css({left:0,top:0})):(e("#jb-window-inner").height("auto"),t&&e("#jb-window-inner").width("auto").css({left:0,top:0})),"none"===this.css("display")?(this.css("display","block"),i=this.outerHeight(!0),this.css("display","none")):i=e(this).outerHeight(!0),e("#jb-window-inner").width(s).height(r).css({left:d,top:c}),i},d=function(t){var i=e("#jb-overlay").data("options");t.target===e("#jb-window").get(0)&&i.clickOverlayCloses&&a.apply()},r=function(t){var n;if(!e("#jb-overlay").is(":visible")||t.ctrlKey||t.altKey||t.shiftKey||t.metaKey)return!0;switch(n=i(t)){case DOM_VK_UP:case DOM_VK_LEFT:e("#jb-gallery-prev").click();break;case DOM_VK_DOWN:case DOM_VK_RIGHT:e("#jb-gallery-next").click();break;case DOM_VK_HOME:e(e("#jb-overlay").data("options").gallerySelector).firstInSet().click();break;case DOM_VK_END:e(e("#jb-overlay").data("options").gallerySelector).lastInSet().click();break;case DOM_VK_ESCAPE:a.apply();break;default:return!0}t.preventDefault()},h=function(t){var i,n=e(this);return t.preventDefault(),""!==n.data("linkID")?(e("#jb-gallery-controls").hide(),i=e("#"+n.data("linkID")),i.click()):void 0},e.fn.centre=function(){return this.css({position:"fixed",top:(e(window).height()-this.outerHeight())/2+"px",left:(e(window).width()-this.outerWidth())/2+"px"})},u=function(t,i){var n=(e(window).height()-i)/2,a=(e(window).width()-t)/2;return[n,a]},e.fn.isInSet=function(t){return-1!==this.index(e(t))},e.fn.nextInSet=function(t){var i=this.index(e(t));return this.length>i+1?this.eq(i+1):!1},e.fn.prevInSet=function(t){var i=this.index(e(t));return i>0?this.eq(i-1):!1},e.fn.firstInSet=function(){return this.length>0?this.eq(0):!1},e.fn.lastInSet=function(){return this.length>0?this.eq(-1):!1},b=function(e){if("undefined"==typeof e||""===e)return!1;var t=String(e).lastIndexOf(".");return-1===t?!1:/^\.(jpg|png|gif|bmp|jpeg)$/i.test(e.substring(t))},e.fn.disableFocussableElements=function(t){t=t||"";var i=this.find("a, input, button, area, frame, iframe, [tabindex]").not(t).not('*[tabindex="-1"]');i.each(function(){var t=e(this),i=t.attr("tabindex");i="undefined"==typeof i||""===i?"":i,t.data("prevTabIndex",i).addClass("jb-unfocussed").attr("tabindex","-1")})},e.fn.restoreFocussableElements=function(){var t=this.find(".jb-unfocussed");t.each(function(){var t=e(this),i=t.data("prevTabIndex");switch(i){case"":t.removeAttr("tabindex");break;default:t.attr("tabindex",i)}t.removeClass("jb-unfocussed")})},p=function(t,i){return i="undefined"!=typeof i?i:e(document.body).width(),t=t.replace("px","").replace(/^\s+|\s+$/g,""),isNaN(t)?"%"===t.substr(t.length-1)?"undefined"!=typeof i?(t=parseInt(t.substr(0,t.length-1).replace(/^\s+|\s+$/g,""),10),t/100*parseInt(i,10)):(e.debug("Warning: percentage unit was supplied to parsePixels() but could not be calculated because centDimension was not supplied."),parseInt(t,10)):"em"===t.substr(t.length-2)?"undefined"!=typeof Number.prototype.pxToEm?(t=parseInt(t.substr(0,t.length-2).replace(/^\s+|\s+$/g,""),10),t=t.pxToEm({reverse:!0}),t.substr(0,t.length-2)):(e.debug("Warning: em unit was supplied to parsePixels() but could not be calulated because pxToEm plugin was not found."),parseInt(t,10)):(e.debug("Warning: unknown unit was supplied. parsePixels() can support px, em or % units only."),parseInt(t,10)):parseInt(t,10)}}(jQuery,ResizeEvents);

public/opac/js/butterfly/jquery.history.js

+/*
+ * jQuery history plugin
+ * 
+ * The MIT License
+ * 
+ * Copyright (c) 2006-2009 Taku Sano (Mikage Sawatari)
+ * Copyright (c) 2010 Takayuki Miwa
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+(function($) {
+    var locationWrapper = {
+        put: function(hash, win) {
+            (win || window).location.hash = this.encoder(hash);
+        },
+        get: function(win) {
+            var hash = ((win || window).location.hash).replace(/^#/, '');
+            try {
+                return $.browser.mozilla ? hash : decodeURIComponent(hash);
+            }
+            catch (error) {
+                return hash;
+            }
+        },
+        encoder: encodeURIComponent
+    };
+
+    var iframeWrapper = {
+        id: "__jQuery_history",
+        init: function() {
+            var html = '<iframe id="'+ this.id +'" style="display:none" src="javascript:false;" />';
+            $("body").prepend(html);
+            return this;
+        },
+        _document: function() {
+            return $("#"+ this.id)[0].contentWindow.document;
+        },
+        put: function(hash) {
+            var doc = this._document();
+            doc.open();
+            doc.close();
+            locationWrapper.put(hash, doc);
+        },
+        get: function() {
+            return locationWrapper.get(this._document());
+        }
+    };
+
+    function initObjects(options) {
+        options = $.extend({
+                unescape: false
+            }, options || {});
+
+        locationWrapper.encoder = encoder(options.unescape);
+
+        function encoder(unescape_) {
+            if(unescape_ === true) {
+                return function(hash){ return hash; };
+            }
+            if(typeof unescape_ == "string" &&
+               (unescape_ = partialDecoder(unescape_.split("")))
+               || typeof unescape_ == "function") {
+                return function(hash) { return unescape_(encodeURIComponent(hash)); };
+            }
+            return encodeURIComponent;
+        }
+
+        function partialDecoder(chars) {
+            var re = new RegExp($.map(chars, encodeURIComponent).join("|"), "ig");
+            return function(enc) { return enc.replace(re, decodeURIComponent); };
+        }
+    }
+
+    var implementations = {};
+
+    implementations.base = {
+        callback: undefined,
+        type: undefined,
+
+        check: function() {},
+        load:  function(hash) {},
+        init:  function(callback, options) {
+            initObjects(options);
+            self.callback = callback;
+            self._options = options;
+            self._init();
+        },
+
+        _init: function() {},
+        _options: {}
+    };
+
+    implementations.timer = {
+        _appState: undefined,
+        _init: function() {
+            var current_hash = locationWrapper.get();
+            self._appState = current_hash;
+            self.callback(current_hash);
+            setInterval(self.check, 100);
+        },
+        check: function() {
+            var current_hash = locationWrapper.get();
+            if(current_hash != self._appState) {
+                self._appState = current_hash;
+                self.callback(current_hash);
+            }
+        },
+        load: function(hash) {
+            if(hash != self._appState) {
+                locationWrapper.put(hash);
+                self._appState = hash;
+                self.callback(hash);
+            }
+        }
+    };
+
+    implementations.iframeTimer = {
+        _appState: undefined,
+        _init: function() {
+            var current_hash = locationWrapper.get();
+            self._appState = current_hash;
+            iframeWrapper.init().put(current_hash);
+            self.callback(current_hash);
+            setInterval(self.check, 100);
+        },
+        check: function() {
+            var iframe_hash = iframeWrapper.get(),
+                location_hash = locationWrapper.get();
+
+            if (location_hash != iframe_hash) {
+                if (location_hash == self._appState) {    // user used Back or Forward button
+                    self._appState = iframe_hash;
+                    locationWrapper.put(iframe_hash);
+                    self.callback(iframe_hash); 
+                } else {                              // user loaded new bookmark
+                    self._appState = location_hash;  
+                    iframeWrapper.put(location_hash);
+                    self.callback(location_hash);
+                }
+            }
+        },
+        load: function(hash) {
+            if(hash != self._appState) {
+                locationWrapper.put(hash);
+                iframeWrapper.put(hash);
+                self._appState = hash;
+                self.callback(hash);
+            }
+        }
+    };
+
+    implementations.hashchangeEvent = {
+        _init: function() {
+            self.callback(locationWrapper.get());
+            $(window).bind('hashchange', self.check);
+        },
+        check: function() {
+            self.callback(locationWrapper.get());
+        },
+        load: function(hash) {
+            locationWrapper.put(hash);
+        }
+    };
+
+    var self = $.extend({}, implementations.base);
+
+    if($.browser.msie && ($.browser.version < 8 || document.documentMode < 8)) {
+        self.type = 'iframeTimer';
+    } else if("onhashchange" in window) {
+        self.type = 'hashchangeEvent';
+    } else {
+        self.type = 'timer';
+    }
+
+    $.extend(self, implementations[self.type]);
+    $.history = self;
+})(jQuery);

public/opac/js/butterfly/jquery.pxToEm.js

+/*-------------------------------------------------------------------- 
+ * javascript method: "pxToEm"
+ * by:
+   Scott Jehl (scott@filamentgroup.com) 
+   Maggie Wachs (maggie@filamentgroup.com)
+   http://www.filamentgroup.com
+ *
+ * Copyright (c) 2008 Filament Group
+ * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
+ *
+ * Description: Extends the native Number and String objects with pxToEm method. pxToEm converts a pixel value to ems depending on inherited font size.  
+ * Article: http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/
+ * Demo: http://www.filamentgroup.com/examples/pxToEm/	 	
+ *							
+ * Options:  	 								
+ 		scope: string or jQuery selector for font-size scoping
+ 		reverse: Boolean, true reverses the conversion to em-px
+ * Dependencies: jQuery library						  
+ * Usage Example: myPixelValue.pxToEm(); or myPixelValue.pxToEm({'scope':'#navigation', reverse: true});
+ *
+ * Version: 2.0, 08.01.2008 
+ * Changelog:
+ *		08.02.2007 initial Version 1.0
+ *		08.01.2008 - fixed font-size calculation for IE
+--------------------------------------------------------------------*/
+
+Number.prototype.pxToEm = String.prototype.pxToEm = function(settings){
+	//set defaults
+	settings = jQuery.extend({
+		scope: 'body',
+		reverse: false
+	}, settings);
+	
+	var pxVal = (this == '') ? 0 : parseFloat(this);
+	var scopeVal;
+	var getWindowWidth = function(){
+		var de = document.documentElement;
+		return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
+	};	
+	
+	/* When a percentage-based font-size is set on the body, IE returns that percent of the window width as the font-size. 
+		For example, if the body font-size is 62.5% and the window width is 1000px, IE will return 625px as the font-size. 	
+		When this happens, we calculate the correct body font-size (%) and multiply it by 16 (the standard browser font size) 
+		to get an accurate em value. */
+				
+	if (settings.scope == 'body' && jQuery.browser.msie && (parseFloat(jQuery('body').css('font-size')) / getWindowWidth()).toFixed(1) > 0.0) {
+		var calcFontSize = function(){		
+			return (parseFloat(jQuery('body').css('font-size'))/getWindowWidth()).toFixed(3) * 16;
+		};
+		scopeVal = calcFontSize();
+	}
+	else { scopeVal = parseFloat(jQuery(settings.scope).css("font-size")); };
+			
+	var result = (settings.reverse == true) ? (pxVal * scopeVal).toFixed(2) + 'px' : (pxVal / scopeVal).toFixed(2) + 'em';
+	return result;
+};
\ No newline at end of file