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
Since the plugin is not yet complete, please feel free to post comments and requests. I do not plan to significantly increase the functionality of the plugin, but I do want to improve the usability mainly by a smooth integration the with WordPress interface. Of course, bugs in the produced output will be corrected and therefore will be a source of changes as well.
If you prefer a more technical approach, you can also visit the public project page within my project management tool. It contains a ticket tracking system and provides a roadmap and a detailed overview of related activities as well as direct access to the development files. If you want to contribute, you can register and file tickets/bugreports yourself and become part of the discussion board.
Download
Please download this plugin from the WordPress plugin directory.
Usage
Currently (as of version 0.7), the only way to use WP-PhotoNav is via WordPress shortcodes. In the following, any 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 higher demands, WP-PhotoNav accepts a number of parameters, most of which are demonstrated in the following example:
[photonav url='/files/2009/05/panorama02_resized.jpg' height=300 mode=drag360 popup=colorbox animate=1]
The following parameters are used:
- height – Defines the height of the displayed frame. If the image is higher than the given height, vertical scrolling (or dragging) is enabled. The unit is one pixel.
- mode – Specifies one of the following modes:
move,dragordrag360where 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 poup 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. Install this plugin 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 entierely once. This allows to attract the users attention to the additional functionality of the panorama compared to a simple image. Please note that the animation (like everything else) is accomplished using JavaScript and might not be 100% fluid on all systems and browsers.
Seeing it at work here just took my breath away! This is an amazing plugin, well done!
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
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
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
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
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
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!
Love it. Using it on my site
And looking forward to the 360 rotation. Need some help transelating to norwegian – just send a mail
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……
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.
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…
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.
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..
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.
it seems to be incompatible with this plugin: http://jasonpenney.net/wordpress-plugins/use-google-libraries/
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.
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.
oh and it also breaks the Shutter Reloaded plugin
I just read this on the Shutter Reloaded FAQ:
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!
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.
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.
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!))
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!
Schönes Plugin. Was mir jetzt noch fehlt, sind klickbare Bereiche. Ideal wäre eine Verknüpfung mit diesem Plugin:
http://wordpress.org/extend/plugins/knspr-imgnote/
I finally managed to implement the long-requested 360-degree mode in version 0.5 and hope you enjoy. As always, feedback is very welcome.
Fabian, what about displaying 360° spherical panoramas with six cube faces?
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?
Prof. Dersch has a first release of PTViewerNG based on based on the upcoming WebGL: http://webuser.hs-furtwangen.de/~dersch/PTViewerNG/PTViewerNG.html
BTW, here is another jQuery panorama viewer: http://www.openstudio.fr/jQuery-virtual-tour.html?lang=en
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/).
Thanks for the feedback and report. I will look at this as soon as possible. Please check back in one week or so.
I could fix the bug and just released version 0.6 that works fine with the Mystique theme.