Panoramic Image Viewer Plugin Installation and Usage
Written by Andreas Berger   
Sunday, 15 February 2009 10:33

A step for step tutorial on how to install and use the Panoramic Image Viewer Plugin.


1.) Log into your administration interface

2.) Go to "Extensions" > "Install/Uninstall"

3.) Select the Package File with the Panoramic Image Viewer Plugin

4.) Click "Upload file & Install"

5.) If everything worked fine, you get the message "Install Plugin Success"



Next we need the image. We upload it to a folder in (Joomla-Installation)/images/stories. We upload it to a folder below the Joomla! default image folder (Joomla-root)/images/stories (Joomla!1.5) or (Joomla-root)/images (Joomla!1.6/1.7). This sample refers to Joomla!1.5.

1.) Go to "Site" > "Media Manager"

2.) Navigate to the folder "Media" > "stories"

3.) Create a new subfolder for your image. In this sample I choose the name "panorama"

4.) Navigate to the new folder.

5.) ... and upload your image to it. In this sample its the file panorama.jpg.

Configuration and Usage

1.) Select "Extensions" > "Plugin Manager"

2.) Find the "Panoramic Image Viewer" plugin and click it

3.) First we set the shown width of the panorama in pixel ...

4.) ... and the shown height of the panorama in pixel.

An image that exceeds this value will get scaled within the visitors browser. Best practice is to scale the image offline. Doing so you get the best-possible image-quality combined with the smallest-possible image-filesize.

5.) The next parameter sets the position of the panorama within the available space. You may choose between left - centered - right.

6.) "Carousel or Swing" set the type of animation.

For 360 degree panoramas "Carousel" can be used to let the panorama scroll endless into the set direction. If you don't like this type of animation or if you are going to show an image of less than 360 degrees, the setting "Swing" tells the plugin to automatically change direction when it reaches the image border.

7.) The parameter "Scroll Speed" sets the timeout between two scroll-steps in milliseconds. Smaller means faster.

8.) "Scroll step" sets, how many pixel one step should move the picture. The larger the value the faster the scrolling, the smaller the value the smoother the scrolling.

9.) "Start at pageload" sets if the panorama starts to scroll at page load or if we show control-elements.

10.) Deviation sets the starting position of your panorama. Per default, the image is centered at start (empty or value 0). Here you may choose a different position. You may move the image up to half of its width to the left or right. The values are given in percent from -50 up to 50. Just try it out.

11.) If we start automatically, here we choose the direction.

12.) The parameters "Label stop", "Label forward" and "Label back" set the button/text, you want to use for the control elements.
Left empty the plugin will use the automatically installed default buttons.

If you insert text, this text will be used.

Instead of the default buttons or text links you may also use custom buttons. Just insert the name of the image-file you want to be used (including the suffix). The plugin detects .jpg, .gif and .png and searches for the corresponding file in the set folder (we will set this with the parameter "Buttonfolder" a little later). If the file exists, the image is shown.

13.) Panorama link: If we want to have the panorama linked, this is the place to set the URI. Insert the complete link, including the protocol.

If the parameter is empty, no link is created by the plugin.

14.) "Panorama link title" allows to set a title for the above created link.

If parameter 13.) stays empty, a given title is used for the alt- and title-tag of the panorama-image.

15.) "Target for link - if set" decides if to open the link in the current (Top) or a new (Blank) browser window.

16.) Image root configures the path to the folder you are uploading (directly or stored in subfolders) your images. By default this parameter is set to /images/stories/ in Joomla!1.5 and /images/ in Joomla!1.6/1.7 (and this folder is also used when the parameter is empty). In most cases this setting will fit your needs and there is no reason to change it. Only if you have organized your images in a folder structure outside of the default image folder, put the path here.
The set value of this parameter will be added to the folder name you insert in the code in your article automatically by the plugin and must not be repeated in the article.

17.) Buttonfolder
If you are going to use custom buttons for the control elements, this is the place to put the path to the folder you uploaded this buttons. By default this parameter is set to /images/stories/bepiv_buttons/ in Joomla!1.5 and /images/bepiv_buttons/ in Joomla!1.6/1.7 (and this folder is also used when the parameter is empty).

18.) Activate the plugin.

19.) Click "Save" - done.

20.) Next, go to "Article Manager" and open the article you want to display the panorama.

21.) At the place you want the panorama to be shown insert the code to call it.

The code consists of the call {*bepiv}{/bepiv*} (without the asterisks) and contains the name of the folder we just uploaded the image plus the image file name. The configured path to this folder (image root, by default "/images/stories" in Joomla!1.5 or "/images/" in Joomla!1.6/1.7) is added by the plugin automatically and must not be inserted.

The complete call in our sample would look such as:

{*bepiv}panorama/panorama.jpg{/bepiv*} - without the asterisks

To use a folder within a folder, the path below the set root folder is used, e. g. to use the folder /images/stories/folder/subfolder" the call in Joomla!1.5 would look such as:

{*bepiv}folder/subfolder/panorama.jpg{/bepiv*} - without the asterisks

22.) Save - done!

A survey of the possibilities to call, extend and modify galleries with the code in the content item (Paramater Overrides): Howto Plugin Code

If you have questions or suggestions, please use the comment-function. Please include the installed Joomla! version and if you have problems - if any possible - the affected page in your comment.

If you need additional features or customizations for your project that exceed the scope of support offered through the comments, you are invited to submit your requirements specification and the planned budget by email (menu item "Contact" in the menu at the top).

If you use this extensions, please post a rating and a review at

Last Updated on Wednesday, 09 November 2011 22:37
Comments (3)
3 Saturday, 28 January 2012 08:56

Danke für diese Super Anleitung ; )

Bekommst zwei Daumen hoch

control buttons
2 Wednesday, 14 December 2011 14:33
Henk W

I can not see the control buttons on the screen. Everything is set according to the explanation.


@Henk W
Wednesday, 14 December 2011 19:49
A. Berger

Hi Henk!

Set the parameter "Start at pageload" to "No" to show the control elements.

Best regards

zu schnell
1 Sunday, 15 May 2011 20:21

Erst mal Lob - tolles plugin.

Klitzekleines Problem - unter Firefox (4.0) ist auch bei der langsamsten Einstellung die Geschwindigkeit zu schnell und ruckelt leider dabei. Unter dem IE sieht es da schöner aus. Könntet Ihr beim nächsten Update dieses unwichtige Detail mit einplanen. Danke im Voraus

Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

Add to circles

Who's Online
We have 140 guests online