WP-PhotoNav

This is the homepage of the WP-PhotoNav plugin for WordPress. It is mainly thought as a more interactive platform than the plugin page at the WordPress plugin directory.

Project

I do not plan to significantly increase the functionality of the plugin. Of course I will provide necessary maintenance either in accordance to changes in WordPress itself or due to bugs in the produced output.

If you are interested in the technical details, want to report issues or even contribute, please use the public project on GitHub.

Download

Please download this plugin from the WordPress plugin directory.

Usage

You can use WP-PhotoNav either via WordPress shortcodes or via the media button on top of the editor, which will show a dialogue similar to the ones you know from inserting common images. The dialog does nothing more than automatically generating the shortcode for you. The following examples have the shortcode used to generate them below the image.

Basic

This is the easiest way to include a panorama in your post. You only have to specify the URL of the image.

[photonav url='/wp-uploads/2009/07/panoramaLeMole.jpg']

Advanced

For more sophistication, WP-PhotoNav accepts a number of parameters, most of which are demonstrated in the following example:

[photonav url='/wp-uploads/2009/07/panorama02_resized.jpg' container_height=300 mode=drag360 popup=colorbox animate=left position=right label=1]

The following parameters are used:

  • container_height – Defines the height of the displayed frame (hence the container). If the image is higher than the given height, vertical scrolling (or dragging) is enabled. The unit is one pixel. There is also the parameter container_width in case you don’t want the frame to fill the horizontal space available in the post or page.
  • mode – Specifies one of the following modes: move, drag or drag360 where move is the default mode and doesn’t have to be specified. The drag mode allows the user to navigate the panorama by dragging it inside the frame. The drag360 mode is similar, but generates the illusion of an vertically infinite image. This is useful for 360° panoramas where the user can turn around in each direction infinitely.
  • popup – If specified, enables a popup for enlarged view. The only valid popup type at the moment is colorbox, which only works if the ColorBox plugin for jQuery is available. It is provided e.g. by the jQuery Colorbox plugin. You have to install this plugin separately to make use of the popup functionality.
  • animate – If specified, enables one of the following animation modes: left, right or zoom. By using this option, the panorama can be rotated automatically starting from the position into the named direction until either the user interacts with it (by scrolling in move mode or dragging in one of the drag modes) or the image is scrolled through entierely once. For 360° panoramas using the drag360 mode, the animation continues until the first interaction. In zoom mode, the panorama image is scaled to fit the available space and expands it to its full size when the mouse is moved over the image. The animation allows to attract the users attention to the additional functionality of the panorama compared to a simple, still image. Please note that the animation (like everything else) is accomplished using JavaScript and might not be 100% fluid on all systems and browsers.
  • position – Defines the initial horizontal postion. The parameter may be a pixel value for horizontal displacement or take any one of the following relative values, for which the corresponding pixel value is automatically calculated: center, left or right.
  • label – If this option is enabled, an overlay will be displayed in the top right corner of the image to inform the user of the additional capabilities.

Translations

Plugin en el español por Andrew de WebHostingHub.

