Pamoorama

About

Pamoorama is a simple script that aims at spicing up your panoramic image a little bit. It quite small in size (5kb) and requires MooTools (required MooTools module will be listed below). No CSS file, barely any html..

Basically what it does is to show only a part of your fullsize image. The image can then be scrolled by moving the mouse over it. Pamoorama will also display a small thumbnail of your panorama with a small window/frame so you can see which part of the image is visible right now. Dragging this little window is also possible!

It also has, as of version 0.3, an autoscroll feature, with a little play/pause button to start/stop the autoscroll. While the autoscroll is playing, all the other events (scroller/draggable etc..) are stopped so it doesn't interfer with the autoscroll. Once you stop the animation, the events are resumed as usual.

Anyway, it's not so easy to explain, but quite easy to understand when you see it so, hop to the samples! ;)

Samples

Ahh what everyone wants to see! Well, here they are!

  • Sample 1 : A simple example with all defaults options
  • Sample 2 : Custom caption, width, colors
  • Sample 3 : Disabled slider and autoscroll (only dragging will work)

New

Hey! I got a lot of request for a real "360degree" panorama.. where you could scroll left and right endlessly for a true "loop" feeling...
Well know that I am working on something, and I almost got it down!

Click here to see a sample For now it works in FireFox only I think (maybe IE too) and the bottom thumb is kinda useless, but I'm working on both issues, and I will get a true 360 panorma script working soon :)

How does it work?

It's quite easy actually! Just include mootools in your page as you usually do and add the pamoorama javascript file (pamoorama[ver].js).

Example: 

  1. <script src="mootools.v1.11.js" type="text/javascript" charset="utf-8"></script>
  2. <script src="pamoorama0.3.js" type="text/javascript" charset="utf-8"></script>
Now onto the HTML part, basically the only thing you need is a DIV! Assign an ID to that div, and a "alt" parameter containing the path to the image you want to use...

Example: 
  1. <div id="pamoorama1" alt="panoramafile.jpg"></div>
Finally, here is the javascript code you need to make this work. I suggest using mootools' domready event, but basically all you need to do is to create a pamoorama object, so use your prefered method.

Example: 
  1. <script type="text/javascript" charset="utf-8">
  2. 	window.addEvent('domready', init);
  3. 	function init() {
  4. 		myPamoorama = new pamoorama('id_of_container', {options});
  5. 	}
  6. </script>
Parameters
  • id_of_container: String, The id of your DIV (In our example, 'pamoorama1')
Options(default value)
  • activateSlider(true): Bool, If you want the slider to be active (check out the demo)
  • width(650): Int, The width of the pamoorama (the visible portion only of course)
  • footercolor(#000): String, The background color of the footer
  • captioncolor(#fff): String, The text color of the caption
  • caption(image name): String, The caption for the panorama
  • enableAutoscroll(true): Bool, Whether or not you want to enable to autoscroll (with play/pause button)
  • autoscrollSpeed(10000): Int, The time in microsecond it will take for the autoscroll animation to reach the end
  • autoscrollOnLoad(false): Bool, Set to true if you want the autoscroll to start on load

Download

Note: Pamoorama doesn't come with Mootools, visit www.mootools.net to grab it! This version of pamoorama was tested with mootools version 1.11. I can't guarantee it will work with any other versions.

The script was tested with Firefox2, IE7, Opera 9 and Safari for Windows. It was the best I could do at the moment. If there are any bugs with other browsers please let me know! Also note that you need to use an XHTML doctype for the script to work!

Download Pamoorama0.3 (Right-click, Save Link As.. or just click the link and copy/paste the code...)
For a list of Mootools Dependencies click here

Changelog

0.3: Added the AutoScroll animation option (check out sample1).
0.2: Added transition effects when you click on the small thumb.

Donate

If you are using the script (eighter for a Private or Commercial project) and you love it so much that you want to donate some money ;) Feel free to do it via the link below... To be honest, I always try to offer the best support I can, even if you don't donate... But hey, donating will definitely get you faster support! ;)

Comments and Metastuff


Save This Page on del.icio.us