Install Notes for Rollover/Zoom

Jquery installation

For X2 and X4 users only - Paste this DOCTYPE in page or master page preamble

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

All users - Paste the following to page head.

<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

   $(document).ready(function() {

       $(".zoom").hover(function() {

           // hover in to enlarge image

           $(this).parent().parent().css("z-index", 1);

           $(this).stop(true,true).animate({

              height: "150%",

              width: "150%",

              left: "-=25%",

              top: "-=25%"

           }, "fast");

       }, function() {

           // hover out and image returns to previous size

           $(this).parent().parent().css("z-index", 0);

           $(this).stop(true,true).animate({

               height: "100%",

               width: "100%",

               left: "+=25%",

              top: "+=25%"

           }, "fast");

       });

   });

</script>


<style type="text/css">

.zoom {

position: relative;

-ms-interpolation-mode: bicubic;

     }

</style>

Reduce your images in size so that when zoom is used they do not exceed their normal size. X6 Only - - place each image on a panel. Apply an action of z-index (just accept the default) to the panel.


Right click each image>attach HTML and paste class="zoom" just before  __AddCode="here", at the end of the line beginning <img src=


You now should have a working page.

How to change % zoom

Change to anything you want but probably from 110% upwards of the original size on the page.


Example: zoom from 100% to 140% (a 40% increase in size)

In hover in, in the script above change height and width to 140.

To calculate left and top numbers = (140 - 100) / 2 = 20 . Change the numbers to this value.

In hover out, in the script above change left and top to 20 also.


CSS installation

The only possible drawback using this is the IE7 bug which will not render z-index on hover. In other browsers it’s OK. What will happen is that some of the images with zoom will open partially behind images next to them depending on amount of zoom and proximity to each other. The decision is yours.

Paste the following to page or master page style sheet.

.zoom1{

-ms-interpolation-mode: bicubic;

}


.zoom1:hover {

position: relative;

width:150%;

height:150%;

margin-left: -25%;

margin-top: -25%;

-ms-interpolation-mode: bicubic;

z-index:10;

}

Reduce your images in size so that when zoom is used they do not exceed their normal size. Place each image on a panel. Apply an action of z-index (just accept the default) to the panel.


Right click each image>attach HTML and paste class="zoom1" just before  __AddCode="here", at the end of the line beginning <img src=


You now should have a working page.

How to change % zoom

See the above example and use the numbers from hover in

Two types of install are available. Use either Jquery or CSS. Details listed below.