132 Antworten auf „WP-PhotoNav“

  1. Hi, thx for creating this plugin, it’s really good.
    Here r few ideas on improving usability and displaying of the image:
    – remove image moving on mouse over;
    – allow user to move image by holding LMB;
    – probably allow user to zoom in/zoom out image, but it’s not so important as previous two points imo.

    Cheers
    Max

    1. Hi, thanks for the input!
      I will see what I can do about your first two suggestions (which belong together anyway). The zooming is something else. I would suspect this to be challenging, therefore it has to wait until I feel like/have the time for a challenge 😉
      Cheers, Fabian

  2. Hello,

    this is such a great plugin thank you for creating it and allowing it for free download.

    How about adding a 360 degree rotation feature along with click and drag feature.

    Also on one of your post you put „I would suspect this to be challenging, therefore it has to wait until I feel like/have the time for a challenge ;)“. I would seriously be willing to help in any way that I can just let me know.
    On a side note:
    I am trying to figure a way of having this type of effect applied to a 3d type environment within a wordpress site for online tours of businesses or facilitys. If you would have any suggestions they would be gladly accepted.
    Thank You

    1. Hi, the 360 degree rotation is definitely a good idea together with drag interface.
      With my remark you quoted, I wanted to express, that I have no experience with the image zooming capabilities of jQuery. However I did not look into that before either. So it is something I have to find out before I want to make promises. In any case, thanks for your offer. If I need help, I will contact you.
      For your 3D application, you would need an additional up-down option, I suspect. That may be a reasonable extension for this plugin as well. However more interaction with the image certainly is not, at least at this point.
      Cheers, Fabian

  3. The just released version 0.3 implements the following features as requested:
    – Optional drag’n’drop movement instead of the mouse-over movement
    – Vertical scrolling, if the container height is smaller than photo height, for both mouse-over and drag movement

    360° rotation is planned for the next release. Have fun!

  4. Hi Great great great…plugin ….does the plugin in use java or flash …or none of the above …..and will it be possible to build in a auto rotate……

    1. The plugin uses neither Java nor Flash, only JavaScript (via the jQuery library).
      I didn’t think about autorotate so far, but it’s another good idea. However, I plan to implement a 360° rotation option first.

  5. Ich habe das Plugin ausprobiert, doch das erste Beispiel und das move Beispiel gehen bei mir nicht, d.h.das Bild wird einfach abgeschnitten… http://www.janasworld.de/fotografie/nischwitz/

    Gibt es dabei irgendetwas zu beachten, eine Mindestgröße? Meine Beispiele sind 5000px breit, doch abe rauch mit 1500px hat es nicht funktioniert… ode rhast du eine Idee woran es liegen könnte?

    Die Beispiele wo man per klick schiebt sind alle ok…

  6. I do not understand how to use the button that is integrated into tinymce. I click on it then I can chose from url, from gallery or from media library.

    How can I insert a picture from the gallery?

    I tick the image then what? if I click on insert, it simply inserts a thumb? can I have a screen shot please? I really do not understand..

    1. Sorry for the confusion. The dialog that pops up when you click the tinymce button should help to generate the shortcode. Unfortunately you have to use the „from URL“ tab, because the media library is not yet supported. I have not removed the media library tab intentionally because now you can look up the URL of your picture there.

      If you want to insert a picture from the gallery, just copy the URL from the media library tab to the field on the URL tab and fill in the other required fields. Unfortunately I couldn’t use the media library dialog directly. I would have to duplicate and modify it, which will be much more work than the way it is now. If I find the time and enough people seem to be using the plugin, I will see what I can do though.

    1. Thanks for the report. This plugin relies on the jQuery version coming with WordPress. I will check, which jQuery version the Use Google Libraries plugin loads and why this leads to problems.

    2. it seems to be incompatible with this plugin: http://jasonpenney.net/wordpress-plugins/use-google-libraries/

      I have tried to reproduce the incompatibility. On my (clean) developement environement, I can use Use Google Libraries and WP-PhotoNav together without a problem and WP-PhotoNav has no problem with using the JavaScript libraries loaded form Google.
      However, on this webserver (not clean), I have also installed UGL by now and it obviously „steps out of the way“ as the author uses to say. If I disable WP-PhotoNav here, this doesn’t change anything (UGS still not active), so I conclude that WP-PhotoNav is not the problem. I will try to reproduce the setup of this webserver on my local machine to find out which other plugin causes the behaviour in my case. Then, I hope, I will be able to prove on this webserver, that UGS and WP-PhotoNav do run side-by-side without issues.

    1. I just read this on the Shutter Reloaded FAQ:

      Since Shutter Reloaded does not use any js libraries, it does not interfere with them.

      Now I’m surprised, because my plugin relies only and exclusively on JavaScript (respectively the jQuery library). I’ll see if I can find the reason for the incompatibility.

      Thanks again for trying WP-PhotoNav and for your report!

    1. It turned out, that it is the kPicasa Gallery plugin, that is not compatible with Use Google Libraries. I posted a patch on the blog of the kPicasa Gallery developer and maybe this will be fixed soon.

  7. Pingback: | BEERHEAD
  8. Hello, Fabian!

    I like your plug-in very much.
    I want to propose some ideas. It would be great to have a gallery of several panoramas with automatic created customisable previews. So people could be insert this gallery to his pages or posts. By clicking on preview, each panoramas open in pop-up window or whatever else. As example I want to show one great plug-in for normal photographs http://alexrabe.de/wordpress-plugins/nextgen-gallery/
    I would be glad to see your answer or result of your works!))

    1. Hello Dmitri!

      Thank you for your feedback. It is certainly an interesting feature that you propose. There is still the 360 degree rotation that I want to implement first (once I finally find the time), but after that, your suggestion will be remembered.
      I know of a lot of existing solutions for what you describe, but I fear there is no general way to provide WP-PhotoNav independently such that the user may choose if he would use LightBox SlimBox or the nextgen plugin you referred to. We’ll see.

      Cheers!

    1. During the implementation of the 360° cylindrical scrolling, I already thought about that, but couldn’t think of a intuitive manner to realise it. The general problem my approach has with spherical panoramas is, that I cannot skew the image in such a manner that it looks right. That’s the classical problem of any flat world map.

      Do you have an idea how this can be done without image calculations but maintaining an intuitive result for the user?

  9. Very nice plugin, I have been using this for long. However recently I discover a bug when switching theme — PhotoNav conflicts with the Mystique theme (top download WP theme right now), and cause some of the „drift“ effect of Mystique cannot work properly.

    This is quite annoying, so I have to temporary disable PhotoNav before the bug is corrected. Could the author take a look at this? I’m using PhotoNav 0.5 and Mystique 2.3.1 (http://wordpress.digitalnature.ro/mystique/).

  10. Love the effect which is fine in Firefox but I have a problem with IE9. The image does not stay within the container bounderies. You see all of the full size image which you can move around – even underneath the page menu (I am using Atahualpa theme). Using wp 3.1.2 and Nav 0.9.
    Your own demos though look fine!! See Photographs/School Year Pics/1958 on my site…
    Hope you can advise.

    1. I have been experimenting and can solve the problem if I use the next release (3.6.4) of Atahualpa. Don’t know why but it just works fine then. Thanks for an excellent Theme.

  11. I am continuing to use this plugin but am finding that the first time it is accessed I need to reload the page for the image to appear (sometimes when it first appears it disappears as soon as I click to drag it). Once the image is in the browser cache all seems fine. It’s just when it loads for the first time. This happens with your own „advanced“ example above this comment form. So Atahualpa may not be the problem. The images I use are typically 6,921px × 1,626px (long all school photos). Using Firefox 4.0.1 but get same problem with other browsers.
    Have deactivated all plugins except this one and still get the problem. Bother.
    Any ideas please?

    1. Yes, I bother. Thanks for your testing and reporting! I must admit, I’ve seen this myself from time to time but wasn’t able to track it down or didn’t try hard enough. In fact that problem kept me from increasing the plugin version to 1.0. Of course, I would really like to fix this and maybe your feedback motivated me to look at it rather sooner than later, so if you can wait a few more days, I might be able to do something about it.

    2. It could be to do with the parameter handling as your top image without any parameters other than the url always loads fine. Good Luck!!

      1. That was more work than I anticipated, but I believe I was able fix the issue. At least I can’t reproduce it anymore. There is a beta package that you can download here: wp-photonav-1.0-beta1.zip. That version is also running on this page now so you can test it here first. I would be thankful for any feedback because I would like to release the 1.0 end of May.

    3. Hi Fabian,
      Sorry not to reply sooner but have been a bit busy. The good news is that the v1.0 of photonav for me is working fine in Firefox 4.0.1, IE9 and Chrome so many thanks for your work. An excellent plugin.
      Richard.

  12. Hi Fabian, I love your plugin wp-photonav cause it save me a few work hours 😉 However, it happens something strange when I add parameters like „mode=drag360“ or „animate=1“ the plugin doesnt work properly since first time you load page, the plugin covers the whole image but then it doesnt follow.
    Next times you reload the page, the plugin entire is not showed.

    Hope your answer.

    Adrian

    1. Hi Adrian, unfortunately I can’t give any general advice. It would help if you could post (or send me via email) a link to a page that doesn’t work. Also, I’m currently preparing a new release that will contain a lot of changes for the two drag modes. I still have to fix some bugs that have been reported by early testers, but I’m confident to release it in a few days. I suggest that you wait until then and write me if your problem remains.

  13. Hi Fabian, I would like to use this plugin but original plugin isnt working in Chrome. The updates on this page I cant access (security errors), can you provide another link to see if the updates fix the Chrome problem please? I can view this page with Chrome, but plugin on my test site no.
    Happy to donate to the cause, would really appreciate if I can get it to work across the major browsers.

    Regards, Jill

  14. Just me again, I found another download, but still not working with Chrome. I can view your images fine with Chrome, but not on my test site (in maintenance mode, not live yet, so cant give URL).

    I can only hope you would email me the update and Paypal link for a donation?

    Regards,

    Jill

    1. Hi Jill, I have just released version 1.0 and hope this will fix your problems. It runs on this page now and I have successfully tested it with Chromium (among others), which should be very close to Chrome. If your problems remain, please come back and post here or write me an e-mail. Thanks for your offer, but I can’t accept any donations.
      Regards, Fabian

  15. Hi,

    Thank you for this plugin it is fitting exactly what I was looking for!
    I would love to have an extra mode „move360“ in the next version!

    I had a same probleme seen below on firefox and Chrome:
    „The image does not stay within the container bounderies. You see all of the full size image which you can move around“

    What I did to fix it is on the editing page in html of wordpress, I added a „Div“ around the code section like this:

    [photonav url='xxxxx' container_height=500 container_width=500]

    And it fixed the problem!

    1. Hi,

      thank you for your feedback! How exactly do you imagine a „move360“ mode? The current „move“ mode maps one cursor position to a certain „rotation angle“, i.e. when the cursor is on the left side, the user/viewer „turns left“. I’m afraid there is no way I can think of that the user could turn „further left“ from that point. If you can explain me in more detail what you mean by move360, maybe I can include it in a new version.

      Regards, Fabian

    1. I should have clarified the problem a bit better !

      The image is not displaying within the column size but fills the whole width of the page.

      I have tried wrapping the „photonav“ image within a table but this makes no difference. It stills overspills the column sides.

      I have also updated Java to the latest version 6_26.

      The code line is:
      [photonav url='http://www.michaelgallie.com/wp-content/uploads/2011/06/4180-MGP_01.jpg' mode='move' popup='none' animate='1' container_width='600' container_height='600']

      „container_height“ works but „container_width“ has no effect. As I said this appears only in Explorer 8.

      Regards, Patrick

  16. Thanks Fabian, I upgraded to 1.0 and now working in Chrome 🙂 Thank you. I have same problem as Patrick above though, I have tried to constrain the width within a table or page but it continues to go full page width. I need it to be an exact width to match other graphics on the page. Is that possible? I cant change the width of the other graphics unfortunately 🙁

    1. Hi Jill,

      Good to hear that 1.0 is working for most cases. Of course the overflow in IE8 is unacceptable. As I just wrote above, I will see what I can do about it. I hope to fix that within the next few days. In any case thanks for reporting!

      Regards, Fabian

    2. Thanks Fabian, I’m sorry, the constrain_width doesnt appear to work in any browser that I have found.
      Using Chrome and Inspect element, it says

      Can we manually change that, or remove/change so the shortcode is effective?

  17. I particularly love the ‚animate‘ feature that allows you to move across the panoramic view. It makes a blog post a lot more interesting.

  18. Hi Fabian,

    For some reason when I add the code it all works fine except the first time you click on the image the colorbox is not the full width of the screen. However, if you close it and then reopen it, then the colorbox fills the screen width ways as it should. Hmmm. I can’t work it out. Here is the link to the page in question… http://www.jsdphotos.com/2012/01/12/val-disere/

    Any help would be much appreciated. The plugin is awesome otherwise. Thanks.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.