Geek asks and answers

Trying to adapt Simple Modal to asp.net datalist repeater

I found this great example for ericmartin modal popup

But I'm trying to use against the datalist images created by the ASP.NET relay, and am not sure how to make a dynamic image.

The working code is simple, but the image is static. It basically pops up over obscuring the site that named it. all this happens in javascript and css from this 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 should somehow get / set the image value, but get the "get get undefined" error in my javascript.

here is 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 PROGRESS HERE. TAKES MY ISSUE NOW WHEN I SAID AND UPDATES.

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

. :

   <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
+5
3

, .

Datalist , ImageUrl . OnClientClick jquery , Image1 src.

, SimpleModal, JS, ,

<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>
+3

- :

  • Script :

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

  • .

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

+1

ClientID , :

 var img = $("#" + "<%=Image1.ClientID %>");

Also, your code seems great. Be sure to Eval("n2")create the correct URLs. You can add something like this:

function ShowFullImg(url) { 
    var img = $("#" + "<%=Image1.ClientID %>"); 
    img.src = url; 
    alert(url);
}
+1
source

More articles:


All Articles