Announcement

  •  » Requests
  •  » Integrated JQuery magnifier for Piwigo

#1 2016-08-31 17:29:58

MacGeol
Member
2016-08-23
22

Integrated JQuery magnifier for Piwigo

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

 

#2 2016-08-31 19:54:00

ddtddt
Piwigo Team
Quetigny - France
2007-07-27
6753

Re: Integrated JQuery magnifier for Piwigo


You love Piwigo so don't hesitate to participate, learn more on the "Contribute to Piwigo" page. If you don't have much time for contribution, you can also help the project with a donation.

Offline

 

#3 2016-08-31 22:49:47

MacGeol
Member
2016-08-23
22

Re: Integrated JQuery magnifier for Piwigo

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

 

#4 2016-09-05 17:10:55

flop25
Piwigo Team
2006-07-06
6918

Re: Integrated JQuery magnifier for Piwigo

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... :)


To get a better help : Politeness like Hello-A link-Your past actions precisely described
Check my extensions : more than 30 available
who I am and what I do : http://fr.gravatar.com/flop25
My gallery : an illustration of how to integrate Piwigo in your website

Offline

 

#5 2016-09-06 09:54:07

ddtddt
Piwigo Team
Quetigny - France
2007-07-27
6753

Re: Integrated JQuery magnifier for Piwigo

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 ?


You love Piwigo so don't hesitate to participate, learn more on the "Contribute to Piwigo" page. If you don't have much time for contribution, you can also help the project with a donation.

Offline

 

#6 2016-09-06 09:59:13

flop25
Piwigo Team
2006-07-06
6918

Re: Integrated JQuery magnifier for Piwigo

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


To get a better help : Politeness like Hello-A link-Your past actions precisely described
Check my extensions : more than 30 available
who I am and what I do : http://fr.gravatar.com/flop25
My gallery : an illustration of how to integrate Piwigo in your website

Offline

 

#7 2016-09-06 10:06:05

flop25
Piwigo Team
2006-07-06
6918

Re: Integrated JQuery magnifier for Piwigo

great he has been now overcomplicated with js hype stuff https://github.com/redoPop/loupe forks are probably worth a look


To get a better help : Politeness like Hello-A link-Your past actions precisely described
Check my extensions : more than 30 available
who I am and what I do : http://fr.gravatar.com/flop25
My gallery : an illustration of how to integrate Piwigo in your website

Offline

 

#8 2016-09-13 16:59:57

MacGeol
Member
2016-08-23
22

Re: Integrated JQuery magnifier for Piwigo

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

 

#9 2016-09-13 21:09:46

eliz82
Member
Romania
2016-04-27
247

Re: Integrated JQuery magnifier for Piwigo

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

 

#10 2016-09-14 12:44:09

MacGeol
Member
2016-08-23
22

Re: Integrated JQuery magnifier for Piwigo

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:

Code:

{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 :

Code:

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 :

Code:

$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 :

Code:

'.$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

 

#11 2016-09-14 12:58:27

MacGeol
Member
2016-08-23
22

Re: Integrated JQuery magnifier for Piwigo

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

 

#12 2016-09-14 13:10:49

MacGeol
Member
2016-08-23
22

Re: Integrated JQuery magnifier for Piwigo

Another suggestion:

I don't really like the appearance of the Loupe.
So this is an alternative CSS :

Code:

.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

 

#13 2016-09-14 17:23:18

eliz82
Member
Romania
2016-04-27
247

Re: Integrated JQuery magnifier for Piwigo

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

 

#14 2016-09-14 18:10:48

MacGeol
Member
2016-08-23
22

Re: Integrated JQuery magnifier for Piwigo

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!

Code:

<?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

 

#15 2016-09-14 22:27:01

eliz82
Member
Romania
2016-04-27
247

Re: Integrated JQuery magnifier for Piwigo

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

 
  •  » Requests
  •  » Integrated JQuery magnifier for Piwigo

Board footer

Powered by FluxBB

github twitter facebook google+ newsletter Donate Piwigo.org © 2002-2019 · Contact