Hey all -- I've built a site that has two divs with variable content (eventually this will become 3, but I assume it will scale up to that with no major issues). I'd like to be able to change content with each of them using the same pager.
I found a similar post in this group concerning that, but it didn't work for me, though it did manage to remove the second set of pagers (it was appearing twice, each one controlling one element). That discussion is here: http://groups.google.com/group/jquery-en/browse_thread/thread/0b8490d9c724ffc0 here's my code, I know it's a little tricky to understand. After cycle handles hiding the multiple elements, it builds the blurb div, which is nested within the header. If you have questions, feel free to ask. <script type="text/javascript"> $.fn.cycle.defaults.timeout = 6000; $(function() { $('#headerContainer').after('<div id="blurbContainer">'+ '<div class="blurb" id="blurbHome"></div>'+ '<div class="blurb" id="blurbAbout"></div>'+ '<div class="blurb" id="blurbWork"></div>'+ '<div class="blurb" id="blurbClients"></div>'+ '<div class="blurb" id="blurbBlog"></div>'+ '<div class="blurb" id="blurbContact"></div>'+ '</div>'+ '<div id="nav">').cycle({ fx: 'fade', speed: 'slow', timeout: 0, pager: '#nav' }); }); $(function() { $('#blurbContainer').cycle({ fx: 'scrollLeft', speed: 'fast', timeout: 0, pager: '#nav', pagerAnchorBuilder: function(idx, slide) { return '#thumbNav a:eq(' + idx + ')'; } }); }); </script> </head> <body> <div id="headerContainer"> <div class="header" id="headerHome"></div> <div class="header" id="headerAbout"></div> <div class="header" id="headerWork"></div> <div class="header" id="headerClients"></div> <div class="header" id="headerContact"></div> <div class="header" id="headerBlog"></div> </div> <div id="content"></div> <div id="footer"></div> </body> </html>
