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='/files/2010/08/panoramaLeMole.jpg']

Advanced

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

[photonav url='/files/2009/05/panorama02_resized.jpg' container_height=300 mode=drag360 popup=colorbox animate=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 this option is enabled, the panorama will be rotated automatically until either the user interacts with it (by scrolling in move mode or dragging in drag mode) or the image is scrolled through entirely once. This 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.

Fork me on GitHub

82 thoughts on “WP-PhotoNav”

  2. Seas,…
    Boa ist das ein Bommben Plugin einfach Voll Krass!
    Zensiert*I fo da mit mana maus drüber und des rührt sig^^*Zensirt

    Mit echt Superfreundlichen Grüßen
    Da Norman

    Reply ↓

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

    Reply ↓

    • 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

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

    Reply ↓

    • 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

  5. 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!

    Reply ↓

  6. Pingback: Testing some great Panorama Viewers for Wordpress | I can see what you see not

  9. 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……

    Reply ↓

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

  10. 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…

    Reply ↓

    • Danke für die Rückmeldung. Mein armer alter Laptop ist mit den großen Bildern leider überfordert. Ich werde mir das morgen ansehen und dann hoffentlich helfen können.

    • Ich hoffe, ich konnte mit der Version 0.4 diesen Bug beheben. Es würde mich freuen, wenn du das ausprobieren könntest.

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

    Reply ↓

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

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

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

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

  14. thx for the quick answers.
    will wiat and se if htere are any news from your site. would be great if the incompatibilities could be removed :-)

    great plugin btw.

    Reply ↓

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

  15. Pingback: | BEERHEAD

  16. 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!))

    Reply ↓

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

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

  21. Pingback: Софтово-железячное | BEERHEAD

  22. Pingback: 帶著 HX5V 遊馬灣 - Nicole's little world

  23. 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/).

    Reply ↓

  24. Pingback: Wordpress Plugin Blogparade 2010 | Janasworld

  25. Pingback: How to Create a 360 x 180 Degree Panorama | Greeen Notes

  26. Pingback: La plaine d’alsace de nuit | Le photoblog de Snash

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

    Reply ↓

    • Thank you for the feedback! I will try to get my hands on a machine with IE9 within the next few days to check what goes wrong there.

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

    • I’m glad to hear that it works now. Thank you for your effort in solving the problem yourself and taking the time to report back!

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

    Reply ↓

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

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

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

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

  29. Pingback: WP-PhotoNav | BAMs Blog

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

    Reply ↓

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

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

    Reply ↓

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

    Reply ↓

    • 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

    • Hi Ghulam Farid, if this is a question, I don’t understand it, sorry. You can’t use this plugin to install other plugins.

  35. 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!

    Reply ↓

    • 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

    • 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

    • Hi Patrick,

      Thanks for your feedback! I will see if I can debug the plugin to also work on IE8 within the next few days.

      Regards, Fabian

  37. 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 :(

    Reply ↓

    • 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

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

  38. Sorry, the code was removed from my post. But if you inspect the element I see the div class “container” width is set to auto.

    Reply ↓

  39. Pingback: Photosite » Archive » Barcelona Panorama

  40. Pingback: Photosite » Archive » Panorama erstellen und präsentieren

  41. Pingback: Sicht-Weise » Von Schlingpflanzen und Kürbis-Babys

  43. Pingback: Lee.org » Blog Archive » Installed WP-PhotoNav Panorama Plugin

  44. Pingback: ブログにパノラマ写真を表示させるプラグイン | WordPressにGoogle Maps API V3！ブログ素人のホームページの作成メモ

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

    Reply ↓

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

    Reply ↓

  50. Pingback: Panoramic View from Chasseral at Under Way

Hinterlasse eine Antwort

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

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">