Instructions for zoom tool simplified please ?

  erkmatrix 14:52 31 Jul 2008
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 2008

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 2008

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

  Kemistri 18:29 31 Jul 2008

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 2008

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 2008

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

  erkmatrix 15:36 02 Aug 2008

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.

Elsewhere on IDG sites

The Evil Within 2 review-in-progress

Adobe shows still-in-development tools, including automatically colourising black-and-white photos

iPhone X news: Release date, price, new features & specs

Comment transformer un iPhone en borne Wi-Fi ?