Web Developer
and Coffee-holic

Rotating Gallery

In this example I needed to develop a gallery that would be used to highlight different Realtors with a bio. The gallery needed to rotate with images, and multiple lines of text. Due to the fact that there was so much text in the highlight gallery, there needed to be a way to pause it so readers could take their time and view the content. You will notice the ability to pause it, resume play and move on to the next one is included in this example.

You can see the jquery script that makes it function below.

<script type="text/javascript">
$(document).ready(function(){
$(‘.agent-wrap’).cycle();
$(‘#pauseButton’).click(function() {
$(‘.agent-wrap’).cycle(‘pause’);
});
$(‘#resumeButton’).click(function() {
$(‘.agent-wrap’).cycle(‘resume’, true);
});
$(‘#nextButton’).click(function() {
$(‘.agent-wrap’).cycle(‘next’, true);
});
</script>

Here is the html used to render the gallery:

<h2>Gallery of Title</h2>
<div class="agent-wrap">
<div class="agent_box">
<div class="agent_img">
<img src="#" width="143" height="192" alt=""/>
</div>
<div class="agent_right">
<p>First View Title</p>
</div>
<div class="txt02">
<p>First Text Area</p>
</div>
<div class="txt03">
<p>Second Text Area</p>
</div><!–text3–>
</div><!–agentbox –>

<div class="agent-buttons">
<input type="button" id="pauseButton" value="PAUSE" class="button" />
<input type="button" id="resumeButton" value="RESUME" class="button" />
<input type="button" id="nextButton" value="NEXT" class="button" />
</div>

You would just repeat the agent boxes for the amount you wanted to include on your own site. I did not include the css for any of it, but you can see it functioning here at the bottom of the page.