Log in

View Full Version : 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/dynamicindex4/featuredzoomer.htm

or:

http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm

or:

http://www.dynamicdrive.com/dynamicindex4/powerzoomer.htm

or:

http://www.dynamicdrive.com/dynamicindex4/imagepanner.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/dynamicindex4/imagemagnify.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...;
<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
You have double img tags in your markup - hopefully correcting those will fix things. Try...;
<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.
Garyreg
03-23-2013, 01:02 PM
Hi thanks very much for your time but i am currently building the website and not launched as yet so cannot send you a link. I just want to have a thumbnail and be able to enlarge it when rolled over or magnify i will leave jquery alone as i cannot get to grips with and see if i can do it in dreamweaver a s a moise over effect thanks for your time
Beverleyh
03-23-2013, 01:47 PM
Do you have access to a web host? If you're making a website then hopefully you already do. We're not asking to see the final product with all the bells and whistles - just a simple, stripped-down test page with this particular script in so we can try to help you figure out where the problem is. The demo link that John posted works fine but we don't know what's different in your page until we actually see it in full context. Image/script paths could be wrong. You might need to change file name case to work with an Apache server. We don't know how best to help you without all the information upfront and part of that is having access to your live web page.
jscheuer1
03-23-2013, 03:17 PM
If I had to guess I would say that the jquery.magnifier.js file is missing. If so, you would have to download it from the demo page or the link below and put it in the same folder as your page: (right click and 'Save As'):

jquery.magnifier.js (http://www.dynamicdrive.com/dynamicindex4/jquery.magnifier.js)

But Beverleyh is right. If you're still having problems, we would need to see a live effort. It doesn't have to be perfect. All it has to do is show what you have so far, like the code in your post would be fine as long as the image(s) and script are on the server.