Picture navigation plugin for cpg1.5.x

[Αndré]

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.

[hanzon2010]

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. 

[Αndré]

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.

[hanzon2010]

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

[hanzon2010]

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.

[Αndré]

Confirmed. Works as expected when the annotate plugin is installed. I'll fix that and release a new version asap.

[Αndré]

Please try again version 1.2 (attached to initial post).

[hanzon2010]

Perfect !  Thanks a lot, lovely plugin ...

[nickelas]

Thanks, looks great on FF. But on IE I get the four arrows for cursor

[Αndré]

Seems that IE doesn't allow png files as cursor (you can test that here). 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.

[bigdrago]

It's looking good in Firefox   But not in IE

[Αndré]

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:

Code Select Expand

    $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

Code Select Expand

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

[Αndré]

Version 1.3 (attached to initial post) improves the compatibility with the Panorama Viewer plugin and also fixes some minor issues.

[Mikaelft]

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

[Αndré]

The "arrow" displayes to early in Firefox 4.

Please elaborate. It displays exactly as expected imo.

The mouse-arrow don't work in IE

I had no luck to fix that issue. Maybe someone can help me to fix it for IE?

[Mikaelft]

Look at the picture

[Αndré]

Works exactly as expected.

[mitko]

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?

[mitko]

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

[Αndré]

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.