[Pro] Looking to enlarge images on hover

Freeway
1

I’m looking for an easy way to hover over these images and have the larger, more detailed version of the image appear so that viewers can really see the detail of these dolls.

http://www.serendipitydesignsbydiane.com/intotheforestnan.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

you could use ‘Lens Zoom’

http://www.elevateweb.co.uk/image-zoom/examples

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

This is great, but what do I do with the code? Sorry, but I’m a novice.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

If you are including scripts like these then the general rule of thumb is

1 - include the scripts in Page>Html Markup in the before slot

<script src='jquery-1.8.3.min.js'></script>
<script src='jquery.elevatezoom.js'></script>

2 - Define your image and its alternate (larger) image

<img id="img_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>

You would do this in FW by selecting the image and use Item >Extended to add the name:value pair of data-zoom-image:path/to/larger/image (use an action like Upload Stuff to upload the larger image or just FTP it to your site). While you are in Item>Extended give your image an ID - in this example we use the name:value pair of ID:img_01. Do this under the tab.

3 - Activate the script. In its basic form that would be done by including the following script in Page>html Markup in the before slot. Note that $(“#img_01”) has to match the image ID that you added above.

<script>
$("#img_01").elevateZoom();
</script>

4 - Put the kettle on.

You can configure this script way beyond the basic settings by add ing the parameters in the activating script i.e.

<script>
    $('#zoom_01').elevateZoom({
    zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
   }); 
</script>

This will show your large image inside the small image, change the cursor to a crosshair and add fade-in/ out effects.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

I’m looking for an easy way to hover over these images and have the larger, more detailed version of the image appear

Just realised we had this almost exact same discussion with you here a year ago.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

looks like David has answered your question have added link to FW file for you with lens zoom.

Hope this helps!

Matt.

https://www.dropbox.com/sh/gbwod1e5l37c046/AADIs24DLj_3Fd86LJDOIxpHa?dl=0

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Quick example here http://deltadesign.co/FW7Test/image-zoom.html

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options