document.getElementByID for Feature Image Zoomer

[yanotcook]

1) Script Title: document.getElementByID for image path

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uredzoomer.htm

3) Describe problem:

I am not familiar with Javascript and DOM .

I have a list of images in the HTML list between <ul><li>.....</li></ul>

How can I make use of document.getElementByID to fetch the image path then pass this value to the "largetimage:" field?

[vwphillips]

	$('#image1').addimagezoom({
		zoomrange: [3, 10],
		magnifiersize: [300,300],
		magnifierpos: 'right',
		cursorshade: true,
		largeimage: document.getElementById('myimage').src //<-- No comma after last option!
        //or
	   //	largeimage: document.getElementById('mylink').href //<-- No comma after last option!
	})

[yanotcook]

		largeimage: document.getElementById('myimage').src //<-- No comma after last option!
        //or
	   //	largeimage: document.getElementById('mylink').href //<-- No comma after last option!
	})

Thanks for your kindly reply, Philip!

Could you please give me an example to define "myimage" of "mylink" in the <ul> or <li> tags?

I am a stupid fool for Javascript.

[vwphillips]

<ul>
<li><img id="myimage" src="MyImage.jpg" /></li>
<li><a id="mylink" href="MyImage.jpg" ></a></li>
</ul>

[yanotcook]

<ul>
<li><img id="myimage" src="MyImage.jpg" /></li>
<li><a id="mylink" href="MyImage.jpg" ></a></li>
</ul>

Thanks for your reply Philips!

Is that OK for multi <li> rows commonly use a same ID of either "myimage" or "mylink"?

I tried this Feature Image Zoomer works with Carousel (A big picture above the thumbnail with rows of <li> images </li> ).

When click a picture in this thumbnail <li> ...</li>, it is sent to the big picutre. Whenever mouse-over the big picutre, it will zoom. Can common use of the same ID be used for various images in the above thumbnail?

DOM and javascript are to tricky to me. Sorry about my foolish.

[yanotcook]

Hello, Philips!

It seems that you have done this before

http://www.dynamicdrive.com/forums/s...ad.php?t=66609

[vwphillips]

I understand now

do you want this modified so it pans on mousemove of the original image and do you want the cursorshade?

[yanotcook]

I understand now

do you want this modified so it pans on mousemove of the original image and do you want the cursorshade?

I am not sure what you see my expected effect, Phillips.

I tried to make a list of images in Pan or Thumbnail in <li><img id=....</li> list. When I click one row of the <li> small image ...</li>. It will show as the big/large picture. Whenever mouse over the large/big picture, another bigger/larger Zoom picture pop-up as the same effect as "Feature Imager Zoomer".

You last "master piece" is just zooming itself inside the large/big picture frame. That is the difference with your one verse my expected one.

That's way for my case according the your "myimage" or "mylink" whether works fine if the "id" in the <li>...</li> can be the same value?

[yanotcook]

I understand now

do you want this modified so it pans on mousemove of the original image and do you want the cursorshade?

Yes, you are right, Phillips!

My expected effect is "cursorshade" for largeimage Addimagezoom.

[vwphillips]

http://www.vicsjavascripts.org.uk/AA...an/120106B.htm