I am currently facing an issue with my slide show that is composed of divs, each containing a picture and some html controls. The problem arises when clicking on a control in a slide other than the first one - it only updates the first slide. The only thing differentiating the slides is the display property switching from none to block as you navigate through the slide show. Is there a way in jQuery to change the information for the current slide without having to use each statements and search for hidden classes? Thank you for any assistance.
<div class="TheSlide">
<table>
<tr>
<td>
<div id="divSlideImage"> <asp:HiddenField runat="server" ID="HiddenField1" Value='<%#Eval("ID") %>' />
<asp:ImageButton runat="server" CssClass="AlbumImageView" Height="480" ID="MainPicture"
ImageUrl='<%#Eval("PhotoMainImageURL") %>' AlternateText="Slide not showing properly. Refresh Page." />
<div id="pictureTagBorder"></div>
</div>
<div class="TheSlide">
<table>
<tr>
<td>
<div id="divSlideImage"> <asp:HiddenField runat="server" ID="HiddenField1" Value='<%#Eval("ID") %>' />
<asp:ImageButton runat="server" CssClass="AlbumImageView" Height="480" ID="MainPicture"
ImageUrl='<%#Eval("PhotoMainImageURL") %>' AlternateText="Slide not showing properly. Refresh Page." />
<div id="pictureTagBorder"></div>
</div>
My goal is to attach this class to the picture when the user clicks on a control, but currently, this script only works on the first slide.
$(document).ready(function () {
var top = y - 232;
var left = x - 145;
$('#pictureTagBorder').css({ top:top , left: left });
});