PDA

View Full Version : How Feature-Image-Zoom and Thumbnail Viewer II work like JQZoom



yanotcook
06-02-2012, 10:40 AM
I am trying to combine
1) Feature Imager Zoom
http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm
2) Image Thumbnail Viewer II
http://www.dynamicdrive.com/dynamicindex4/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: progid:DXImageTransform.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.
:confused:

vwphillips
06-03-2012, 08:25 AM
I did have a look at this but it is difficult to swap the images with that script

you cold have a look at example 7 on this page

http://www.vicsjavascripts.org.uk/ImageViewerII/ImageViewerII.htm

yanotcook
06-03-2012, 08:53 AM
I did have a look at this but it is difficult to swap the images with that script

you cold have a look at example 7 on this page

http://www.vicsjavascripts.org.uk/ImageViewerII/ImageViewerII.htm
Thanks vwphillips for your information!

Both Example 6 and 7 are my expectations.

It seems that Feature Image Zoomer is No Longer be used in these source code.

yanotcook
06-03-2012, 06:12 PM
Thanks vwphillips for such great source!

It looks like “Feature Image Zoomer” just only need single size image files for thumbnail and enlargement for zooming. Together with further zooming through the scroll-wheel of the mouse.

Can I have one more thing to know how to resize and offset the zoom viewer of the examples 6 and 7? (“Tones of” codes need much time for a Javascript beginner to grasp. And execuse me for being stupid).

Cheers!!!

Best regards,

YaNotCook.:)


I did have a look at this but it is difficult to swap the images with that script

you cold have a look at example 7 on this page

http://www.vicsjavascripts.org.uk/ImageViewerII/ImageViewerII.htm

(Does any donation accept PayPAL?)
:confused::p