disable keyboard events in sliders

[Oberon]

I am using a Slider on my home page and a Post Grid Slider on another page.

Both pages use a slimbox plugin on top of NextGEN Gallery where I want the gallery to respond to the keyboard arrow keys. However, the keyboard events are also handled by the JumpStart sliders that are visible behind the slimbox overlay and this is really distracting.

Is there a way to disable the keyboard events in the different sliders? I can’t find the code where the keyboard events are handled, so I’m not sure how to disable them.

Thanks for your help.

http://sugarloafphoto.com (home page and “Image Galleries” page)

Topic

[askwpgirl]

Hi Oberon,

I’m a fellow NextGEN Gallery and Jump Start user.

I was able to solve this problem as follows:

1 – The slider used by Jump Start is the Flexslider by Woo Themes. It’s advanced documentation is here:
http://www.woothemes.com/flexslider/

2 – I found the function for the Flexslider in Jump Start here:
jumpstart > framework > functions > helpers.php

3 – I copied lines 807 to 884 to the TOP of my child theme’s functions.php file (be sure to NOT include the IF statement on line 806 or the final bracket on 885).

4 – I inserted the following flexslider option I found on the Woo Themes site to the top of the function where it says, UseCSS, video, smoothHeight, prevText, nextText, animation, etc:

keyboard: false,

5 – Save and upload the file and the keyboard events are disabled for the Flexslider.

Let me know if that works.

[Oberon]

Yes, that did it!
Thanks for pointing out where the sliders come from – that is really helpful.
I brought in the function to my functions.php file, made the change and now no more keyboard events!!

Thanks so much for your help!

[Oberon]

Hey, since you use NextGEN as well, have you by any chance figured out how to keep galleries separate that are on the same page/post? I have multiple galleries on a page and what happens is they run together, so when one gallery ends, it just goes on to the next one. I really want to keep them separate, but haven’t been able to figure out how to do that.

Thanks

[askwpgirl]

Hi Oberon,

Do you have a sample page where this is happening? I have a couple ideas, but I’d like to see an example of the lightbox nav going to the next gallery.

I have a CSS trick to make galleries display with a single thumbnail and they don’t run together. Here’s an example:

http://sacredcave.com/paintings/

[Oberon]

Hi Askwpgirl,

SacredCave is VERY cool – I love the art! It is just awesome!
Also, I notice that your galleries do not run together!

My site is at http://sugarloafphoto.com/blog and there are 3 galleries below the slider on the main page.
Click on the thumbnail for the Aspens gallery (middle one), you’ll see that it starts on image 6 of 41. There are only 6 images in the Aspens gallery but if you keep going you start seeing the Pro Cycling images from the next gallery. If you go the other way, you’ll see the images from the first gallery.

My shortcodes currently look like this:
[nggallery id=7]

Note: I have modified the code a bit to give a different experience on mobile devices and computers. You’ll see a slimbox on computers and a fullsize image that is touch enabled on tablets and phones. On mobile I’m using the NGG plugin called PhotoSwipe. The problem existed before I added this and the problem is reflected on both types of devices.

I’ve read through the documentation for NextGEN but do not see anything that talks about keeping the galleries from running together. The images are physically in separate folders named for each gallery – NGG did this automaticlally when I created each gallery. I’ve looked at other sites, like yours, where the galleries are separate, but it’s not clear to me how it is done. I don’t see anything obvious like “rel” tags or special classes used to differentiate each gallery.

Thanks so much for your help. I really appreciate it.

-mike

[askwpgirl]

Hi Mike,

Hey, are you in Boulder? I teach at Boulder Digital Arts. Small world. I also created the Gold Hill website a few years ago for the towns folk to keep in touch with happenings up there. Glad to know another Jump Start enthusiast here.

I teach a NextGEN Gallery class, so I do a lot of testing and trying out of things and consolidated documentation for my class notes, though, the Photocrati folks are keeping up the new NextGEN website very well and constantly adding new plugin information, etc.

For Sacred Cave, I used a CSS trick in the NextGEN Gallery stylesheet to show the first thumbnail in a gallery and have that open in a gallery effect. Not sure if that’s what you did here or not. Here’s the info for that:

Insert the following code in the nggallery.css file (be sure to copy this file to your theme’s folder):

/* For NextGen Gallery. Displays thumbnails on a page, and when you click each thumbnail opens it's own gallery. Normally when you insert a gallery, it displays all the thumbnails in the gallery. This hack will hide all the thumbnails except the first one. Make sure you don't display [show slideshow], because that will be the first child. */
div.ngg-gallery-thumbnail-box { display:none; }
div.ngg-galleryoverview div:first-child { display:block; }
/* Star HTML hack. Styles are only interpreted by IE6 */
* html div.ngg-gallery-thumbnail-box { display:block; }

IMPORTANT NOTE: You must turn Piclens Off in the General Options and Slideshow Off in the Gallery Options.

Let me know how you are creating this page. Since this is off topic for Jump Start, feel free to email me via http://moongoosedesigns.com. You might be having a different issue that perhaps we could put our heads together to solve. Perhaps related to the Gallery Options for pagination.

[Author]

Replies