Question

I’m working with this sample image slide page and was wondering if anyone could help. It has the links on the top, but I’m looking to put the links on the sides.

http://jquery.malsup.com/cycle/pager11.html

I know this might be a trivial and newbie question so forgive me as I recently started learning web technologies.

Thank you for your help.

Answer 1

You can instruct the Cycle plugin to construct the Prev, Next and Pager controls in any DOM element by passing selectors to the prev, next and pager arguments in the cycle() method. Here’s a very basic example:

<script type="text/javascript">
$(document).ready(function() {
     $('#slideshow').cycle({
          prev:    '.prev', // Setup prev links
          next:    '.next', // Setup next links
          pager:   '.nav'       // Setup pager navs
     }); 
});
</script>

<style type="text/css">
#left, #slideshow, #right { float: left; width: 200px; }
</style>

<!-- left nav bar -->
<div id="left">
    <a href="#"><span class="prev">Prev</span></a> 
    <a href="#"><span class="next">Next</span></a>
    <ul class="nav"></ul>
</div>

<!-- slideshow -->
<div id="slideshow">
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" />
</div>

<!-- right nav bar -->
<div id="right">
    <a href="#"><span class="prev">Prev</span></a> 
    <a href="#"><span class="next">Next</span></a>
    <ul class="nav"></ul>
</div>

Full documentation on the plugins options can be found at http://jquery.malsup.com/cycle/options.html.