2010-08-01
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 bretteleben.de Panoramic Image Viewer Plugin.

Installation

1.) Log into your administration interface


 

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


 

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


 

4.) Click "Upload file & Install"


 

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


 

Imagefolder


Next we need the image. We upload it to a folder in (Joomla-Installation)/images/stories.

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.



6.) optional: If you want to display image-buttons for your control-elements, we have to take care of these images too. So, again navigate to the folder "Media" > "stories".


And create a folder called bepiv_buttons. This is the place the plugin looks for the images we will set later for the control elements.

And therefore we upload them here.


Notice: The plugin does NOT create this folder automatically, neither comes the plugin with button-sets. If you want to use the buttons from the demo at bretteleben.de, feel free to do so. Anyway, there are a lot of websites that offer buttons for free or the possibility to create them online. Be creative! :)


Konfiguration and Usage

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


 

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



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


 

4.) ... and the 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.) 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.


 

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.) If we start automatically, here we choose the direction.


 

11.) The next 3 parameters set the text, you want to use for the links. The links are displayed below the panorama in the order (from left to right) "left", "stop" and "right".



If you want to use your own links, placed wherever on your page, the easiest way to do so is to enable this feature, copy the created links from the source of the page and then disable it again. This way, you ensure that your links will work.

Buttons:



Instead of text links you may also use 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 folder "/images/stories/bepiv_buttons". If the file exists, the image is shown.




12.) 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.
e.g.: http://www.bretteleben.de



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


 

13.) "Panorama link title" allows to set a title for the above created link.
e.g.: bretteleben.de



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


 

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




15.) Activate the plugin.


 

16.) Click "Save" - done.


 

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


 

18.) 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 with your image and the image itself. The path to this folder "/images/stories" 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 "/images/stories/" is used, e. g. to use the folder /images/stories/myimages/yourimages" the call would look such as:

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


 

19.) Save - done!


That´s it. Have fun with the plugin!

Support

If you have questions or suggestions, please use the comment-function. Records about the behavior of this extension (positive or negative) are most welcome.

If you use this extensions, you have the possibility to post a rating and a review at joomlaos.de or extensions.joomla.org. Furthermore I appreciate everyone, supporting me with a link back to www.bretteleben.de on his/her website. The extension itself does not produce any hidden links, eastereggs or whatever.

 

Last Updated on Sunday, 05 April 2009 13:35
 
Comments (21)
how can i add mor than 1 pic to the slide viewer
21 Monday, 24 May 2010 15:05
dany

i can only add 1 picture . what if i want to add more pictures ? what i must include in {*bepiv}panorama{/bepiv}??

@Dany
Monday, 24 May 2010 15:44
A. Berger

Hi Dany!

There is no possibility to do this. The sole purpose of this plugin is to display 360 degree panoramas. And due to the fact that a circle only has 360 degrees - there is only one image.

Best regards
Andreas

@Kris
20 Thursday, 04 February 2010 18:57
A. Berger
Hi Kris!

I'm sorry, but although this feature is on my todo-list for month, up till now I haven't found time to implement this. So - for now the plugin does simple what it says: It displays 360 degree pictures.

Best regards
Andreas
Non 360 degree panoramas
19 Thursday, 04 February 2010 14:19
Kris
I've got some non 360 degree panoramas. Is it possible to stop viewing at the picture's end instead of playing it from the beginning? It looks funny and weird.
@ravi
18 Tuesday, 15 December 2009 20:34
A. Berger
Hi ravi!

The path to the default image folder /images/stories/ is set by the plugin automatically. Instead of:

{bepiv}images/stories/imagegallery/adi.jpg{/bepiv}

please use:

{bepiv}imagegallery/adi.jpg{/bepiv}

Best regards
Andreas
cant display plugin
17 Tuesday, 15 December 2009 12:04
ravi
hi, tx for such nice component
but i done all setting such as in your tutorial but cant display component cant find out the problem please help me
i have written in artical page such way
{bepiv}images/stories/imagegallery/adi.jpg{/bepiv}
and i didnt specify anythng
in link title in plugin config
rest of all as of yours setting
please help
@Cansu Çaykara
16 Saturday, 12 December 2009 20:53
A. Berger
Hi Cansu Çaykara!

Hard to tell where the problem lies because I checked the linked page (in all 4 languages) but - the is neither any text, nor the code of the panorama, nor the styles and script, nor panorama. Are you sure, the article is linked correctly? Maybe it's lost in translation?

Best regards
Andreas
Not working
15 Friday, 11 December 2009 21:47
Cansu Çaykara
Dear friends,
My plugin does not work:( What should be the problem?

http://www.mybedinbrussels.com/index.php?option=com_content&view=article&id=59&Itemid=62&lang=en
@Sandra
14 Wednesday, 19 August 2009 18:14
A. Berger
Hi Sandra!

The Panoramic Image Viewer Plugin allows to display a panorama in your content item(s). What you want on your site is a panorama on a module position. For this purpose a plugin is not the right choice so please download and install the Panoramic Image Viewer "Module" (menu at the left, just one link below).
To get the module displayed at the top of your site, either the template already offers a module position there (in this case just set the module in its configuration panel to display at this position) or you have to create a custom module position in your template. If you need to do so, there are a lot of howtos out there on the web. Your favorite search engine will deliver useful links when searching for "custom module position joomla 1.5".

Best regards
Andreas
placing the panorama into my website header
13 Wednesday, 19 August 2009 13:41
Sandra
Hello everybody,

I am a beginner with joomla and websites.
I wanted to put a nice panorama image on the top of my website, in my header.
I installed your plugin and upload the image.
but now I don't know where to put the
{bepiv}panorama\panorama.jpg{\bepiv} command in my template.

Could somebody help me please?!

Thanks a lot.

Best regards, Sandra
@Tina Walker
12 Wednesday, 05 August 2009 18:43
A. Berger
Hi Tina!

The black underlines are a CSS text-decoration, set for links in one of your stylesheets and inherited by the plugin. But - that's not the main problem.

The main problem is, that you are currently using a template, that does not import the head-data, provided by Joomla!. The result is, that the CSS-settings, the plugin writes to the head are not integrated into the source of your page - and the plugin fails.

This will happen with every extension, that uses this feature of the Joomla! framework the way it is (at least in my opinion) meant to be used and therefore I suggest to use another template. With this one, you will get problems with other extensions too and loose a lot of the functionality Joomla! offers.

Best regards
Andreas
English
Panoramic Image Viewer
AddThis Social Bookmark Button
Who's Online
We have 29 guests online
Latest Items