| Javascript: panorama |
| Written by Andreas Berger | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Saturday, 19 April 2008 07:48 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Updated 20081005!The JavaScript "panorama" provides an alternative for those, who - for whatever reason - want to avoid using Flash, Java or a movie player for the presentation of panoramic images. Display:The Javascript shows inside a div-container an adjustable section of the panoramic-image. Beyond this section 2 arrows are shown. They allow to scroll the image to the left or to the right on mouseover. On pageload the contents of the given div-container gets overwritten. This behaviour gives you the possibility to display a static image or an advice like - for example - "the panorama needs javascript" for visitors with javascript disabled. Functionality:The script works thinkable easy. From a surrounding div-container only a certain section is shown. This is done by using "clip:rect". Within the div-container the panoramic-image - three of a kind side by side - is scrolled. As soon as a certain deflectain is exceeded, the next step displaces the the three images one step-width in the direction currently scrolled to and one complete image-width into the other direction. That's all. Installation:Create a div-container on your page an define an id (id="favored name"). This name tell the script as the target for your panorama. The container may be formatted as you want using CSS. All parameters are adjustable within the script. Current Version:20081005 Browser-compatibility:The JavaScript is till now tested as follows:
Demo (shown inside an inline-frame):
License:Free to use as long as the copyright-notice in the sources stays intact. Showcase:20081116:
Miscellaneous: I am happy about everybody who gives me a link back to www.bretteleben.de on his website, this way helping me to popularize the script. The JavaScript "panorama" is till now listed in different JavaScript - resources, including the largest - as far as i know - JavaScript resource: HotScripts. The ZIP-archive contains a demo-page, all configurable parameters are commented inside the script.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Last Updated on Saturday, 14 February 2009 09:46 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Internet Explorer 
Firefox
Opera
Safari
In your panorama, can I change the two blue arrows under the picture? I've tryed to use; img src='xx'; , but it dosn't work.. Is it possible anyway?
Best, Linda :)
Best, Linda
Maybe you missed to ad the unit "px" to the width.
Using style="width:400px;margin:auto;padding:0;display:block;" on the div from the sample that comes with the zip centers the panorama at least with IE7, FF3.06, Opera9.63, Safari3.11 and Chrome1.0.xxx
Kind Regards
Andreas
Thanks, I have done as you said, but the panorama is still placed left when I look at it in firefox..
All divs at the page are placed fine in center when I look in Dreamweaver, and also in the browser, exept for the panorama.. Have i missed something?
Best, Linda
Fine! To center the panorama, give the div you created in your body css-attributes of
width:"the_width_of_your_panorama";
margin:auto;
padding:0;
display:block;
This should work.
Kind Regards
Andreas
Thank you for your quick answer!:) I have succeded in making it work and it looks good, thank you! It is not on net yet, I am just testing. Now I wonder if I can ask you; can i place the panorama in the middle of my site? when I use the div-align-center in my html file, it is only working in dreamweaver but not when I test it in the Browser, where it is placed left.
Best, Linda c",)=@
The easiest way would be to copy the script-tag from the head-section of the downloaded sample into the head of your page and the div tag from the body of the downloaded sample into the body of your page. Be sure to place the script and the image into the directory of the page.
Give it a try now, it should work. If it doesn´t, recheck for typos and - if present - remove other JavaScripts from your page to make sure, that there isn´t another script preventing the panorama from working.
If it works, change step for step what it needs to fit your page. 1 change - test - 1 change - test - and so on.
If it does´nt work out, send me a link to a test page or zip the page you are working on and send it to me per mail. I will have a look at it.
Kind Regards
Andreas
PS.: Yep, I know, you posted the tags you already created but the comment-component does not allow html-tags and removes them. Blame it to my paranoia :)
I am very new to javascript, and I can not make your panorama work with my site. (witch I am making in Dreamweaver CS3 with XHTML and CSS.) Could you help me step by step what to do?
I defined a
in my tag and in head tag. But this is not enough?
Hope you can help.
Best, Linda