Hi
I'm building a responsive site and have a project page featuring an unordered list of projects, each of which has a nested ul of images. Example:
- <ul class="projects">
- <li>
- <section>
- <h1>My 1st Project</h1>
- <ul class="projectImages">
- <li class="slide"><img src="myimage1.jpg"/></li>
- <li class="slide"><img src="myimage2.jpg"/></li>
- <li class="slide"><img src="myimage3.jpg"/></li>
- </ul>
- </section>
- </li>
- <li>
- <section>
- <h1>My second Project</h1>
- <ul class="projectImages">
- <li class="slide"><img src="myimage1.jpg"/></li>
- <!-- Etc ...-->
- <a class="prevProj">Prev</a><a class="nextProj">Prev</a>
- <a class="prev">Prev</a><a class="next">Prev</a>
Now because I need the containers and slides to fill their containers using relative sizes (eg: width: 100% etc), I've used slideResize: false and the dummy image method described
here which works great for the list of images, which will all be similarly sized. I resize the browser window and the images scale as I want. Below is my script:
- //Images
- $('.slides').prepend('<li class="loader"><img src="my-image.jpg" alt="" /></li>');
$('.projectImages').cycle({
timeout: 0,
slideExpr: '.slide',
fx: 'scrollHorz',
slideResize: false,
prev: '.prev',
next: '.next'
});
However when I add cycle to the projects ul, the image slideshow gets fixed widths applied inline to the list items (as would be case if slideResize: true). This is my script for the projects slideshow:
- // Projects
- $('.projects').cycle({
timeout: 0,
fx: 'scrollVert',
next: '.nextProj',
prev: '.prevProj',
rev: 1,
});
Are nested cycles in this way doable? Where am I going wrong or missing something?
Any pointers will be greatly appreciated.
Thanks