Cercando di adattarsi semplice esempio modale ad ASP.NET datalist ripetitore

Question

Ho trovato questo grande esempio per popup modale da ericmartin

Ma sto cercando di usare contro un DataList di immagini prodotte da un ripetitore ASP.NET e non sicuro come rendere l'immagine dinamica.

Il codice di lavoro è semplice ma l'immagine è statica. In sostanza si apre l'immagine e si scurisce il sito che lo ha chiamato. sta accadendo tutto in javascript e css da quel sito.

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

Ma il mio codice ripetitore asp.net ha bisogno di ottenere in qualche modo impostare il valore/immagine, ma sempre "$ get è definito" errore nel mio javascript.

ecco il mio codice 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: ALCUNI maggiori progressi QUI. APPARE IL MIO NUMERO ORA È QUANDO I BIND E AGGIORNAMENTO.

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

Ecco il mio codice di reso .. Sto ricevendo un popup vuoto:

<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

Questo dovrebbe fare il trucco senza doversi preoccupare dei nomi resi.

Il datalist viene gestito sul lato server in modo che il percorso ImageUrl sia completamente visualizzato. questo dovrebbe lasciare una semplice chiamata OnClientClick alla jquery in basso che imposta lo src Image1.

Inoltre, non ho visto la chiamata effettiva al plugin SimpleModal, così ho aggiunto al JS come non ho potuto vedere come si stavano diventando alcun tipo di pop-up a tutti sulla base del codice di frammenti

<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

ne dite di fare qualcosa di simile:

1. modificare lo script come segue :

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

2. provare a cambiare il codice lato server di ImageButton a questo.

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

Answer 3

è necessario passare ClientID qui, ma la sintassi corretta è come questo:

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

Diverso da quello che il codice sembra che vada bene. Confermare che Eval("n2") sta producendo gli URL corretti. Puoi aggiungere qualcosa come:

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