JQuery Reel Formatter

Module Type: 
External Support
Drupal Project Link
Sitewide Tags: 
Modules

The jQuery reel formatter allows you to use the Jquery reel plugin to output your images as a panorama or a 360° view of a place or object.

Step-by-Step Instructions

Step 1 - Create the Panoramic Image

  • Take the photo using a panoramic image capture on your phone or other mobile device. 

Step 2 - Enable and Configure the jQuery Reel Formatter Module

  1. Modules > jQuery Reel Module
  2. Create an image field for the Content Type where you want to display the image in a panoramic view. 
  3. Click on Manage Display after the field is created and configure the image
    • Select Image > jQuery Reel. The configuration display changes next to the gear.
    • Click on the Gear to reconfigure; most importantly change the following options*:
      • Spacing - indicates space between frames on reel.
      • Stitched - for gradhousing.yale.edu we used 10,000 to as the stitched number.
      • See http://gradhousing.yale.edu/buildings/254-prospect-street-medium-sized-room
        Jquery Reel options
        Footage: 10
        Frame: 1
        Frames: 60
        Hint: 
        Footage: True
        Indicator size: 10
        Plugin class: 
        Loops: False
        Frame spacing: 10
        Stitched size: 10000
        Clockwise: False
        Autostart (seconds): No autostart
        Speed: 0

Step 3 - Add the Image to your page

  1. Create content  Content > Add Content > Your Content Type
  2. Upload the image in the Panoramic Image field you just created. 
  3. Save the page. You should be able to drag the image to move around from one side to the other. 

*Important Note: The configuration here was used for the purpose of  http://gradhousing.yale.edu/buildings/254-prospect-street-medium-sized-room. You can learn more about the jQuery Reel at  http://jquery.vostrel.cz/reel