Manipulating and Converting Table Items using jQuery

Ok, I've hit a brick wall. I have a project where I need to convert items (Photos) listed in a table into a UL for further jQuery Manipulation (ideally using jQuery Cycle - http://www.malsup.com/jquery/cycle/ ). I had located this Stack Overflow post (How to transform HTML table to list with JQuery?) , however the code seems a bit one-use and specific to the OP's use. I am also curious if this would need to be executed at a certain point on the page load (pre-DOM ready, Post DOM-ready, etc).

Unfortunately, I don't have much of an option for formatting the output as it is produced by a 3rd party module. Currently, the output is formatted like this (IDs and URLs Simplified for space and clarity):

<!-- First Item, I can set this to format however I like -->


<a href="16.jpg" rel="lightbox2" title=""><img src="16.jpg" class="FirstPhoto" alt="" width="320" height="240" /></a>

<!-- Subsequent Items are put into a table, as the developer has开发者_开发技巧 explained - rendered as a Datalist -->
<table id="CMS-ASSIGNED-UNIQUEID" cellspacing="0" cellpadding="0" border="0" style="width:100%;border-collapse:collapse;">
        <tr>
            <td align="center">
            <a href="17.jpg" rel="lightbox2" title=""><img src="17.jpg" class="ItemPhoto" width="125" height="94" alt=""></a>
            </td>
            <td align="center">
            <a href="18.jpg" rel="lightbox2" title=""><img src="18.jpg" class="ItemPhoto" width="125" height="94" alt=""></a>
            </td>
        </tr>
        <!-- Continue for n Rows -->
        </tr>
    </table>

Ideally, I would like to get it to export like this (note that the first item is also in there, I can work around this if it's beyond the scope of what's possible):

    <div class="slideshow">
    <img src="16.jpg" width="125" height="94" />
    <img src="17.jpg" width="125" height="94" />
    <img src="18.jpg" width="125" height="94" />
</div>

---

This little bit of jQuery will grab all the img elements and add them to the slideshow element container

$(function() {
    $('<div class="slideshow"></div>')
        .appendTo('body')
        .append(
            $('a[rel=lightbox2] > img').clone()
            .removeClass()
            .attr({ height: 94, width: 125 })
        );
});

At this point you should be able to run your slideshow.

---

If I'm not mistaken, this seems like the simple case of:

$(document).ready(function()
{
    var container = $(document.createElement('div'))
        .addClass('slideshow');
    $('#CMS-ASSIGNED-UNIQUEID img.ItemPhoto')
        .removeClass('ItemPhoto')
        .appendTo(container);
});

Calling container.html() would give you the output you wanted, or you could include the element in the DOM of the document directly. The ready method will also make sure the table is available (unless it's loaded dynamically at a later point).

---

Here's some stuff to get you going. It may need modifications to your specific needs, since the context around your HTML is missing.

var images = $('img.FirstPhoto, img.ItemPhoto');
var newImages = [];
newImages[newImages.length] = '<div class="slideshow">';
images.each(function() {
  var img = $(this);
  newImages[newImages.length] = '<img src="';
  newImages[newImages.length] = img.attr('src');
  newImages[newImages.length] = '" width="';
  newImages[newImages.length] = img.attr('width');
  newImages[newImages.length] = '" height="';
  newImages[newImages.length] = img.attr('height');
  newImages[newImages.length] = '" />';
});
newImages[newImages.lenght] = '</div>';

var newHtml = newImages.join('');
var newElement = $(newHtml);

var table = $('table#CMS-ASSIGNED-UNIQUEID');
table.after(newElement);
table.remove();

$('img.FirstPhoto').closest('a').remove();