By default, FooBox allows image navigation by clicking the arrows on the left or right of the image, swiping the screen (on mobile devices), and using the keyboard arrow keys. We’ve found methods to be the most reliable and intuitive way to navigate.
We have received quite a few feature requests to be able to navigate by clicking on the image directly. So we developed this function for users to add this ability if they prefer.
Simply add the following snippet to the “Custom Init Callback Javascript” setting under the JS & CSS tab:
<code>function() { var _this = this; _this.modal.element.find('.fbx-item-current, .fbx-item-next') .unbind('click.captions') //unbind other click events .unbind('click.social') //unbind other click events .bind('click', function(e) { _this.modal.next(); }); }
Specify Buttons Per Gallery
If you want to enable this per gallery, simply wrap your gallery shorcode with a container div with a unique class:
<code><div class=".foobox-click-image"> #gallery-2 { margin: auto; } #gallery-2 .gallery-item { float: left; margin-top: 10px; text-align: center; width: 33%; } #gallery-2 img { border: 2px solid #cfcfcf; } #gallery-2 .gallery-caption { margin-left: 0; } /* see gallery_shortcode() in wp-includes/media.php */ Caption iPad Caption iPhone </div>
And then update your javascript as follows:
<code>$('.foobox-click-image .gallery').on( function() { var _this = this; _this.modal.element.find('.fbx-item-current, .fbx-item-next') .unbind('click.captions') //unbind other click events .unbind('click.social') //unbind other click events .bind('click', function(e) { _this.modal.next(); }); });
