Hi all,
I'm developing a website around geology. This is a library of photos of stone samples.
It's important to see some details on those images, but without opening a new page with the XXL version of the picture.
So, to me, the idea of a magnifier (loupe) as those proposed by Flop25 (here : http://fr.piwigo.org/doc/doku.php?id=pr … nel:flop25) will be perfect.
But, despite my research, no plugins, no theme, no further information on how to integrate a JQuery magnifier in Piwigo (just a very old thread in the french forum here : http://fr.piwigo.org/forum/viewtopic.php?id=5468).
So if some of those have some advices or more i would be really greetfull.
Thanks
Piwigo version: 2.8.2
PHP version: 5.6.24
MySQL version: 5.6.29
Piwigo URL: http://www.structurotheque.u-psud.fr
Offline
Hi :-)
[extension by P@t] Lightbox ?
Offline
Hi ddtddt,
Thanks for your reply but i know this plugin and it's not the functionality i want.
See this : http://redopop.com/loupe/ or this : http://demo.tutorialzine.com/2010/06/ap … /demo.html for examples.
Offline
unfortunatly I have even elss spare time now than the time I wrote that list so... did you know that learning programming is very useful to develop and train your logic? It's also great to discover new horizons... :)
Offline
MacGeol wrote:
Hi ddtddt,
Thanks for your reply but i know this plugin and it's not the functionality i want.
See this : http://redopop.com/loupe/ or this : http://demo.tutorialzine.com/2010/06/ap … /demo.html for examples.
Hi :-)
loupe is 2010
you don't si jquery more recently ?
Offline
indeed a project from 2010 in jquery is probably not the best choice now.
a native js or more recent jquery app with more ptions would be better for a Pwg plugin
Offline
great he has been now overcomplicated with js hype stuff https://github.com/redoPop/loupe forks are probably worth a look
Offline
Hi ddtddt and flop25,
Thanks for your answers.
In fact i've seen the redoPop/loupe project too.
The problem is now to implement it in the Piwigo code.
I think the best way to do that is to use the demo1 "large image linked"
I have to modify the template "picture_content.tpl" to put the derivative larger image in link.
I try it and tell you
Offline
MacGeol wrote:
The problem is now to implement it in the Piwigo code.
I made this plugin http://piwigo.org/ext/extension_view.php?eid=838
However they are some [area] html elements that are conflicting with the loupe, so you only see the loupe on the center of the image. Maybe Piwigo team has an idea how to fix this.
Offline
Hi eliz82,
Thanks for your reply and for the development of the plugin.
I also worked on integrating the redoPop Loupe in Piwigo yesterday and i'm quite satisfied of the result.
But your solution is smarter than mine cause it's a plugin and not a hard coded modification of the originals templates.
For the [aera] html elements present in the default theme this is this code (line 9 to 20 of picture_content.tpl) that creates the html areas on the picture displayed:
{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}
To solve I puted it in comments.
But a smarter solution will be to replace this code with nothing by changing your main.inc.php file adding a function like this :
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); }
And then add a pre filter in Load_Loupe function like this :
$template->set_prefilter('picture', 'del_map_elementsT');
It could be the version 1.1 of your plugin?
To go further, i don't really like the way the version 2.0.0 of Loupe works.
It don't really magnify the picture but it zooms on the same instance of the picture. So you don't have more detail but bigger pixels...
That's why i'm trying to implement Loupe but like the "Demo-1" here http://redopop.com/loupe/ that is to stay by adding the URL of the bigger derivative in the link.
The problem i'm trying to solve at this time (but with no success at this moment) is to obtain the URL of the larger derivative of the picture displayed. Example : If it's "M" displayed then obtain the URL of the "L" derivative, if it's "L" displayed then obtain the "XL" derivative's URL.
If someone could help me to solve this it could be great.
And then it could be implemented in eliz82's plugin in the main.inc.php file replacing this :
'.$element_info['element_url'].
by the URL of the larger derivative of the picture.
Thanks for help
Last edited by MacGeol (2016-09-14 12:50:34)
Offline
Ooopps...
Seems that there's a problem.
Now the area html elements are well deleted... but... the function "add_loupe_picture_content" seems to don't want to work anymore...
But i don't know why...
Is there a problem between my pre_filter and the str_replace?
Last edited by MacGeol (2016-09-14 12:58:52)
Offline
Another suggestion:
I don't really like the appearance of the Loupe.
So this is an alternative CSS :
.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; }
Demo here : http://www.structurotheque.u-psud.fr/pi … tegory/225
Offline
MacGeol wrote:
To go further, i don't really like the way the version 2.0.0 of Loupe works.
It don't really magnify the picture but it zooms on the same instance of the picture. So you don't have more detail but bigger pixels...
Loupe 2.x is working like 1.x except is not using an external JS library.
first it tries to use <a href> as source . if "A href" is not present then it tries to use <img src> as source.
[Github] loupe file loupe.js@L192-L199
And my plugin is using <a href> method as you can see in the main.php. href is linked to the fullsize derivative of the picture.
Last edited by eliz82 (2016-09-14 17:27:13)
Offline
And my plugin is using <a href> method as you can see in the main.php. href is linked to the fullsize derivative of the picture.
Oh that's exact!
Sorry i tested the plugin on a picture which original was not so big... so there were no difference.
So that's great! This was the big thing i didn't know how to implement.
Thanks a lot.
Then what do you think about the way to remove area html?
If you want here is the modified version of your main.inc.php (bottom)
As i said in precedent post :
Seems that there's a problem.
Now the area html elements are well deleted... but... the function "add_loupe_picture_content" seems to don't want to work anymore...
But i don't know why...
Is there a problem between my pre_filter and the str_replace?
I think there's a priority problem between the two event handlers...
I can't go further on today.
Hope you will find the solution...
...and tell us!
<?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); } ?>
Last edited by MacGeol (2016-09-14 18:11:55)
Offline
Well i'm not to good with Piwigo plugins but that map element can be removed very easy with javascript. Try version 1.0.1.
I see there is a bug in IE11, if you move the cursor from under the image the loupe remain behind of the mouse cursor. With Firefox is ok. Maybe that is a bug in the loupe.js itself.
Offline