WP-PhotoNav

Lyon

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 Gedanken zu „WP-PhotoNav“

  1. Hye and sorry to write in english but my german is soo bad. I have some problem to use your plugin. Here is the page (http://www.etiennebretteville.com/pano/ with this code: [photonav url='http://www.etiennebretteville.com/wp-content/uploads/2012/06/EtienneBrettevillePanoramaCherbourgMiniature.jpg' container_height=50 container_width=50 mode=drag popup=colorbox animate=1] ) I want to implement it but maybe the problem is the theme I’m using, if you have any ideas and time to get in touch with me, do not hesitate.

    Thanks.

    I know your plugin is working as I can see it here: http://chris021.com/2011/04/wp-photonav-test/

  2. Hi Fabian, at first thanks for your really great and simple plugin! Maybe the following topic is interesting for some more people out there.
    I use PhotoNav not only for panoramic photos but also as a kind of slider, par example at this website: http://danastoelzgen.de/work/women/
    In this case it is ugly that the image always loads centered. After some fruitless trials with CSS-manipulations I found a quick and dirty, but working hack.
    Given that you don’t need the animation anywhere in your project you can edit the jquery.photonav.js and set the value for the animation time in line 167 from 10 to 1000000. In the PhotoNav shortcode you have to enable the animation [animation=1]. Now the Image is loading aligned left but the animation is not visible.
    Sure that’s not what was originally intended, but it works for me pretty fine. But if you can recommend a smarter way to solve my problem I would be glad to know it.

    Best,
    Peter

    1. Hi Peter! Thanks for the feedback! As I’m currently working on a bug-fixing release anyway, an additional option to define the initial alignment is definitely worth a thought. 😉

  3. Hi, I am marianna from athens and I try to imply your plugin. I would like to have your help because I haven’t managed to . I installed your plugin in wp and I write the following in my post:
    [photonav url='/wp-content/galleries/astir_beach/astir_01.jpg' container_height=300 mode=drag360 popup=colorbox animate=1]

    what I have done wrong? Could you please help me. I work on wamp.

    1. Hi Marianna, thanks for using WP-PhotoNav. The problem you’re describing seems strange. Have you verified that the plugin is activated? Also, could you please check whether the image is actually reachable under the URL you’re using. Otherwise it probably has something to do with the theme. Does it display correctly, if you use a different theme, e.g. the default TwentyTwelve theme of WordPress?
      Cheers, Fabian

  4. Hi! This is a great plugin. Thanks for sharing. I have one problem, which I do not know how to solve. My theme is a responsive theme, and so all images are automatically scaled to fit the available width. As a result, the photonav plugin does not work. Is there any work around?

    My blog is at http://bijoor.me

    Thx again!

    1. Hi! Thanks for your feedback! Could you describe the problem a bit more specific? In fact WP-PhotoNav does work with the TwentyTwelve theme, which is also responsive. Besides, I could not find a panorama on your blog to find out myself what isn’t working.
      Cheers, Fabian

  5. This is a good plugin. The only problem is that it does not move or drag in iOS and many of my viewers are using iPhone or iPad.

    1. Hi Derek,
      sorry for the inconvenience. This error didn’t show up during my own testing.
      From looking at your page, it appears this has to do with a jQuery plugin called „imagefit“.
      I’ll see if I can recommend you a work around.
      Regards, Fabian

    2. Hi again Derek,
      Apparently the problem is due to an incompatibility with the WP-Imagefit plugin. I have put the plugin on my testing setup.
      If your site was working with the previous version of WP-PhotoNav, I would recommend you to either downgrade WP-PhotoNav for now or instead disable the WP-Imagefit plugin.
      If I can work around this problem in my Javascript code, I will include it in the next bugfix release, but this will take some time unfortunately.
      Many thanks for reporting the issue!
      Regards, Fabian

  6. Dear Fabian,

    Thanks for that. Yes, disabling WP-Imagefit certainly works, but I have’nt checked the impact of doing this on all my images yet.

    I look forward to a fix, if you can manage it.

    Regards
    Derek

  7. Hallo Fabian,

    vielen Dank für das wunderbare Plugin!
    Ich hätte aber noch ein Frage, auf die ich keine Antwort finden konnte:
    Gibt es die Möglichkeit die Anfangsbewegung der Bilder umzukehren? Das heißt der Blick soll nicht von links nach rechts sondern von rechts nach links gehen.

    Ich hoffe du kannst mir bei diesem Problem helfen.

    Vielen Dank und beste Grüße,
    Niko

  8. Hello,
    Thank you for this plugin.
    When the panorama is rotated automatically, is it possible to make the photo move itself from left to right ?

    Thanks for your help.

    Aurélie

  9. hey,

    is it possible to use tags?
    oh, and it would be nice if the user could click a left or right arrow to move the picture a bit.

    Thnx in advance!

    1. Hello,
      Thank you for your feedback!
      What kind of tags do you mean? It is not possible to use HTML tags, because the short code currently fills in an img tag internally.
      I haven’t thought about an arrow navigation, but I think this is outside the scope of this plugin. Also I believe there would be conflicts when using PhotoNav within an overlay image viewer (Lightbox, Colorbox, etc) because these tend to use arrows for image switching.
      Cheers

  10. Hi Fabian,
    Thanks for this plugins. I am very interested to have it in my website. However, i got a problem in appearance of the image.
    It automatically changes the height to 54px.
    I would appreciate if you can look on my test post about this issue.

    http://islandrover.net/test-pano/

    regards and thanks in advance.

    1. Hi Ado,
      After looking at your test post, it seems that the image width of your panorama is scaled down to the post width (474px) automatically (presumably by another plugin), hence also reducing the image height accordingly. WP-PhotoNav can only work when the image URL points to the full size image and is not modified. In particular the image must not be scaled down (e.g. to fit the theme) by some other plugin.
      I hope with the above hints you can perhaps determine which other plugin may cause the problem …
      Best regards

  11. Hi, I have installed your plugin and like what I see so far. Thanks for making it simple!

    I need to be able to include multiple jpg files in a single panorama. I don’t see any example of doing that so I guess the first quaetion is whether it is possible and the second question is where can I find an example of the shortcode.

  12. Hallo Fabian
    Kompliment und grossen Dank für das tolle Plugin! Ich nutze es schon seit geraumer Zeit!
    Leider werden seit einigen Tagen die Panos von IE nicht mehr angezeigt, auch IOS-Safari hat zeitweise gestreikt , in Chrome dagegen läuft alles einwandfrei.
    Kennst du eine Möglichkeit, die Panos in allen Browsern zum Laufen zu bringen?
    Danke für deine Tipps!

  13. Hi,

    Great plugin. I’ve used it successfully in a previous post, however when I use it now, the image doesn’t appear.

    Code: [photonav url='http://keane.li/blog/wp-content/uploads/2016/02/IMG_9547.jpg']

    for this post: http://keane.li/2016/02/02/visions-of-hawaii-photos-to-ease-your-workweek/

    The past post it did work for: http://keane.li/2015/07/30/panoramic-photos-from-italy-and-switzerland/

    It’s the same site, so I’m not sure why it works on one post but not the other. I tried multiple sizes for the photo as well.

    Ideas?

    Danke!

  14. installed today but sadly i don’t get it to work. nothing shows…i guess it might be related to my theme but can’t explain how this would be possible.

    works neither with uploaded or linked image from flickr. is it my fault? does it only work up to a certain wp or jquery version?

    please have check. cheers.

  15. Merci pour ce plugin très utile, j’ai juste changé l’image ‚Move me“ en ‚ Bougez moi avec la souris‘.
    De plus j’utilise Linux depuis plus de 15 ans et je suis toujours heureux de trouver des logiciels libre.
    Petite phrase habituel pour un français qui poste sur un site étranger, “ Excuser moi pour mon mauvais anglais ! “

    Thank you for this very useful plugin, I just changed the picture „Move me “ into „Bougez moi avec la souris „.
    Also I use Linux for over 15 years and I am always happy to find free software.
    Small usual sentence for a French position that a foreign site, „Excuse me for my bad English!“

Schreibe einen Kommentar

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