2017-02-06 1 views
0

Есть несколько изображений большого пальца, и я хочу, чтобы модальное диалоговое окно было открыто с полноразмерным изображением onclick. Я хочу, чтобы динамически передавать 'SRC' в натуральной величине изображения в 'диалогового' сНа 'SRC'jQuery модальный диалог открыть изображение onclick с несколькими изображениями

C# код:

 <div id="dialog" title="American Lady Caterpillar"> 
      <img id="myImage" src="../Images/Caterpillar/Cat_AmericanLady.jpg" style="vertical-align: top; padding: 0px 10px 10px 2px;" /> 
     </div> 


     <table id="cat_tbl"> 
      <tr> 
       <td class="cat_colwidth"> 
        <img class="imgLink" src="../Images/Caterpillar/Cat_AmericanLady_Thumb.jpg" style="float:left; padding: 0px 10px 10px 2px;" /> 
        <span class="cat_bold">Genus</span>: Vanessa &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <span class="cat_bold">Species</span>: virginiensis <br /> 
        <span class="cat_bold">Common Name: American Lady<br /> 
        <span class="cat_bold">Group</span>:</span> Brushfoots<br /> 
        <span class="cat_bold">Host Plants</span>: Sweet everlasting, Pearly everlasting, Plantain-leaved pussy toes, and Ironweed 
       </td> 
      </tr> 
      <tr> 
       <td class="cat_colwidth"> 
        <img class="imgLink" src="../Images/Caterpillar/Cat_Viceroy_Thumb.jpg" style="float:left; padding: 0px 10px 10px 2px;" /> 
        <span class="cat_bold">Genus</span>: Limenitis &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <span class="cat_bold">Species</span>: archippus<br /> 
        <span class="cat_bold">Common Name</span>:<br /> 
        <span class="cat_bold">Group</span>: Admirals<br /> 
        <span class="cat_bold">Host Plants</span>: Trees in the willow family including Willows, and Poplars and Cottonwoods 
       </td> 
      </tr> 
</table> 

Jquery - до сих пор:

<script> 
    $(document).ready(function() { 
     $('#dialog').dialog({ autoOpen: false }) 
     $('.ui-dialog').css({ 
      width : 600, 
      height: 450}) 
     $('.imgLink').click(function() { 
      $('#myImage').attr('src', imgSrc); 
      $('#dialog').dialog('open').css({ 
       width: 600, 
       height: 450 
      }); 
     }); 
    }); 
</script> 
+0

C#? Это html. –

+0

Да, я показал HTML, но сайт asp.net. Извините за путаницу. – Susan

ответ

0

Если вы код только это, проблема здесь:

$('#myImage').attr('src', imgSrc); 

Изменить это:

$('#myImage').attr('src', $(this).attr('src').replace('_Thumb', '')); 
+0

Это так просто и очевидно! Спасибо, это сработало. – Susan

+0

* Это так просто и очевидно! *. Это означает, что мой ответ не заслуживает проверки или подтверждения? –

Смежные вопросы