Manipulating and Converting Table Items using jQuery

Question

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 (http://stackoverflow.com/questions/577669/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>

Answer 1

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).

Answer 2

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();

Answer 3

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.