Can I use the :eq() selector with variables? Or do I have to use alternatives.. but which could I use instead?
For the context, I use a gallery.
HTML
<div id="#thumbs">
<ul>
<li>Thumbnail 1</li>
<li>Thumbnail 2</li>
<li>Thumbnail 3</li>
</ul>
</div>
<div id="#gallery">
<ul>
<li>Image 1</li> <!-- User will see this 800px x 450px image -->
<li>Image 2</li>
<li>Image 3</li>
</ul>
</div>
Pseudo Javascript (JQuery)
$('#thumbs ul li').click(function() {
clickedPos = $(this).index(); //saving the index number of the clicked thumbnail
$('#gallery ul li:eq(clickedPos)').clone().insertAfter('#gallery ul li:eq(clickedPos)');
gallerywidth += 800 //gallery width grows a bit
$('#gallery ul').css({width: gallerywidth});
$('#gallery ul').animate({right:"+=800"},250);
});
Interaction example
USER clicks on Thumbnail 3
HTML Result
<div id="#thumbs">
<ul>
<li>Thumbnail 1</li>
<li>Thumbnail 2</li>
<li>Thumbnail 3</li>
</ul>
</div>
<div id="#gallery">
<ul>
<li>Image 1</li> <!-- at first the user saw this image -->
<li>Image 3</li> <!-- after scrolling 800px to the right, he now see this one -->
<li>Image 2</li>
<li>Image 3</li>
</ul>
</div>
use:
or: