www.webdeveloper.com
Results 1 to 3 of 3

Thread: jquery.scrolldrag.js.txt

  1. #1
    Join Date
    Nov 2009
    Posts
    5

    jquery.scrolldrag.js.txt

    Hi guys.

    I'm trying to create a scroll drag function similar to the one you can find in googlemaps, photoshop and so on.

    I think I found a jQuery plugin that can do this for me:
    http://plugins.jquery.com/files/jque...olldrag.js.txt

    I'm only gonna have a huge jpg on my site, and I want the user to be able to "scroll drag" to see the image. Right now my site looks like this:

    Code:
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    		<title>Title</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	
    	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    	<script type="text/javascript" src="jquery.scrolldrag.js"></script>
    	<script type="text/javascript" src="jquery.imagefit.js"></script>
    	<script type="text/javascript" src="scrolltopcontrol.js"></script>
    	
    
        <script type="text/javascript">
         $(window).load(function(){
         $('#work').imagefit();
         $('#work').scrolltopcontrol();
         $('#work').scrolldrag();
         });
    
        </script>
        
      </head>
      <body>
        <div id="work" align="top"><img src="work.jpg" alt="worksample" width="1680" height="3000" border="0"/>
        </div>
      </body>
    </html>
    My question is:

    How do I use the jquery.scrolldrag.js.txt plugin? I just started with jquery so I don't know much about it at all. Any help or direction would be highly appreciated!!

    Should I use startDrag, onDrag, endDrag and so on In my html document?!

    thanks

  2. #2
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    I use the jQuery UI for a similar purpose in an ap I'm building. You'd just call the draggable method on your image, e.g. $('#myimg').draggable({ /* params */}); For syntax and examples see:

    http://jqueryui.com/demos/draggable/

  3. #3
    Join Date
    Nov 2009
    Posts
    5
    I tried the draggable thing too, but it doesn't seem like it can be mapped to the scrollbar?

    This is the site I'm working on: http://bit.ly/297LCa

    The only thing I need to add is a "dragger" so that the user have the possibility to drag to see the whole image. I still want to have the scrollbar there (if someone prefer the scrollbar instead) and I want it to be mapped so that when you drag, the scrollbar also moves.

    I thought this plugin would be easier to use:
    http://plugins.jquery.com/node/11307

    maybe not?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles