1

I have gallery on my page and I would like to add a support for left/right arrow for going between slides. The template uses Galleria Folio Theme.

Link is here: http://url.kybernaut.cz/19

Code of navigation is following:

<div class="galleria-image-nav">
  <div class="galleria-image-nav-right" style="right: -50px; transition: none;"></div>
  <div class="galleria-image-nav-left" style="left: -50px; transition: none;"></div>
</div>

I've got inspirated here Press left and right arrow to change image? But it didn't seem to work at all, code:

jQuery(document).keypress(function (e){ 
    if(e.keyCode == 37) // left arrow
    {
        // your action here, for example
        jQuery('.galleria-image-nav-left').click();
    }
    else if(e.keyCode == 39)    // right arrow
    { 
        // your action here, for example
        jQuery('.galleria-image-nav-right').click();
    }

Could anybody help me, please? It's a wordpress template (so non-conflict mode) and script is loaded correctly, but not working. Thanks a lot for your help.

Community
  • 1
  • 1
Karolína Vyskočilová
  • 1,305
  • 1
  • 18
  • 29

2 Answers2

1

You should be able to use the Galleria API:

Galleria.ready(function() {
    this.attachKeyboard({
        right: this.next,
        left: this.prev
    });
});

Support Reference

API Docs

Derek
  • 3,438
  • 1
  • 17
  • 35
  • Cool. Thanks, but where should I place it? I've added it into my custom.js but it writes my that "Galleria is not defined". – Karolína Vyskočilová Aug 28 '15 at 21:52
  • @kybernaut.cz It needs to run after the Galleria object is initialized. I would expect placing it in a `jQuery(document).ready` block would solve the issue, otherwise load the script after the Galleria script. – Derek Aug 31 '15 at 15:36
  • I think it's done like that but still not working... Here are the functions.js, it should be initialized somewhere probably, but I'm not able to find it out :( http://pastebin.com/nx9ehPJr – Karolína Vyskočilová Sep 06 '15 at 20:36
0

I encountered the same problem with a download of Galleria 1.6.1. If the navigation images don't appear, it's likely the galleria.folio.css file has incorrect formatting of its url calls. For example: url(left.png) should be formatted as url('left.png'). Placing single quotes around all of the image file names should solve the problem. It seems that some sources of Galleria 1.6.1 have this corrected by embedding images in the css instead of linking to files.

Also, make sure that you include a line similar to

<link rel="stylesheet" type="text/css" href="galleria-1.6.1/src/themes/folio/galleria.folio.css" />

in the <head> statement of your html file to load the folio css file correctly.

user6026720
  • 524
  • 5
  • 4