Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Ajax draggable image (google maps style)

Posted on 2009-05-06
2
Medium Priority
?
500 Views
Last Modified: 2012-06-21
Hi all,

I have a quick project that I'm doing for a relative.   The problem is... I know little (almost nothing) ajax - or javascript for that matter - but I'm more than willing to learn in the process.

He has several hi-res images that he would like to use for a website and he wants to display them in a small div in a website (let's say 600px by 400px) and use the same functionality of google maps where you can just drag the map - image in our case - to view the rest of the image that is not being displayed in the visible div.

I won't ask for any of you experts to write me a tutorial or the code to acomplish what we need - if you want to do such a thing well...  I won't complaint at all... LOL - What I actually need is for you to point me in the right direction.  

Should I try with Scriptaculous, Mootools, Jquery?

Which kind of effects from those libraries should I use?

Is there a script that already does that?

Or even better...  is there a plugin, extension or component for a CMS that does that and that we can use so he can actually update the contents of the site on his own?

We're probably going to use Wordpress,  and as far as I know there aren't any plugins to do this and I'm not sure if I can make it so that everytime he creates a new post or a new page in wordpress I could make any image displayed in this way automatically...  

But if you know of any other CMS that already has a plugin, extension or component that can provide us with this functionality we well be happy to give a try...  We haven't made a final decision on Wordpress so there's flexibility.

Thanks in advance for your help.
0
Comment
Question by:M-Geek
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 14

Accepted Solution

by:
ziffgone earned 2000 total points
ID: 24331838
This one's cool. The demo uses extra large image files, not sure yours will be this big but here's a working script using the jQuery framework:

Development Page:
http://pupunzi.wordpress.com/2009/01/20/mbimgnavigator/

Demo Page:
http://www.open-lab.com/mb.ideas/index.html#mbImgNavigator

What I think is cool is you can navigate the image by dragging it or by dragging a little magnifier located in one of the corners of the container DIv. Also, upon double clicking the image, it resizes to fit in the container Div.

Uses the following scripts:

jquery:
http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js

ui.core.js
http://jqueryui.com/download

Check the boxes for ui.core and draggable.



Pretty snaggy!

Regards...
0
 
LVL 1

Author Closing Comment

by:M-Geek
ID: 31578850
Thank you very much!

While I don't need the small navigator box at the bottom of the image this has definitely pointed me in the correct direction.  I'm now learning anything there's to know about the draggable effect in jquery.

Thanks for taking the time to answer my question.

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question