PDA

View Full Version : Navigating basic jquery-slider gallery by clicking on images



samslystone
06-08-2014, 04:11 PM
Hi All

I have another question regarding the following page:

http://www.catherinehyland.co.uk/test/testslider.html

I am attempting to adapt the basic jquery slider. The user would like to be able to have the added option on the slider page of clicking through the images by clicking on the images. Currently the only way to move through the images is by using the numbers below. Essentially I need a function that will only navigate 'next' images by clicking on the slide, a 'previous' option is unnecessary.

Any comments greatly appreciated

All the best

Samuel

jscheuer1
06-09-2014, 03:04 PM
Since there doesn't appear to be any api documentation with this script nor any obvious access to a given slider instance, we can use its own nav buttons and a little style and jQuery to perform this. First in the on page call, set showcontrols to true and add code to activate the next control when a slide is clicked:


<script class="secret-source">
jQuery(document).ready(function($) {

$('#banner-fade').bjqs({
height : 770,
width : 930,
showcontrols : true,
automatic : false,
numImagesToPreload: 6,
loop: true,
loopRewind: true,
});
$('.bjqs-slide').click(function(){$('.bjqs-next a').click();});
});
</script>

So that these controls will not be seen, in the stylesheet, set the controls to display none (line 5 bjqs.css):


ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;display:none;}

samslystone
06-10-2014, 06:46 PM
Thank you so much, great help!