PDA

View Full Version : Image Panner without Zoom function?



DonpK
02-27-2013, 03:37 PM
I'd like to try the Simple Image Panner and Zoomer (http://www.dynamicdrive.com/dynamicindex4/imagepanner.htm) without the zoomer funtion. Since my JavaScript skills are extremely basic, I'd like to start out simple.

Is the .js file without the zoomer code available somewhere? If not, what lines should I delete to leave the pan capability only?

Thanks,
Don

jscheuer1
02-27-2013, 03:51 PM
From Step 2 on the demo page:


<div class="pancontainer" data-orient="center" data-canzoom="yes" style="width:400px; height:300px;">
<img src="http://i44.tinypic.com/1hezvm.jpg" style="width:700px; height:525px" />
</div>

Get rid of the red part. According to the instructions, that's all you have to do.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

DonpK
02-27-2013, 04:48 PM
Thanks, John, for your reply.

Here (http://www.robbinsfarmpark.org/index-PanoramaTest) is the page I would like to use the pan function on. As you can see, our park affords a great view of the city. If I can incorporate the pan feature, I can use a closer photo (and wider) of the city showing more detail.

At the moment, this is a test page where I've added some mouse-over tooltips to identify certain landmarks. I'd like to keep that capability along with the panning.

I'm a beginner with JavaScript, so we'll see how far I get. I'll get back if I have questions.

Don

DonpK
03-26-2013, 12:52 AM
John,

Thanks again for your help. Here (http://www.robbinsfarmpark.org/index-Panner) is the page I used it on. Your panner script worked right out of the box, which is fortunate, given my lack of javascript experience. It really allows the visitor to our site to appreciate the spectacular view from the park.

Is there some way to set what part of the image is zoomed into when the "+" button is pressed? You'll note it seems to jump to the upper left of the image, instead of straight ahead.

Don

vwphillips
03-26-2013, 11:14 AM
i am suggesting an alternative as I am interested in adding the tool tip functionality
if you provide an image map with the toot tip positions I can implement the tool tips requirement

http://www.vicsjavascripts.org.uk/ImageZoomPanIII/130326A.htm

DonpK
03-26-2013, 12:11 PM
i am suggesting an alternative as I am interested in adding the tool tip functionality
if you provide an image map with the toot tip positions I can implement the tool tips requirement

Before trying the panner version, I started on an index map version (http://www.robbinsfarmpark.org/index-PanoramaTest) of the same photo, although the image was not as wide since it was not panable.

I'm not quite clear on what you are suggesting. Do you have on your site an image map script with tooltip capability which is also panable? Or are you thinking of writing one?

Don

vwphillips
03-26-2013, 02:59 PM
It is just about written, I need an image map for the *1 zoom to test it

The script adjusts the area coordinates to the zoom

DonpK
03-26-2013, 05:30 PM
Sounds good. Let me know when you have something ready, unless you need something more from me.

Don

vwphillips
03-27-2013, 12:10 AM
I need an image map for your image for the *1 zoom to test it

DonpK
03-27-2013, 01:53 AM
You can copy the image on this page (http://www.robbinsfarmpark.org/index-PanoramaTest) The actual indexing is done in CSS in this format:

HTML:
<li id="hancockbuilding"><span><a>John Hancock Building</a></span>
</li>
CSS:
#hancockbuilding { /*-- Location of object in background image--*/
top: 10px;
left: 830px;
}
li#hancockbuilding { /*-- Box size around object in background image--*/
width: 15px;
height: 70px;
}

vwphillips
03-27-2013, 03:13 PM
you will need an image map

http://www.vicsjavascripts.org.uk/ImageZoomPanIII/130326C.htm

has two map areas marked on the top image(use the bottom one)

please read the application notes

especially


** Image Map Captions.
Where the image has been assigned an image map captions may be assigned for each image map area.
The caption elements must be defined in the HTML code nested in a 'wrapper' DIV and must be assigned a common class name.
The 'wrapper' DIV must be assigned a unique ID name defined in the Captions option 'WrapperID'
and the common class defined in the Captions option 'CommonClass'.
The default condition is to display captions centered in the 'wrapper' DIV
however where the Captions option 'Sticky' is specified as false the caption will be displayed ajacent to the map area.
The script assigns a CSS style position of 'absolute' and positions each of the the caption elements,
the size, appearence and z-Index must be specified by CSS class rule.

DonpK
03-27-2013, 06:07 PM
Thanks, Vic, for your answer.

It's not clear to me what I should do with the page you linked, http://www.vicsjavascripts.org.uk/Im...II/130326C.htm. It contains two images at the top and blank input fields and a text area with no labels at the bottom. When I look at the source code for the page, I do the the application notes.

As I mentioned earlier, my webpage composition styles are pretty basic, so rather than take up any more of your time asking a series of questions, why don't I try out the script once you get it posted on your website.

Thanks,
Don

vwphillips
03-28-2013, 03:12 PM
published version

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