<asp:GridView....> <Columns> <ItemTemplate> <div class="media" id="mymedia"> <a href='<%# Eval("ImageUrl") %>' class="pull-left" data-gallery="#blueimp-gallery-all" data-description='<%# Eval("Description") %>' title='<%# Eval("ImageName") %>'>
 <img src='<%# Eval("ImageUrl") %>' class="media-object img-thumbnail" style="width: 150px" data-description="ABCDEFGH"></img> </a> <div class="media-body"> <asp:Label runat="server" Text='<%# Bind("ImageName") %>' ID="Label3" CssClass="media-heading"></asp:Label><br /> <asp:Label runat="server" Text='<%# Bind("DateTaken","{0:d}") %>' ID="Label4"></asp:Label> </div> </div> </ItemTemplate> </Columns> </asp:GridView>

And I use below jquery function to display additional Description information on image slideshow. 

$('#blueimp-gallery').on('slide', function (event, index, slide) { $(this).children('.description') .text($('#media a').eq(index).data('description')); });

<div id="blueimp-gallery" class="blueimp-gallery"> <!-- The container for the modal slides --> <div class="slides"></div> <!-- Controls for the borderless lightbox --> <h3 class="title"></h3> <p class="description"></p> <a class="prev">‹</a> <a class="next">›</a> <a class="close">×</a> <a class="play-pause"></a> <ol class="indicator"></ol>

.........

</div>

I have 3 grids in this page, my problem is when I start 2nd grid image slideshow it shows first grid image Description on all images. Same problem in 3rd grid also. So I need to show the Description according to the data-gallery and grid. Please help.