Keyboard control for the slideshow

Audy's Avatar

Audy

17 Apr, 2012 09:25 AM

The basic functionality these days. Would be great if you coudl include it.

  1. Support Staff 1 Posted by Mikael on 23 Apr, 2012 08:15 AM

    Mikael's Avatar

    I would not deem this a necessary feature.
    Also because this can really easily be added in your own theme. Just include a jQuery plugin, a few lines of jQuery code to attach the events to your page and you're done.

  2. 2 Posted by Audy on 30 Apr, 2012 03:21 PM

    Audy's Avatar

    Hey mikael, Yup that a gud suggestion, and I'm trying it with th keystroke queries. But I'm unable to move th slideshow to next image. can you pls help with the script. :)

  3. Support Staff 3 Posted by Mikael on 04 May, 2012 08:51 AM

    Mikael's Avatar

    Post what you've done so far (preferably a link), then I can help you out from there.

  4. 4 Posted by Audy on 07 May, 2012 09:15 AM

    Audy's Avatar

    Hi Mikael,
    Im using the below jquery. But the document(file) location is something im struggling with. What would be the function to call the prev/next image?

    http://www.abstruseeyes.tk/portfolio
  5. Support Staff 5 Posted by Mikael on 07 May, 2012 09:18 AM

    Mikael's Avatar

    What jQuery? Don't see anything on the page...

  6. 6 Posted by audy on 07 May, 2012 09:20 AM

    audy's Avatar

    script type="text/javascript">
    document.onkeydown=kbdNav;
    function kbdNav(e)
    { if(window.event)
    { e=window.event; } k=e.keyCode ? e.keyCode : e.which ? e.which : null;
    if(k==0x25)
    { document.location='#{$project['slug']}-{$group['num']} .prev'; }
    } if(k==0x26)
    { document.location='http://www.abstruseeyes.tk/portfolio'; } if(k==0x27)
    { document.location='#{$project['slug']}-{$group['num']} .next, #{$project['slug']}-{$group['num']} .file'; } </script

  7. 7 Posted by audy on 07 May, 2012 09:23 AM

    audy's Avatar

    Apologies! Copied the entire script whihc made the html page run it, instead of just displaying as text... (duh!)

  8. Support Staff 8 Posted by Mikael on 07 May, 2012 09:23 AM

    Mikael's Avatar

    Ok, for one, that is not jQuery, that is regular Javascript.

    And document.location will change the location for the browser, meaning it will redirect the user to a new page, or location. You'll want to use jQuery to bind the arrow keys to the next/prev function of the slideshow next/prev buttons.

    I think another use did this recently, I will see if I can find the code. In the meantime you can try Googling "jQuery arrow key slideshow with cycle plugin"

  9. 9 Posted by Audy on 07 May, 2012 02:49 PM

    Audy's Avatar

    Ah! confused jquery and jscripts.. thanks for clarifying MIkael. I did try previously to include some 3rd party jquery plugins, but dint like the image compression/framing, also couldn't manage the file thumbnail display part and some other features.
    Im happy with the current slideshow plugin inbuilt in secretary and wanted to just include the keyboard navigation using the keystroke jscripts.

    So is it possible?? or do i have to get a completely new plugin to get this feature?

    Your expert comments are helpful Mikael, thank you so much for the help! :)

  10. 10 Posted by Asger Behncke J... on 17 Jul, 2012 10:01 AM

    Asger Behncke Jacobsen's Avatar

    I'm using this jQuery to bind the keyboard arrows to 'cycling' through the slideshow. Note though that this will target every slideshow on the page.

    $(document).keydown(function(e){
        if (e.keyCode == 37)
            $('.slides').cycle('prev');
         else if (e.keyCode == 39)
            $('.slides').cycle('next');
    });
    
  11. 11 Posted by Audy on 30 Sep, 2012 03:42 PM

    Audy's Avatar

    Thanks Asger!!

    Im trying to include your query into the "projects_view.html" template. but nothing seems to happening. Could you please gv me more details on how and where to implement the above jquery.

    Appreciate your help mate!

  12. 12 Posted by BCC on 16 Feb, 2014 01:58 PM

    BCC's Avatar

    He used between that code that he gave, and did this in templates/projects_view.html

  13. 13 Posted by BCC on 16 Feb, 2014 01:59 PM

    BCC's Avatar


    in
    templates/projects_view.html

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac