How Feature-Image-Zoom and Thumbnail Viewer II work like JQZoom
I am trying to combine
1) Feature Imager Zoom
http://www.dynamicdrive.com/dynamici...uredzoomer.htm
2) Image Thumbnail Viewer II
http://www.dynamicdrive.com/dynamici...thumbnail2.htm
Both work fine individually, but Feature Image Zoomer cannot update to zoom whenver the thumbnail switch to another picture.
My code is as following:
==========BOF==================
<!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" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript" src="./js/jquery-1.7.2.min.js">
</script>
<script type="text/javascript" src="./thumbnailviewer2.js">
//<![CDATA[
/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progidXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}
/*]]>*/
</style>
<script type="text/javascript" src="featuredimagezoomer.js">
//<![CDATA[
/***********************************************
* Featured Image Zoomer (w/ adjustable power)- By 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>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function($){
$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: document.getElementById('loadarea').src
})
$('#image2').addimagezoom({
zoomrange: [5, 5],
magnifiersize: [400,400],
magnifierpos: 'right',
cursorshade: true,
cursorshadecolor: 'pink',
cursorshadeopacity: 0.3,
cursorshadeborder: '1px solid red',
largeimage: document.images.big2.src
})
})
function imgset1(imgname1)
{
document.getElementById('loadarea').src = imgname1;
}
function imgset2(imgname2)
{
document.images.big2.src = imgname2;
}
//]]>
</script>
<title>Test Thumbnail Image Zoomer</title>
</head>
<body>
<div id="loadarea" class="c1"><img id="image1" name="big1" title="Big Image" alt="main pic" src="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" /></div>
<br />
<a href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="The Universe is just waiting to be explored (Mouse Over the above to get Zoom)" class="c2">Saturn #1 (Mouse Over this link to enlarge in above)</a><br />
<a href="http://www.nasa.gov/images/content/168177main_image_feature_749_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea,link:http://dynamicdrive.com" title="Dancing on the Moon (Mouse Over the above to get Zoom)" class="c3">The Moon #1 (Mouse Over this link to enlarge in above)</a><br />
<br />
<a href="http://www.nasa.gov/images/content/166615main_image_feature_733_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea2,trigger:click,preload:none,fx:reveal" title="The Universe is just waiting to be explored">Saturn #2 (click this link to enlarge at below)</a><br />
<a href="http://www.nasa.gov/images/content/168291main_image_feature_750_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea2,trigger:click,preload:none,fx:none" title="Dancing on the Moon">The Moon #2 (click this link to enlarge)</a><br />
<br />
Then Mouse Over below to zoom!!<br />
<div id="loadarea2"><img id="image2" name="big2" title="Big Image" alt="main pic" src="http://www.nasa.gov/images/content/166615main_image_feature_733_ys_4.jpg" /></div>
</body>
</html>
=============EOF=================
It will be appreciated, if any body give me a hint or link which sort out the above.
Best Regards,
Yan.
CSS Codes
Reply With Quote
Originally Posted by vwphillips
Bookmarks