Jquery cycle2 load order for images with image maps

Question

We have a jquery cycle2 slideshow with a bunch of images. We use imagemaps for each image, and an XSLT script is supposed to add all of the images with their image maps to the cycle2 container. Since the images are input into nodes in Umbraco and each of them consists of exactly 1 image and 1 imagemap, and the XSLT script loads them consecutively, node after node in a for loop, then the output should, in theory, look like this:

<img src="img1.jpg" usemap="map1"/>
<map id="map1">
<area coords="xxx">
</map>

<img src="img2.jpg" usemap="map2"/>
<map id="map2">
<area coords="xxx">
</map>

<img src="img3.jpg" usemap="map3"/>
<map id="map3">
<area coords="xxx">
</map>

However, the contents of the cycle container look like this:

<img src="img1.jpg" usemap="map1"/>
<map id="map1">
<area coords="xxx">
</map>
<map id="map2">
<area coords="xxx">
</map>
<map id="map3">
<area coords="xxx">
</map>

<img src="img2.jpg" usemap="map2"/>
<img src="img3.jpg" usemap="map3"/>

Moreover, the images are not ordered in the same order inside the slideshow as the order of the umbraco nodes that we used to build the list. We can assume that cycle2 re-arranges the elements inside the cycle container, but I could not find any documentation on their page on how to manage the order of the images in the slideshow.

How can we make sure that the images in the slideshow always follow the order in which we add them to the HTML of the slideshow container?

Our page in question : http://www.dphtrading.com

Cycle2: http://jquery.malsup.com/cycle2/

Answer 1

Using this example: http://jquery.malsup.com/cycle2/demo/non-image.php

Wrap your img and map tags in divs like so:

<div>
  <img src="img1.jpg" usemap="map1"/>
     <map id="map1">
        <area coords="xxx">
     </map>
</div>

And add the data-cycle-slides="> div" property to the cycle slideshow div.

Example fiddle here