jQuery Cycle with keyboard scroll?
Hello,
i was wondering, is there a way of making a cycle slide scroll when either left or right are pressed?
I've tried searching here and there and the only thing i've come across that seemed to word was
if you'll be so kind to check that page, you'll see that the script requires a link with a class to "find" where it is, that in my cycle would be .activeSlide (i think) but it does not work
As you may have guessed, im really not in my turf with js but i think the problem is that the a.activeslide is applied by cycle to the html after the keyboard script searches for it.
Apart from this solution, is there an easy way to allow keyboard navigation? I only need left and right.
If you want to look at the page code here it is
- <script type="text/javascript" src="../../script/jquery.js"></script>
- <script type="text/javascript" src="../../script/jquery.cycle.all.js"></script>
- <script type="text/javascript">
- $(function() {
- $('#slideshow').cycle({
- fx: 'fade',
- speed: '1000',
- timeout: 0,
- pager: '#nav',
- pagerAnchorBuilder: function(idx, slide) {
- // return sel string for existing anchor
- return '#nav li:eq(' + (idx) + ') a';
- }
- });
- });
- </script>
- [...]
- <div id="slidecontainer">
- <div id="slideshow">
- <div><img alt="immagine" src="img/01.jpg" /><div class="testostudio"><?php include('testi/1.html'); ?>
- </div></div>
- <div><img alt="immagine" src="img/02.jpg" /><div class="testostudio"><?php include('testi/2.html'); ?> </div></div>
- <div><img alt="immagine" src="img/03.jpg" /><div class="testostudio"> <?php include('testi/3.html'); ?> </div></div>
- <div><img alt="immagine" src="img/04.jpg" /><div class="testostudio"><?php include('testi/4.html'); ?> </div></div>
-
- </div> <!-- chiusura div slideshow -->
- </div>
- <div id="navcontainer">
- <ul id="nav">
- <li class="numeristudio"><a href="#">1</a></li>
- <li class="numeristudio"><a href="#">2</a></li>
- <li class="numeristudio"><a href="#">3</a></li>
- <li class="numeristudio"><a href="#">4</a></li>
- <li class="numeristudio"><a href="#">5</a></li>
- <li class="numeristudio"><a href="#">6</a></li>
- <li class="numeristudio"><a href="#">7</a></li>
- <li class="numeristudio"><a href="#">8</a></li>
- </ul>
- </div>
Here it is working http://studiobecchio.it/site/studio/studio.php
Thanks a lot,
Andrea.