How can I add a scroll bar to a photo that is much wider than the page?


Create a folder for the panoramic pictures on your local drive and move the files

  1. 1. Prepare your panoramic photos in JPEG or other web-compatible format.

  2. 2. Open your local site directory in your finder.

  3. 3. Navigate down through the folders to where your “Main Sitename Folder” is.

  4. 4.Create a new folder “pano” (or whatever name you like) in the Sites folder.

  5. 5. Place the panoramic pics in this folder.

  6. 6. In the finder, make note of the height of each as given in the Get Info dialog box for the files.


Insert the IFRAME snippet code into your iWeb page:

  1. 7. At the bottom of the iWeb window, select Web Widgets > HTML Snippet. A box will appear on your page.

  2. 8. Paste the following snippet into the dialog box:


<IFRAME SRC ="http://your_URL/pano/panpicture.jpg"WIDTH="widpx" HEIGHT="hgtpx" FRAMEBORDER="0" MARGINWIDTH ="0px" MARGINHEIGHT="0px" SCROLLING="yes" >

</IFRAME>


  1. 9. Edit the snippet HTML by substituting your own URL: your_URL, panoramic file folder name: pano and file name: panpicture.jpg that was added in the first section above. Set the value widpx = the content width of your page as shown in the iWeb page inspector. hgtpx = the height of the panoramic picture in pixels plus 15 to allow for the height of the scroll bar. Example: if your pan image is 2200px wide and 350px high, insert the value 365px.

  2. 10. Save your page and publish.


After publishing you can view and test the page. You may add as many of these as you like, one snippet for each, however, be sensitive to the size of files and the number you add to a page as download times could be long. To add additional pictures you can copy and paste the same object and edit the snippet to match the other file names and heights. I have used pictures as wide as 6000 pixels. I don’t know if there is a browser-based limit to this width.

Scroll a Panoramic Photo