Flexslider onClick event?

• danfloun

• January 29, 2014 at 12:31 am

Hi,

I am using Flexslider with gallery plugin and I need the flexslider image to be clickable so that I can have the full size image open in lightbox onclick of the large image (not carousel).

I can work out the lightbox and stuff, I just don’t know how to implement the onclick event. I’ve tried some examples on google but none seem to work, not sure if it’s a flexslider version issue.

Flexslider support is thin on the ground, hence my post here.

Thanks
Danny

ACF Plugins:
Custom Fields
Gallery Field

• James

• January 29, 2014 at 6:09 am

Hi @danfloun,

It might be that Flexislider is not bubbling the Javascript events like it should be.

I would consider attaching the event to a wrapping element and use the context of the image. Eg:

$('.my-slider-wrapper').on('click', '.img-class', function() {
//Open the lightbox.
});

• danfloun

• January 29, 2014 at 10:28 pm

Hi,

Can you be more specific how I would use that code?

Thanks

• James

• January 30, 2014 at 7:21 am

Hi @danfloun,

Sorry, I assumed that you had already attempted to attach an click event to the image and it was not working.

This is not really in the scope of ACF support but I will do my best to help you out. On the page that you have the slider you will need to add some custom JavaScript that adds a click event to the image that will invoke the lightbox.

Without knowing how you have setup your slider or lightbox can’t really give you the exact code, but it will be something like this:

$(function() { 
  $('.slide-image-class').on('click', function() {
    //Fire the lighbox code.
  });
});

Hope this helps. 🙂

• danfloun

• January 30, 2014 at 8:17 am

Hi, thanks.

I’m using the exact example on advanced custom fields website on flex slider and act gallery. Here;

• danfloun

• January 30, 2014 at 8:17 am

http://www.advancedcustomfields.com/resources/field-types/gallery/