360 Degree Image Viewer

Jun 16, 2010 6:55 pm

jQuery Three-Sixty is a jQuery plugin that allows you to rotate an image 360 degrees. You can see examples and download from this site:

http://www.mathieusavard.info/threesixty/demo.html

To use in Freedom add this to your page layout:

<div><img id="360_image" src="img_1.jpg" /></div>

<script type="text/javascript" src="/freedom_html/common/jquery/jquery.loader.php"></script>
<script type="text/javascript" src="jquery.threesixty.min.js"></script>
<script type="text/javascript">
$(function() {
var imageNames = [];
for(var n = 1; n <= 25; n++) imageNames.push('img_' + n + '.jpg');
$('#360_image').threesixty({images:imageNames, method:'click', 'cycle':1, 'resetMargin': 10});
});
</script>

This example requires 25 images named img_1, ..., img_25, taken from different perspectives (for the 360 effect). The first image (img_1.jpg) is displayed while others are loaded in the background. Since I specified the 'click' method in the options, you have to first click on the image and then move the mouse to rotate. Before you can roate the image you have to wait for all of the images to download but once they've been downloaded they'll be cached by your browser so subsequent visits to the page will not require all the images to be downloaded again.

Jun 23, 2010 1:56 pm

very nice - what are you using to crete the photo gallery on that site?

Jun 23, 2010 3:27 pm

This site use the jQuery lightBox plugin. Others that we use include:

Fancybox (http://fancybox.net/)

Cycle (http://malsup.com/jquery/cycle/)

Galleria (http://galleria.aino.se/)

Jun 23, 2010 4:30 pm

The litebox is nice

does ech image or image group need to be coded into the page OR is it possible to have it refer to a directory and then display images that are placed in that directory. (somewhat like the random image or jquery cycle tags do)

I am looking for something that can ne updated by the end user without having to code the page

Jun 23, 2010 4:55 pm

In this case the logic is in the Photo Album lister:

Body Section:


  <script type="text/javascript" src="graphics/jquery_scripts/jquery.lightbox-0.5.js"></script>
  <script type="text/javascript">
    $(function() {$('#thumbPhotos a').lightBox({fixedNavigation:true});});
  </script>

  <div id="thumbPhotos"><ul>[[repeat]]</ul></div>

Item Section:


  <li><a href="[[image_file]]" title="[[title]]" style="background-image: url([[thumbnail_file]]);">[[title]]</a></li>