FancyZoom - Pop-out Images in Sandvox

You need Sandvox Pro to do this.

I have added a MobileMe site to show it works on there too. I found that I need to edit the links to the FancyZoom folders.

FancyZoom is a JavaScript to create the effect of images 'popping out' of the page rather than opening in a new window. It has been written by the developer of [Coda] and [Transmit] from [Panic.com] (links to their site). The link to the JavaScript is on his personal blog at:

[http://www.cabel.name/2008/02/fancyzoom-10.html]

Full instructions for using it are also at the FancyZoom site. It is free to use on non-commercial sites. If your website is commercial (i.e. makes you money), you need a license.

The advantage of FancyZoom is that it zoom's all image links once the code has been added to a page. You do not need to do any editing of the image link to activate the zoom effect like you do with [LightBox] (link to their site).

There are a couple of tricks to making it work on Sandvox Pro.
1. I found it easiest to upload the 'images-global' folder and 'js-global' folder to root folder of my site using an FTP client (Transmit).

2. I am currently using FancyZoom by inserting the code to the whole site. The menu path to open the Site Injection dialog is: Site > Site Code Injection... .

The advantage of this is that all newly created pages have the all the code added automatically, as well, Sandvox adds it to all pages currently in the Sandvox Site Document; this means I don't have to remember to add the code each time I add a page that I want an 'image zoom' on.

The are two bits of code to paste, one I paste into the links to the scripts in the'Head area' and the other into the 'Document Body' of the Code Injection dialog box. The code comes from the FancyZoom site. The following two image show where I paste the text in the 'Head area' and 'Document body':

site-code-injection-head

site-code-injection-body

3. The full size image needs to be upload to my site. This is the image that is 'zoomed out' onscreen when a link or thumbnail is clicked. This can be done in three ways.

3.1 The magnifier under an image on a Sandvox Photo pagelet or Photo page is an image link. If this type of page has FancyZoom code added, Sandvox automatically uploads the full size image; so nothing extra needs to be done.

3.2 Uploads the full size images to a folder using an FTP client and link to the full sized image from Sandvox. There are various image applications that also upload the image to a folder. I have successfully used [ImageWell], [Jing] and [Skitch] (links to their site).

3.3 Upload the full size image using Sandvox and the work-around technique outlined in this on the Image Map How To [upload the image map described in Steps 2-4 here].


Powered by Sandvox | Web hosting by A2 Hosting | Site by Neil Boyd cc by-nc-sa 2010