Announcement

  •  » Requests
  •  » Integrated JQuery magnifier for Piwigo

#16 2016-09-15 16:16:14

MacGeol
Member
2016-08-23
22

Re: Integrated JQuery magnifier for Piwigo

Hi eliz82,

I've tried the new version of your Loupe plugin.

In my case the map element is not removed by the

Code:

document.getElementById("theImage").removeChild(document.getElementsByTagName("map")[0]);

I don't know why... cause the

Code:

document.getElementById("theMainImage").title = "Use mouse scroll to zoom in/out"

works well.

Why you don't try with my proposal?

The removing of the map elements works well and in addition to that it removes the "usemap="#mapmedium""  and permit to add translation support of title by adding "title={'Use mouse scroll to zoom in/out'|@translate}" in the <img> tag. And in my vision it's cleaner to modify the template with a preg_replace than removing child with js.
The only thing is not working (but it's very important) is that the str_replace to add <a> tag don't work (so no loupe)...
But i'm sure this is just a little thing to deal with.
I'm sure that if a piwigo team member see this he would correct it in a second.

About translation support if "title={'Use mouse scroll to zoom in/out'|@translate}" is added in the <img> tag then  add this to the main.inc.php :

Code:

if (!defined('PHPWG_ROOT_PATH')) die('Hacking attempt!');

define('LOUPE_DIR' , basename(dirname(__FILE__)));
define('LOUPE_PATH' , PHPWG_PLUGINS_PATH . LOUPE_DIR . '/');

add_event_handler('loading_lang', 'loupe_loading_lang');    

function loupe_loading_lang(){
  load_language('plugin.lang', LOUPE_PATH);
}

And add plugin.lang.php files in - for example - a "fr_FR" folder like this :

Code:

<?php
$lang['Use mouse scroll to zoom in/out'] = 'Utlisez la roulette de la souris pour zoomer/dézoomer';
?>

If you want i could transmit you all my modified files... but i can't here in the forum.

THANKS to Piwigo team member (or other) to help with the problem of event handlers priority between "loc_begin_picture" and "render_element_content".

Offline

 

#17 2016-09-15 17:18:43

eliz82
Member
Romania
2016-04-27
280

Re: Integrated JQuery magnifier for Piwigo

MacGeol wrote:

In my case the map element is not removed by the

Code:

document.getElementById("theImage").removeChild(document.getElementsByTagName("map")[0]);

that is strange, if you have a piwigo link with my plugin 1.0.1 installed i can investigate why is not working.

MacGeol wrote:

If you want i could transmit you all my modified files... but i can't here in the forum

if you have a cloud account make a zip and put the link here.

Offline

 

#18 2016-09-15 17:28:23

MacGeol
Member
2016-08-23
22

Re: Integrated JQuery magnifier for Piwigo

Yeah!

Now i have a full working version of your Loupe plugin but without event_handler on "render_element_content" but just a pre filter on event "loc_begin_picture", and with translation support see example here : http://www.structurotheque.u-psud.fr/pi … ategory/95 and code of "Main_inc.php" below :

Code:

<?php
/*
Plugin Name: Loupe
Version: 1.0.1
Description: Display a magnifying loupe over pictures
Plugin URI: http://piwigo.org/ext/extension_view.php?eid=838
Author: eliz82 modified by MacGeol
Author URI: http://piwigo.org
*/
if (!defined('PHPWG_ROOT_PATH')) die('Hacking attempt!');

define('LOUPE_DIR' , basename(dirname(__FILE__)));
define('LOUPE_PATH' , PHPWG_PLUGINS_PATH . LOUPE_DIR . '/');

add_event_handler('loading_lang', 'loupe_loading_lang');    

function loupe_loading_lang(){
  load_language('plugin.lang', LOUPE_PATH);
}

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', 'add_loupe_picture_contentT');
  $template->append('head_elements', '
<!-- START Loupe plugin -->
<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>
<!-- END Loupe plugin -->
  ');
}


function add_loupe_picture_contentT ($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}

<a id="loupe_image" href="{$U_ORIGINAL}"><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="{\'Use mouse scroll to zoom in/out\'|@translate}"></a>
';

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

Here is a link to download the all plugin : https://we.tl/17yP9NADbe

Last edited by MacGeol (2016-09-15 17:39:37)

Offline

 

#19 2016-09-15 21:50:12

MacGeol
Member
2016-08-23
22

Re: Integrated JQuery magnifier for Piwigo

Good evening,

After many tests, it seems that my version of the plugin get in conflict with the plugin Back2Front.
In fact, the Back2Front plugin workflow consist in replacing the picture_content.tpl ont the event "render_element_content".
So your solution on event "render_element_content" is better than mine based on "loc_begin_picture".
I will work on another version tomorrow to merge my solution (str_replace to remove map and add translation support on title) with your solution (on event "render_element_content").

I'll keep you informed.

Offline

 

#20 2016-09-15 23:16:15

eliz82
Member
Romania
2016-04-27
280

Re: Integrated JQuery magnifier for Piwigo

I understand why javascript is not working on your site. you have a ton of map elements and my javascript only remove first [map] element found in that [div].
You are probably use some plugin that modify the code, maybe autosize ?

Offline

 

#21 2016-09-17 08:03:22

eliz82
Member
Romania
2016-04-27
280

Re: Integrated JQuery magnifier for Piwigo

have u tried the 1.0.2 ? i made a loop to remove all the map elements and implemented language suport

Last edited by eliz82 (2016-09-17 21:34:35)

Offline

 

#22 2016-09-20 18:37:25

MacGeol
Member
2016-08-23
22

Re: Integrated JQuery magnifier for Piwigo

Hi eliz82,

I was working on other projects the last days.
So today i saw your post and installed the 1.0.2.
It seems to work better but there is still 2 lines of map elements for the Xsmall and the medium. Or, the medium size is the default size.
As you say i have "ton of element map", i don't think it's a plugin who add them cause these map elements are just for the different sizes of the picture diplayed.
I think the best way to remove them whatever plugin or template used is the way i purpose you by modifying the template on "loc_begin_picture" event by a pre filter.
This way the plugin have chance to work with every template and plugins.

Other thing i saw: you add the language support as i told you. Great
But on the plugin page you tell there is just 1 language available while there are two : English and French.

I can't work on the code a this time, but we would have to fix the problems with the map elements definitely.
Really a shame that no piwigo team embers saw my question about the event handlers, cause the version i gave you using pre filter was really efficient, minus the fact it enable the back2front plugin.

See you

Offline

 

#23 2016-09-20 22:00:14

eliz82
Member
Romania
2016-04-27
280

Re: Integrated JQuery magnifier for Piwigo

MacGeol wrote:

i don't think it's a plugin who add them cause these map elements are just for the different sizes of the picture diplayed.

ah you are right. it was some options in the Piwigo, i had activated only medium image size.

i was able to understand what is causing the bug. of course you cannot loop  an array in ascending mode and remove elements from that array, on the next iteration position will not be correct anymore and you end up executing only half of the array.
you must loop the array in reverse mode if you try to remove elements.

released version 1.0.3

MacGeol wrote:

But on the plugin page you tell there is just 1 language available while there are two : English and French.

Seems is something strange in the Piwigo site settings, you must chose english uk two times for the language to appear.

Offline

 

#24 2016-09-21 07:54:13

MacGeol
Member
2016-08-23
22

Re: Integrated JQuery magnifier for Piwigo

Hi eliz82,

Thanks for your reply and for the release of the 1.0.3.
This time it seems it works! Well done!

Offline

 

#25 2017-01-18 12:52:11

daareek
Member
2017-01-12
20

Re: Integrated JQuery magnifier for Piwigo

Hi,

very nice plugin but it seems I have found a bug in Loupe v. 1.0.3 everything works fine as long as I do not disable "high definition" then I'm getting:

PHP Notice:  Undefined index: element_url in /photoalbum/plugins/Loupe/main.inc.php on line 53 [18-Jan-2017 12:31:55 Europe/Warsaw]
PHP Warning:  Cannot modify header information - headers already sent by (output started at /photoalbum/plugins/Loupe/main.inc.php:53) in /photoalbum/include/page_header.php on line 101

on pages displaying single photos. However despite notices everything still works.

As I deactivate Loupe plugin everything is OK. :-(

Last edited by daareek (2017-01-18 12:53:14)

Offline

 

#26 2017-01-20 09:55:22

eliz82
Member
Romania
2016-04-27
280

Re: Integrated JQuery magnifier for Piwigo

Yeah, i did not test it with that option enabled.

I have released 1.0.4, changes
1) Fix bug when High resolution image (original) disabled in Piwigo
2) Fix some positioning bug to loupe library when page is scrolled (required modification to loupe library)
3) Encoded the link to original image (required modification to loupe library)
4) Added config option for loupe plugin to preload the image

