Starając się dostosować do prostego Modal przykład ASP.NET DataList Repeater

Question

Znalazłem ten wspaniały przykład dla modalnego popup z ericmartin

Ale staram się użyć przeciwko datalist obrazów produkowanych przez repeater ASP.NET i nie pewnie, jak sprawić, by obraz był dynamiczny.

Działający kod jest prosty, ale obraz jest statyczny. W zasadzie wyskakuje z obrazu i przyciemnia stronę, która go nazwała. wszystko dzieje się w javascript i css z tej strony.

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

Ale mój kod asp.net repeater musi jakoś pobierać/wartość obrazu ale coraz „$ get jest niezdefiniowana” błąd w moim javascript.

oto mój kod asp.net:

<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: Niektóre większe postępy TUTAJ. APPEARS MOJE PROBLEMY JEST TERAZ JESZCZE WSTRZYMUJĘ I AKTUALIZUJEMY.

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

Oto mój kod renderowane .. Dostaję puste okienko:

<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

To powinno wystarczyć, nie martwiąc się o renderowane nazwy.

Datalist jest obsługiwany na serwerze, dzięki czemu ścieżka ImageUrl jest całkowicie renderowana. powinno to zostawić ładne proste wywołanie OnClientClick do jquery na dole, które ustawia Imagerc1.

Również nie widzę rzeczywistego wywołanie wtyczki SimpleModal, więc dodałem go do JS jak nie mogłem zobaczyć, jak były coraz jakichkolwiek popup w ogóle na podstawie kodu fragmenty

<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

Jak o zrobieniu czegoś takiego:

1. Zmień skrypcie następująco :

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

2. spróbuj zmienić kod ImageButton po stronie serwera do tego.

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

Answer 3

Trzeba zdać ClientID tutaj, ale poprawna składnia jest tak:

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

Poza tym kod wydaje się w porządku. Potwierdź, że Eval("n2") tworzy prawidłowe adresy URL. Możesz dodać coś takiego:

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