Question

I have a asp.net Generated table that creates a table which is slide show as well. For the slide show to work, I need to only select the element of the table. This is a problem if the table has more than one row. I am using jquery cycle plugin for the slide show.

This would work fine and display Slide 1 2 3.

<table>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
<table>

But if you add another row it will not work properly

<table>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </tbody>
</table>

Here is the selector to select the slides from the table. I only want to select the root td’s from this table. There are inner tables, but I do not want those to be selected. I am assuming I just need to change the selector to get this to work properly. Thanks for any help.

 $('#SlideTable').cycle({
            fx: 'fade',
            speed: 'fast',
            next: null,
            prev: null,
            startingSlide: slideNumber - 1
        });

Answer 1

Ok, still not 100% sure on what you want to do, but based on what you have said, I am assuming you are wanting a slideshow with a thumbnail gallery where the slideshow shows 1 image and pans through them while the gallery shows all of the images in the slideshow. In this case, you probably would end up having click events on the gallery images to force the slideshow to that image. If this is not correct, then please let me know and I will try to help further.

Assuming all of this is true, and that your slider function (looks like you are using jQuery Cycle plugin so this will hold) can be used on a div with images inside it, you could do something like this:

HTML for the gallery and slider container

<table id="gallery">
    <tbody>
        <tr>
            <td><img src="path/to/img1"/></td>
            <td><img src="path/to/img2"/></td>
            <td><img src="path/to/img3"/></td>
        </tr>
        <tr>
            <td><img src="path/to/img4"/></td>
            <td><img src="path/to/img5"/></td>
            <td><img src="path/to/img6"/></td>
        </tr>
    </tbody>
</table>

<div id="slider"></div>

JavaScript to setup the slider

$('#gallery td').each(function() {
    $('#slider').append($(this).children().clone());    
});

$('#slider').cycle({
    fx: 'fade',
    speed: 'fast',
    next: null,
    prev: null,
    startingSlide: slideNumber - 1
});

BTW, the first selector $('#gallery td') grabs all of the td‘s in a table with id gallery

We select all of the td’s from the gallery table and generate a clone of them in the slider container. We then call the cycle plugin on the slider container to make a slider show with all images. This should result in a gallery of images and a slideshow of the images. Click events not included, but should be pretty simple to add.

Let me know if this helps or not. If not, correct my assumptions and I will try to help further.