INTEGRATING FANCY ZOOM SLIDE SHOW WITH CMSB - Aug 3rd, 2010


Thanks to Saginetic all his hard work

This tutorial will show you how to integrate a Gallery using FancyZoom

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

to display thumbnails and transition to full size images when clicked.

You can use many different galleries of similar nature such as lightbox, highslide, etc... It's all pretty much the
same. Take the info you learn here and apply accordingly.

In CMSB:

1.Create a Multiple Entry Section Editor called Photos (database = photos)

2.Make the following fields
Album Name textfield album
Date date date
Upload upload pictures (place “Caption" in the info1 box)

3.Make some albums and upload some pictures

In HTML:

1.Download the FancyZoom package, right here:


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

2.Using Transmit (or your favorite FTP client), upload the two folders inside the package to the root of your webserver.

3.Add the following two lines of code to the <head> section at the top of your web page(s):



<script src="/js-global/FancyZoom.js" type="text/javascript"></script>

<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>



4. Add onload="setupZoom()" inside your page's existing <body> tag. For example:



<body onload="setupZoom()">



5. Create a list viewer page (index.php) linking to each album.

6. Created links to images in your Details page (photos.php) will automatically zoom the images. For example:



<!-- STEP 2a: Display Uploads for field 'pictures' -->

<?PHP foreach ($photosRecord['pictures'] as $upload): ?>

<?PHP if ($upload['hasThumbnail']): ?>

<a href="<?PHP echo $upload['urlPath'] ?>" title="<?PHP echo $upload['info1'] ?>"/>

<img src="<?PHP echo $upload['urlPath'] ?>" width="100" border="0"/></a>

<?PHP elseif ($upload['isImage']): ?>

<a href="<?PHP echo $upload['urlPath'] ?>" title="<?PHP echo $upload['info1'] ?>"/>

<img src="<?PHP echo $upload['urlPath'] ?>" width="100" border="0"/></a>

<?PHP endif ?>
<?PHP endforeach ?>


The title tag in your href links to your caption (info1). The href for the thumbnails and full size image is the same
because you are not creating thumbnails. You are just setting the width of the preview image to 100 and it will zoom to
full size. You can use CMSB's thumbnail creation as well, just make sure you link the full-size image =
$upload['urlPath'] and not $upload['thumbUrlPath']

FancyZoom will use the size of the first element in the href to determine the initial size and location of the zoom.

FancyZoom works best if you wrap your href around a thumbnail, but also works from text-only links to images.

FancyZoom will attach itself to any jpg, gif, png, bmp, or tiff link in your page.

If you're a Javascript hacker, FancyZoom's flexible fadeIn and fadeOut functions can be used for all sorts of fun stuff.

If you explicitly don't want an image to zoom, add a rel="nozoom" tag to your href.

The complete post can be found here:

http://www.interactivetools.com/forum/Products_C2/CMS_Builder_F35/gforum.cgi?post=64222



The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact Interactive Tools for information on the downloading of the software or the purchasing of licenses.


Terms of Service