Trying to adapt Simple Modal example to asp.net datalist repeater

Question

I found this great example for modal popup from ericmartin

But I'm trying to use against a datalist of images produced by an ASP.NET repeater and not sure how to make the image dynamic.

The working code is simple but the image is static. It basically pops up th image an darkens the site that called it. it's all happening in javascript and css from that site.

<div id='container'>
    <div id='content'>
        <div id='basic-modal'>
            <a href='#' class='basic'>Demoz</a>
        </div>
        <div id="basic-modal-content">
              <img src="img/basic/127-2777_IMG.JPG" />
        </div>
    </div>
</div>

But my asp.net repeater code needs to somehow get/set the image value but getting "$get is undefined" error in my javascript.

here's my asp.net code:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<script type="text/javascript">
    function ShowFullImg(url) {
        var img = $get("<%=Image1.ClientID %>");
            img.src = url;
            //  $find("Image1").show();
        }
</script> 

<div id='container'>

<div id="basic-modal-content">
<asp:Image ID="Image1" runat="server" /> 
</div>


<ASP:DataList id="repeater1"  runat="server" repeatdirection="Horizontal" RepeatLayout="Table" Repeatcolumns="5"> 
<ItemTemplate> 


<asp:ImageButton ID="ThumbnailImg" ImageUrl='<%# Eval("n1") %>' Height="100" Width="150" BorderStyle="Ridge"   OnClientClick='<%# Eval("n2","ShowFullImg(\"{0}\");return false;") %>'  runat="server" />                          

</ItemTemplate>
</asp:DataList>
    </div>
</asp:Content>

=== UPDATE: SOME MORE PROGRESS HERE. APPEARS MY ISSUE NOW IS WHEN I BIND AND UPDATE.

http://forums.asp.net/p/1902263/5377638.aspx/1?Re+making+basic+modal+example+dynamic+to+asp+net+datalist+

Here's my rendered code.. I'm getting a blank popup:

   <script type="text/javascript"> 
    function ShowFullImg(url) { 
        var img = $("#Maincontent_Image1"); 
        img.src = url; 
        } 
</script>      

<div id='container'> 


<div id="basic-modal-content"> 
<img id="Maincontent_Image1" src="" /> 
</div> 


 <div id='basic-modal'> 

<table id="Maincontent_repeater1" cellspacing="0" style="border-collapse:collapse;"> 
        <tr> 
                <td> 


<input type="image" name="ctl00$Maincontent$repeater1$ctl00$ThumbnailImg" id="Maincontent_repeater1_ThumbnailImg_0" class="basic

Answer 1

This should do the trick without having to worry about the rendered names.

The Datalist is handled on the serverside so that the ImageUrl path is completely rendered. this should leave a nice simple OnClientClick call to the jquery at the bottom which sets the Image1 src.

Also, I didn't see the actual call to the SimpleModal plugin, so I added it to the JS as I couldn't see how you were getting any sort of popup at all based on the code snippets

<div id="basic-modal-content">
    <asp:Image ID="Image1" ImageUrl="" runat="server" />
</div>

<div id='container'>
    <asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal" RepeatColumns="5" >
        <ItemTemplate>
            <asp:ImageButton ID="ThumbnailImg" ImageUrl='<%# Eval("n1") %>' Height="100" Width="150" BorderStyle="Ridge" runat="server" OnClientClick="ShowFullImg(this);" />
        </ItemTemplate>
    </asp:DataList>
</div>

<script type="text/javascript">
    function ShowFullImg(e)
    {
        $('#basic-modal-content img').attr('src',$(e).attr('src'))
        $('#basic-modal-content').modal()
    }
</script>

Answer 2

How about doing something like this:

1. Change your Script as follows:

   function ShowFullImg(url) { 
       var img = $("#Maincontent_Image1"); 
       img.attr("src", url); 
   } 
   

2. try changing you server side ImageButton's code to this.

   <asp:ImageButton 
       ID="ThumbnailImg" 
       ImageUrl='<%# Eval("n1") %>' 
       Height="100" Width="150" 
       BorderStyle="Ridge"   
       OnClientClick='<%# "ShowFullImg('" + Eval("n2") + "'); return false;" %>')'   
       runat="server" />