Instructions for zoom tool simplified please ?

  erkmatrix 14:52 31 Jul 08
Locked

Hi I would if anyone can explain what this would mean I'd have to do. I found a image zoom tool called jQZoom

click here

It looks a bit like click here and looks perfect for a ecommerce site to show detail of my artwork.

the instructions confuse me cause i don't know what the steps , could anyone simplfy what they mean step by step. I'm using dreamweaver and only understand basic css


1)Simply include the jqzoom.css in your page.link href="your_path/jqzoom.css" rel="stylesheet" type="text/css" media="screen"

2)Include jQzoom and jQuery code

script src="your_path/jquery.js" type="text/javascript"> /script>
script src="your_path/jquery.jqzoom.js" type="text/javascript"> /script>

3)Now create a container(div is better!!) for the image or images you would like to zoom and assign to it the “jqzoom” class.Specify for each image,the jqimg attribute,to wich you are going to assign the big image path.

p class="jqzoom"> img src="images/shoe4_small.jpg" alt="shoe" jqimg="images/shoe4_big.jpg" /> /p>

4)Load the plugin at window load

$(document).ready(function(){
$(".jqzoom").jqueryzoom();
});

You can also specify some options:

$(document).ready(function(){
$(".jqzoom").jqueryzoom({
xzoom: 300, //zooming div default width(default width value is 200)
yzoom: 300, //zooming div default width(default height value is 200)
offset: 40, //zooming div default offset(default offset value is 10)
position: "right", //zooming div position(default position value is "right")
preload:1 // by default preload of big images is 1
lens:1 // by default the lens is 1
});
});

  Kemistri 16:35 31 Jul 08

Specifically, which parts are causing you difficulty? The text instructions could be a little better worded, but it's all straightforward stuff. If it doesn't work for you, try one of the other jQuery-based libraries. If you have no knowledge of JS, you might benefit from a book.

  erkmatrix 18:16 31 Jul 08

what does Load the plugin at window load mean, how would I do that.

  Kemistri 18:29 31 Jul 08

JS can be passed to a client on the occurrence of certain events, such as a hover. That code loads the script when the client processes the HTML in which it's contained.

  erkmatrix 10:04 01 Aug 08

where would I put the code though, I understand the first 3 just number 4, don't get where I would put this code

  Kemistri 13:45 01 Aug 08

In your script tags within the head.
<script type="text/javascript">
</script>

  erkmatrix 15:36 02 Aug 08

Cheers Kemistri, got it working and it looks great, just what I was after. Thanks again for the help

This thread is now locked and can not be replied to.

Nintendo Switch review: Hands-on with the intuitive modular console and its disappointing games…

1995-2015: How technology has changed the world in 20 years

Method Studios' title sequence for BBC series Taboo is truly unsettling

Best Pages for iOS tips | How to use Pages for iPad & iPhone: 6 simple tips to get more out of…