Last edited by eliz82 (2017-01-30 20:43:34)

Offline

 

#27 2017-01-20 11:21:03

daareek
Member
2017-01-12
20

Re: Integrated JQuery magnifier for Piwigo

Hi,

great, now it works! Where I can find that preload option?

Just noticed that when I protect /upload directory with .htaccess "deny from all" loupe works but is not able to zoom the image, is there any workaround for this?

Last edited by daareek (2017-01-20 11:24:11)

Offline

 

#28 2017-01-20 11:49:09

eliz82
Member
Romania
2016-04-27
280

Re: Integrated JQuery magnifier for Piwigo

see description http://piwigo.org/ext/extension_view.php?eid=838 , but i don't recommend it unless you have a powerful webserver.

well the original image is served to javascrpt as a link directly to the original image, so i'm not sure this is possible.
but i have 2 ideas:
1) pass original image link using i.php (instead link directly to jpg)
2) use xxl image version for loupe instead original image, but this is declared as private in $element_info  . no idea how to get the xxl image link into my plugin, i don't have to much experience neither with piwigo or working with php classes. only if some piwigo team member helps here.

Last edited by eliz82 (2017-01-20 11:52:08)

Offline

 

#29 2017-04-14 19:32:00

buchanan
Member
2017-04-14
1

Re: Integrated JQuery magnifier for Piwigo

Hi eliz82,

I just installed your plugin and really enjoy it.
However there seems to be a little bug related to some pictures orientation.
Here is an example : https://carte-fh.lafibre.info/galerie_p … egory/1189
On the standard view the picture appears with the right orientation however in the magnified view it is rotated 90°. Is there a way to correct this ?

Offline

 

#30 2017-05-09 20:37:05

eliz82
Member
Romania
2016-04-27
280

Re: Integrated JQuery magnifier for Piwigo

there is a "rotated 90" in the exif of that picture. i think that cause problems.
maybe the photo is not native portrait, but is a landscape rotated by the web browser based on exif ... or something like that. javascript can't see that exif specification.

Offline

 
  •  » Requests
  •  » Integrated JQuery magnifier for Piwigo

Board footer

Powered by FluxBB

github twitter newsletter Donate Piwigo.org © 2002-2022 · Contact