Rollover image coding query

**Garyreg** · 03-17-2013, 11:42 AM

Good morning

I am building a bank note website and want to have multiple images in a coloumn with their description, price, etc on the right. I have tried putting this info in a table but when clicking on the thumbnail to view a larger image the larger image appears and shunts all the table around and looks terrible. So i would like to insert this way of viewing a larger image used on ebay:

ebay.co.uk/itm/New-Zealand-1981-1985-100-Note-UNIFACE-COLOR-TRIAL-X-2-UNC-/151008001880?pt=AU_Notes&hash=item2328c73f58

Could someone supply me with the code to do this so I can copy this and put straight onto my page and just change the image names on the code provided? Many thanks for your time Gary

**Beverleyh** · 03-17-2013, 03:32 PM

Have you looked at the scripts available in the DD script library? There are many pre-made scripts there that you can use and all the code is provided upfront for you to copy and paste or download.

Choose something from the galleries and viewers category and follow the installation guide on the demo pages: http://www.dynamicdrive.com/dynamicindex4/indexb.html

If you need more help, please provide a link to your chosen DD script page and also a link to your own web page so we can see how you're setting it up. And if you are experiencing problems, please clearly state what issues you're having and what you'd like help with.

**Garyreg** · 03-17-2013, 03:51 PM

Hi many thanks for your time I am new to this so a bit slow thanks

**jscheuer1** · 03-17-2013, 04:18 PM

I think you might like:

http://www.dynamicdrive.com/dynamici...uredzoomer.htm

or:

http://www.dynamicdrive.com/dynamici...agemagnify.htm

or:

http://www.dynamicdrive.com/dynamici...owerzoomer.htm

or:

http://www.dynamicdrive.com/dynamici...magepanner.htm

**Garyreg** · 03-23-2013, 10:04 AM

Hi John

Many thanks for your thread I very much appreciate you reply the second option you sent http://www.dynamicdrive.com/dynamici...agemagnify.htm
is absolutley perfect but I cannot seem to get it to work still, below is the code from my site that i have put in from the instructions from the link, i have also saved jquery.magnifier.js and magnify.sur in a new folder. I have put the code in, then inserted the image afghanistana1 which is a small image i want to be able to rollover to then see the larger one. I would really appreciate you having a look to see what I am doing wrong many thanks Gary

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery.magnifier.js">

/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
</head>

<body>
<img src="<img src="../Users/Gary/Documents/Banknote website/Images/Afganistan/A1.jpg" alt="A1" longdesc="../Users/Gary/Documents/Banknote website/Images/Afganistan/A1.jpg" />" class="magnify" style="width:200px; height:150px" />

</body>
</html>

**Beverleyh** · 03-23-2013, 10:20 AM

You have double img tags in your markup - hopefully correcting those will fix things. Try...;

Code:

<img src="../Users/Gary/Documents/Banknote website/Images/Afganistan/A1.jpg" alt="A1" class="magnify" style="width:200px; height:150px" />

**Garyreg** · 03-23-2013, 11:00 AM

Originally Posted by Beverleyh

You have double img tags in your markup - hopefully correcting those will fix things. Try...;

Code:

<img src="../Users/Gary/Documents/Banknote website/Images/Afganistan/A1.jpg" alt="A1" class="magnify" style="width:200px; height:150px" />

Thanks very much for your reply i have changed the code to this but when opening in chrome it doesnt work thanks very much for your help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ureka</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery.magnifier.js">

/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
</head>

<body>
<img src="../Users/Gary/Documents/Banknote website/Images/Afganistan/A1.jpg" alt="A1" class="magnify" style="width:200px; height:150px" />
</body>
</html>

**Beverleyh** · 03-23-2013, 11:24 AM

Can you post a link to your live page please? It will make troubleshooting easier to check script/image paths, etc. You can always upload it to a test folder and delete it when the problem is sorted.

**Garyreg** · 03-23-2013, 11:42 AM

Hi is this what you need? if i am becoming annoying please say and i will leave you alone thnaks

file:///C:/Users/Gary/Documents/Banknote%20website/Images/Afganistan/ureka.html

**jscheuer1** · 03-23-2013, 12:16 PM

Nope, that's only on your computer, we cannot see that page. We need a link to a live demo of the problem.

If you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.