Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Next/Previous image using Arrow Keys on Keyboard on a simple image slider?

    I have created a simple Image Slider provided by Ivan Lazarevic and was wondering how to add Next/Previous navigation to it, by using the arrow keys left and right on the keyboard. I've made some tests but can't seem to get it to work properly. I would also like the image to change to the next one when clicking on it. Would appreciate any help on the way.

    Jquery:
    $('#thumbs').delegate('img','click', function(){ $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large')); $('#description').html($(this).attr('alt')); });


    HTML:
    <div id="gallery">
    <div id="panel">
    <img id="largeImage" src="image_01_large.jpg" />
    </div>

    <div id="thumbs">
    <img src="image_01_thumb.jpg" />
    <img src="image_02_thumb.jpg" />

    </div>

  • #2
    Regular Coder
    Join Date
    Sep 2002
    Posts
    429
    Thanks
    0
    Thanked 20 Times in 20 Posts
    don't know about jquery, but you use cross browser keyboard event capture.
    NO Limits!! www.dhcreationstation.com
    ------------------------------------------------------------
    Broken items wanted for tinkerin'! PostItNow@BrokenEquipment.com

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts
    Consider this site for additional information...
    http://javascript.info/tutorial/keyboard-events

    There are many others...

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,762
    Thanks
    55
    Thanked 517 Times in 514 Posts
    jQuery has the event.which property which gives cross-browser support...
    http://api.jquery.com/event.which/


  •  

    Posting Permissions

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