{foreach from=$current.unique_derivatives item=derivative key=derivative_type}{strip}
<map name="map{$derivative->get_type()}">
{assign var='size' value=$derivative->get_size()}
{if isset($previous)}
<area shape=rect coords="0,0,{($size[0]/4)|@intval},{$size[1]}" href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE_ESC}" alt="{$previous.TITLE_ESC}">
{/if}
<area shape=rect coords="{($size[0]/4)|@intval},0,{($size[0]/1.34)|@intval},{($size[1]/4)|@intval}" href="{$U_UP}" title="{'Thumbnails'|@translate}" alt="{'Thumbnails'|@translate}">
{if isset($next)}
<area shape=rect coords="{($size[0]/1.33)|@intval},0,{$size[0]},{$size[1]}" href="{$next.U_IMG}" title="{'Next'|@translate} : {$next.TITLE_ESC}" alt="{$next.TITLE_ESC}">
{/if}
</map>
{/strip}{/foreach}

function del_map_elementsT ($content, &$smarty) {
    $search = '/(<div id="theImage">).*({\$ELEMENT_CONTENT})/is';
    $repla='<div id="theImage">
{if !$current.selected_derivative->is_cached()}
{combine_script id=\'jquery.ajaxmanager\' path=\'themes/default/js/plugins/jquery.ajaxmanager.js\' load=\'footer\'}
{combine_script id=\'thumbnails.loader\' path=\'themes/default/js/thumbnails.loader.js\' require=\'jquery.ajaxmanager\' load=\'footer\'}
{footer_script}var error_icon = "{$ROOT_URL}{$themeconf.icon_dir}/errors_small.png"{/footer_script}
{/if}

<img {if $current.selected_derivative->is_cached()}src="{$current.selected_derivative->get_url()}" {$current.selected_derivative->get_size_htm()}{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax_loader.gif" data-src="{$current.selected_derivative->get_url()}"{/if} alt="{$ALT_IMG}" id="theMainImage" title="{if isset($COMMENT_IMG)}{$COMMENT_IMG|@strip_tags:false|@replace:\'"\':\' \'}{else}{$current.TITLE_ESC} - {$ALT_IMG}{/if}">
';

    return preg_replace($search, $repla , $content);
}

$template->set_prefilter('picture', 'del_map_elementsT');

'.$element_info['element_url'].

.loupe {
  pointer-events: none;
  border:3px solid white;
  -moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
  -webkit-box-shadow:0 0 5px #777;
  box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
  -moz-border-radius:90px;  
  -webkit-border-radius:90px;
  border-radius:90px;
  
  opacity: 0;
  transition: opacity 0.3s;

  width: 180px;
  height: 180px;

  position: fixed;
  top: -90px;
  left: -90px;
}

.loupe--active {
  opacity: 1;
}

#loupe_image {
  cursor:none;
}

<?php
/*
Plugin Name: Loupe
Version: 1.0.0
Description: Display a magnifing loupe over pictures
Plugin URI: http://piwigo.org/ext/extension_view.php?eid=838
Author: eliz82
Author URI: http://piwigo.org
*/

add_event_handler('loc_begin_picture', 'load_Loupe');

function load_Loupe() {
  global $template;
  $path = get_root_url().'plugins/'. basename(dirname(__FILE__)).'/';
    $template->set_prefilter('picture', 'del_map_elementsT');
  $template->append('head_elements', '
<link rel="stylesheet" type="text/css" href="'.$path.'lib/loupe.css">
<script type="text/javascript" src="'.$path.'lib/loupe.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) { 
    new Loupe(document.getElementById("loupe_image"));
});
</script>'
  );
}

add_event_handler('render_element_content','add_loupe_picture_content',EVENT_HANDLER_PRIORITY_NEUTRAL+10,2);

function add_loupe_picture_content($content, $element_info) {
  preg_match('/<\s*img\s+[^>]*?src\s*=\s*(\'|\")(.*?)\\1[^>]*?\/?\s*>/i',$content,$match);
  if(isset($match) && count($match)>0){
    $content = str_replace($match[0],'<a id="loupe_image" href="'.$element_info['element_url'].'">'.$match[0].'</a>',$content);
  }
  return $content;
}

function del_map_elementsT ($content, &$smarty) {
    $search = '/(<div id="theImage">).*({\$ELEMENT_CONTENT})/is';
    $repla='<div id="theImage">
{if !$current.selected_derivative->is_cached()}
{combine_script id=\'jquery.ajaxmanager\' path=\'themes/default/js/plugins/jquery.ajaxmanager.js\' load=\'footer\'}
{combine_script id=\'thumbnails.loader\' path=\'themes/default/js/thumbnails.loader.js\' require=\'jquery.ajaxmanager\' load=\'footer\'}
{footer_script}var error_icon = "{$ROOT_URL}{$themeconf.icon_dir}/errors_small.png"{/footer_script}
{/if}

<img {if $current.selected_derivative->is_cached()}src="{$current.selected_derivative->get_url()}" {$current.selected_derivative->get_size_htm()}{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax_loader.gif" data-src="{$current.selected_derivative->get_url()}"{/if} alt="{$ALT_IMG}" id="theMainImage" title="{if isset($COMMENT_IMG)}{$COMMENT_IMG|@strip_tags:false|@replace:\'"\':\' \'}{else}{$current.TITLE_ESC} - {$ALT_IMG}{/if}">
';

    return preg_replace($search, $repla , $content);
}
?>