I have a simple list of images that is being controlled via a CMS (ExpressionEngine). Like this:
<div class="wrapper">
<a href="#"><img src="#" /></a>
<a href="#"><img src="#" /></a>
<a href="#"><img src="#" /></a>
<a href="#"><img src="#" /></a>
<a href="#"><img src="#" /></a>
<a href="#"><img src="#" /></a>
<a href="#"><img src="#" /></a>
<a href="#"><img src="#" /></a>
</div>
What I want to do is for every 5 images, wrap them in a div with a class of "slide." To look like this:
<div class="wrapper">
<div class="slide">
<a href="#"><img src="#" /></a>
<a href="#"><img src="#" /></a>
<a href="#"><img src="#" /></a>
<a href="#"><img src="#" /></a>
<a href="#"><img src="#" /></a>
</div>
<div class="slide">
<a href="#"><img src="#" /></a>
<a href="#"><img src="#" /></a>
<a href="#"><img src="#" /></a>
</div>
</div>
The reason I am not manually coding the "" in is because of a jQuery content slider that I am using which requires every 5 images to be wrapped inside a slide div.
I'm not sure how what the code in ExpressionEngine would be to do this, but I figure it might just be easier to use Javascript to wrap every 5 images with the div. And to just have ExpressionEngine output the different images all at once.
Any help?
You need to use jQuery slice with wrap
Check this question
Here's one way:
Example: http://jsfiddle.net/T6tu4/
Here's another way:
Example: http://jsfiddle.net/T6tu4/1/
I think this would do that:
Try this:
You can just create a div for every fith element and move the links into them using the
append
method:Demo: http://jsfiddle.net/Guffa/ybrxu/
Use slice() to select the element subset then wrapAll() to wrap the div around them. Here's a function that does that.
Demo: http://jsfiddle.net/C5cHC/
Note that the second parameter of slice may go out of bounds, but jQuery seems to handle this automatically.