jQuery cycle plugin with only one image

Question

This is a bit strange question but I am trying to use the cycle plugin to display only one image. That is just to use the various effects the plugin is providing. I have a row of images with certain text and each image/text will be hosted inside a div tag which will be enclosed by the cycle plugin. At certain times, different div tag will have some animation effect using the plugin's cycle function. I think I can add the same div tag to work around this but I am wondering if anyone knows how to do what I want to do.

Answer 1

If you're trying to cycle between DIVs that have the same image but different text then, yes, you can do that. Here's a basic example.

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});
</script>

<style type="text/css">
.slideshow { position: relative }
.slideshow div { position: relative; }
.slideshow div span { position: absolute; top: 5px; left: 5px; }
</style>

<div class="slideshow">
    <div>
        <span>Here's some text!</span>
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
    </div>

    <div>
        <span>Some more different text.</span>
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
    </div>

    <div>
        <span>Even more different text.</span>
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
    </div>
</div>