If you install this plugin you can go to the prev/next image by clicking on the appropriate area of next to the image. If a full-sized picture exists, you can access it by clicking in the middle of the picture. The mouse cursor will change its icon so you can easily see what will happen when you click.
It's probably a great plugin if you have visitors with MIDs or smart phones, because your gallery now has much bigger areas where the visitor can touch/click.
Note: if you're also using the Panorama Viewer plugin, move this plugin below the Panorama Viewer plugin in the plugin manager. Otherwise it won't work on 360° panoramas.
Note: if the panorama viewer plugin is installed, the buttons use a fixed width of 50px. Otherwise they'll use as much space as possible.
Thanks for the effort, I love the concept. It is a more pleasant experience to move from one image to the next or previous. Unfortunately, I wish it was limited to the screen area where the picture is. As it is, on my Rainy Day theme, all other clickable options are disabled, like "Return To Start", "Skip To End", "Add To Favorites", "SlideShow", etc.
Quote from: hanzon2010 on December 15, 2010, 03:16:44 PM
Unfortunately, I wish it was limited to the screen area where the picture is.
I thought it is? Maybe it just works as expected because I developed that plugin while I have installed many others. Can you please post a link to your gallery where I can see what happens? Thanks.
I just re-enabled the plugin, you can check it out at my gallery below. I do not use intermediate images, but direct to full-size. I use Chrome.
On the 1st page, the whole rightmost side of the screen is affected. On the Next page and so on, it takes over both left and right sides ...
http://www.soundscapehifi.com/client-systems/displayimage.php?album=14&pid=217#top_display_media
Thanks
I have disabled the plugin again as it is on a live gallery, just let me know if you need it re-enabled again, thanks.
Confirmed. Works as expected when the annotate plugin is installed. I'll fix that and release a new version asap.
Please try again version 1.2 (attached to initial post).
Perfect ! Thanks a lot, lovely plugin ...
Thanks, looks great on FF. But on IE I get the four arrows for cursor
Seems that IE doesn't allow png files as cursor (you can test that here (http://www.css4you.de/example/cursor.html)). I haven't included own graphics, but use the default arrows from Coppermine's images directory. That's why I just used some system default cursors as fallback. This could of course be fixed, but I just recognized that you cannot click on the div elements in IE, but just on the small arrows (which is not intended). Maybe I'll release a new version in the next time.
It's looking good in Firefox :) But not in IE :(
Quote from: Αndré on January 04, 2011, 12:26:21 PM
you cannot click on the div elements in IE, but just on the small arrows (which is not intended).
I had no luck to fix that issue. Maybe someone can help me to fix it for IE?
The code is quite simple:
$buttons = '';
if ($prev_tgt != 'javascript:;') {
$buttons .= '<div onclick="window.location.href=\''.$prev_tgt.'\';" onmouseover="$(\'#pn_prev\').attr(\'src\',\'images/navbar/prev.png\');" onmouseout="$(\'#pn_prev\').attr(\'src\',\'images/navbar/prev_inactive.png\');" style="position: absolute; top: 0px; left: 0px; width: '.$width_button.'px; height: '.$CURRENT_PIC_DATA['pheight'].'px; text-align: left; cursor: url(images/navbar/prev.png), w-resize;"><div style="padding: '.($height/2-8).'px 10px;"><img id="pn_prev" src="images/navbar/prev_inactive.png" /></div></div>';
}
if ($fullsize_available_allowed) {
$pic_html = str_replace('onclick="MM_openBrWindow', 'style = "cursor: url(images/icons/search.png), move;" onclick="MM_openBrWindow', $pic_html);
}
if ($next_tgt != 'javascript:;') {
$buttons .= '<div onclick="window.location.href=\''.$next_tgt.'\';" onmouseover="$(\'#pn_next\').attr(\'src\',\'images/navbar/next.png\');" onmouseout="$(\'#pn_next\').attr(\'src\',\'images/navbar/next_inactive.png\');" style="position: absolute; top: 0px; right: 0px; width: '.$width_button.'px; height: '.$CURRENT_PIC_DATA['pheight'].'px; text-align: right; cursor: url(images/navbar/next.png), e-resize;"><div style="padding: '.($height/2-8).'px 10px;"><img id="pn_next" src="images/navbar/next_inactive.png" /></div></div>';
}which mainly adds
<div onclick="..."> <!-- big div which is as height as the picture and about 1/3 or 1/4 as width as the picture - you can click on the whole div to load the next/prev image -->
<div> <!-- a small div to set the position of the embedded image -->
<img /> <!-- the little arrow image -->
</div>
</div>
Version 1.3 (attached to initial post) improves the compatibility with the Panorama Viewer plugin and also fixes some minor issues.
The "arrow" displayes to early in Firefox 4.
The mouse-arrow don't work in IE
http://www.nordmoregatebilklubb.com/bilder/displayimage.php?album=190&pid=6644#top_display_media
Quote from: Mikaelft on May 21, 2011, 12:35:19 PM
The "arrow" displayes to early in Firefox 4.
Please elaborate. It displays exactly as expected imo.
Quote from: Mikaelft on May 21, 2011, 12:35:19 PM
The mouse-arrow don't work in IE
Quote from: Αndré on January 19, 2011, 03:12:18 PM
I had no luck to fix that issue. Maybe someone can help me to fix it for IE?
Look at the picture
Works exactly as expected.
Dear Andre!
Question re to this plugin.
I have found that arrows left and right are working not only in the image area but also below in the file information section at the same level as they are working in the image. You can see this here e.g. http://www.lightphotos.net/photos/displayimage.php?album=8&pid=42 just move the mouse left-right in the file descripton part below the image.
Is this bug or feature?
may be this link better to reproduce the problem http://www.lightphotos.net/photos/displayimage.php?album=32&pid=131 cause previous one was first photo in album
That's a bug. The div area uses the height of the full-sized picture instead of the height of the intermediate-sized version. I also recognized some issues when using this plugin and the panorama viewer plugin when you look at 360° panoramas. So I'll try to fix both issues and release a new version asap.
Version 1.4 attached to initial post.
Confirmed, Andre, in ver.1.4 everything is ok, many thanks for prompt help!
I dont know if i´m right here but i have a feature suggestion for this plugin.
Maybe you can add the function to go next picture instead of closing the window?
This should only be added to the full-screen photo size (the biggest one)..........
That won't work if the next file is no picture, as there's nothing to display in that case. If you want a full-size navigation you should try the LightBox plugin or the EnlargeIt! plugin.
I've re-written the plugin completely in JavaScript (version 2.0 is attached to the initial post). The prev/next buttons are now displayed next to the picture and also for non-picture files. If the panorama viewer plugin is installed, the buttons use a fixed width of 50px. Otherwise they'll use as much space as possible.
Dear all,
after installing version 2.0 of this plugin, I experience problems with the slideshow function. The slideshow works as expected with the old version, as well as with the plugin deactivated. Does anyone experience similar problems?
Gallery: www.fotowald.de
CPG 1.5.22
Thanks for any help.
Cheers,
André
Version 2.1 (attached to initial post) fixes the slideshow issue. Thanks for the report.
Quote from: Αndré on February 25, 2013, 09:51:05 AM
Version 2.1 (attached to initial post) fixes the slideshow issue. Thanks for the report.
Thanks a lot. Works as expected now.
Thanks for the v2.1 update :)
how can I use my own images for this plugin?
what should I edit in the plugin files?
Open picture_navigation.js and replace the content of the variables
icon_prev = $('.navmenu_pic img[src*=prev]').parent().html().match(/src="(.*?)"/);
icon_prev = icon_prev[1];
icon_prev_inactive = icon_prev.replace('prev', 'prev_inactive');
and
icon_next = $('.navmenu_pic img[src*=next]').parent().html().match(/src="(.*?)"/);
icon_next = icon_next[1];
icon_next_inactive = icon_next.replace('next', 'next_inactive');
with valid paths of your images.
OK.Thanks
I just don't know with what to replace $('.navmenu_pic img[src*=start]').parent().html().match(/src="(.*?)"/);
You need to hardcode it like this:
icon_prev = 'themes/xxx/foo/bar1.png';
icon_prev_inactive = 'themes/xxx/foo/bar2.png';
icon_next = 'themes/xxx/foo/bar3.png';
icon_next_inactive = 'themes/xxx/foo/bar4.png';
I see the word foo all over the internet in web tutorials.
What does that mean anyway?
That's really an off-topic question. Answer here: http://en.wikipedia.org/wiki/Foobar
Quote from: mitko on July 24, 2015, 02:53:37 PM
Is it possible to disable in the theme particular plugin and keep it working in another theme?
That may be possible, but it's way easier to add a check in the picture navigation plugin. Open
plugins/picture_navigation/codebase.php, find
$superCage = Inspekt::makeSuperCage();and above, add
global $CONFIG;
if ($CONFIG['theme'] == 'mobile_light') {
return;
}PS: this question would have been better placed in the picture navigation announcement thread ;)
Andre, there is a problem, if i add what you suggest - the picture also dissappears :)
That doesn't make sense. Please provide a list which plugins you have installed.
Tried different plug-in orders - no difference. You can check now accessing from mobile, i still keep the changes.
List of plugins:
autorotate
bbcode_control
CopperRank
description_metas
dupechecker
easy_rss
email_comments
fav_button
file_replacer
filename2tooltip
geodata
hot_pictures
html5slideshow
html5upload
imsharpen
keyboard_navigation
keywords_add
onlinestats
pic_download_link
picture_navigation
recaptcha
sitemap_generator
social_sharing
socialshare
theme_switch
Another approach. Please open plugins/picture_navigation/codebase.php, find
if (!$superCage->get->keyExists('slideshow')) {
and replace with
global $CONFIG;
if (!$superCage->get->keyExists('slideshow') && $CONFIG['theme'] != 'mobile_light') {
Seems i found the problem, i didn't use the latest version of the plugin. Really sorry, shame on me :-[
Now everything is working fine and i also can switch it off if necessary for this theme. Thank you Andre as usial for your kind support!
Problem with the plugin on the standard theme. See the pictures
Do you get the issue with the unmodified plugin or with one of my last 2 modifications?
Unmodified.
Works as expected in my gallery, but I haven't installed that amount of plugins like you. Please temporary uninstall your plugins one by one and check when it starts to work as expected to find the culprit.
Andre, disabled all plugins except this - same story. Could this be a reason that i slightly changed the single-image page (moved custom field and title above the image) plus some other minor things.
Please test with an unmodified theme, like curve or water_drop.
This code adds the buttons next to the image:
$('td.display_media').html($('td.display_media').html().replace('<tr>', '<tr>' + btn_prev).replace('</tr>', btn_next + '</tr>'));
Not sure how it should delete anything, as it just adds code. If you have a look at the HTML code of your intermediate-sized view (the browsers' built-in code viewer always display the actual HTML code, without any JavaScript processing), the picture should be there, as the whole picture navigation plugin is written in JavaScript.
I have a feeling that then the page loads the picture appears for the half-second and then disappears and instead i have double tittle and custom field. Strange behavior.
You have two td items with class "display_media". I assume this is the culprit. Try to remove that class from
<td class="display_media" style="word-wrap: break-word"><h1 class="pic_title">
Adriatic Sea / Golfo di Trieste / Monfalcone / Entrance Channel Lights on the naval chart provided by the Marina Militare Italiano - servizio Fari<br />Chart
</h1></td>
Removed. Picture is showing now, but plugin doesn't work (it is activated - you can have a look)
You removed the class from the wrong element ;)
Ahhh, silly me :) Thanks Andre, all is okay now!