PDA

View Full Version : document.getElementByID for Feature Image Zoomer



yanotcook
01-02-2012, 06:26 PM
1) Script Title: document.getElementByID for image path

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.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?

:confused:

vwphillips
01-03-2012, 11:10 AM
$('#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
01-04-2012, 04:06 AM
:confused:


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
01-04-2012, 02:05 PM
<ul>
<li><img id="myimage" src="MyImage.jpg" /></li>
<li><a id="mylink" href="MyImage.jpg" ></a></li>
</ul>

yanotcook
01-04-2012, 06:03 PM
<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.

:confused:

yanotcook
01-05-2012, 06:14 PM
Hello, Philips!

It seems that you have done this before

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

:D

vwphillips
01-06-2012, 09:54 AM
I understand now

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

yanotcook
01-06-2012, 03:06 PM
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?

:confused:

yanotcook
01-06-2012, 03:16 PM
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
01-07-2012, 12:23 PM
http://www.vicsjavascripts.org.uk/AAImageViewPan/120106B.htm

yanotcook
01-08-2012, 02:39 PM
Thanks Phillips!

I will try.
:)