ansaurus

Question

Problem using jQuery cycle plugin as image rotator and a pager

Answer 1

A:

Are you supposed to start the cycling when the document becomes ready? I'm unfamiliar with the cycler, but try this instead:

<script type="text/javascript">
    $(function() {
        $('#slideshow').before('<ul id="nav">').cycle({
            fx: 'turnDown',
            speed: 'fast',
            timeout: 0,
            pager: '#nav',

            // callback fn that creates a thumbnail to use as pager anchor 
            pagerAnchorBuilder: function(idx, slide)
            {
                return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
            }
        });
     });    
</script>

Perhaps you were trying to run a cycler on an element that didn't exist yet because the document wasn't ready. Also, I think the syntax for creating elements requires them to be self-closing, i.e., you should have .before('<ul id="nav" />').cycle()..., but I'm not very familiar with the ins and outs of jQuery yet.

Cory Larson 2009-05-27 02:21:58

I included it in my code, still doesn't work.

Shimmy 2009-05-27 02:23:37

Answer 2

+1 A:

You need to add a container

Ex

<body>
   <form id="form1" runat="server">
      <ul id="nav"></ul>  <!-- You need this -->
      <div id="slideshow">
         <img src="http://www.freefoto.com/images/12/13/12_13_4---Flowers-in-a-Garden-Border_web.jpg" />
         <img src="http://www.cssnz.org/flower.jpg" />
         <img src="http://www.global-b2b-network.com/direct/dbimage/50322257/Sun_Flowers.jpg" />
      </div>
   </form>
</body>

Update:

For horizontal on the bottom of the page underneath the slideshow

You need add this CSS

#nav li{
  float: left;
}

And HTML change to

   <form id="form1" runat="server">
      <div id="slideshow">
         <img src="http://www.freefoto.com/images/12/13/12_13_4---Flowers-in-a-Garden-Border_web.jpg" />
         <img src="http://www.cssnz.org/flower.jpg" />
         <img src="http://www.global-b2b-network.com/direct/dbimage/50322257/Sun_Flowers.jpg" />
      </div>
      <ul id="nav"></ul>  <!-- You need this -->
   </form>

Gordian Yuan 2009-05-27 02:23:41

Nope :(still doesn't work

Shimmy 2009-05-27 02:31:51

I copy your code and add <ul>, It's works well.You can download the sample code and checked. http://gordianyuan.cn/ex.7z

Gordian Yuan 2009-05-27 02:38:04

You should open a new question for this. :) I have update my answer.

Gordian Yuan 2009-05-27 02:52:02

it's not the adding of the ul, it's the style, once I remove the style (it's from their site) I can see the pager, still I am willing to have a pretier thing.

Shimmy 2009-05-27 02:54:18

I add the style that is OK too. Do i miss something? You can download the sample code and checked. http://gordianyuan.cn/ex2.7z

Gordian Yuan 2009-05-27 02:59:54

ansaurus

tags:

views:

answers:

Problem using jQuery cycle plugin as image rotator and a pager

related questions