JQuery Thumbnail изображение preview

Я добавил Лайтбокс JQuery в мое приложение ASP.net. Но у меня есть проблема, когда я нажимаю на уменьшенное изображение, показанное изображение предварительного просмотра - очень большое изображение с прокруткой вверх-вниз, вправо-влево. Как это iamgeJQuery Thumbnail изображение preview

enter image description here

и я хочу, чтобы отобразить предварительный просмотр изображения, как это.

enter image description here

Как я могу зафиксировать ширину и высоту для конкретного просмотра? Какой файл следует изменить или изменить для этой цели ?. Добавленный файл - это изображение, приведенное ниже.

enter image description here

Код ASP.net Ниже приводятся

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MyAPNSWebApp._Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"> 
     <title>Jquery LightBox Example</title> 
     <script type="text/javascript" src="js/jquery.js"></script> 
     <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> 
     <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> 
    <script type="text/javascript" src="js/lightbox_resize.js"></script> 
    <link rel="stylesheet" href="css/lightbox_r.css" type="text/css" media="screen"> 
     <script type="text/javascript"> 
      $(function() { 
       $('#gallery a').lightBox(); 
      }); 
     </script> 
     <style type="text/css"> 
     /* jQuery lightBox plugin - Gallery style */ 
      #gallery { 
       background-color: #444; 
       padding: 2px; 
       width: 800px; 
      } 
      #gallery ul { list-style: none; } 
      #gallery ul li { display: inline; } 
      #gallery ul img { 
       border: 5px solid #3e3e3e; 
       border-width: 5px 5px 20px; 
      } 
      #gallery ul a:hover img { 
       border: 5px solid #fff; 
       border-width: 5px 5px 20px; 
       color: #fff; 
      } 
      #gallery ul a:hover { color: #fff; } 
     </style> 
    </head> 
    <body> 
     <form id="form1" runat="server">  
      <h2 id="example">Example</h2> 
      <p>Click in the image and see the <strong>jQuery lightBox plugin</strong> in action.</p> 
      <div id="gallery"> 
       <ul> 
        <li> 
         <a href="photos/image1.jpg" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
          <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" /> 
         </a> 
        </li> 
        <li> 
         <a href="photos/image2.jpg" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
          <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" /> 
         </a> 
        </li> 
        <li> 
         <a href="photos/image3.jpg" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
          <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" /> 
         </a> 
        </li> 
        <li> 
         <a href="photos/image4.jpg" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
          <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" /> 
         </a> 
        </li> 
        <li> 
         <a href="photos/image5.jpg" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
          <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" /> 
         </a> 
        </li> 
       </ul> 
      </div> 
     </form> 
    </body> 
</html>

источник

2012-10-16 Mohsinjan110

Кто-нибудь знает о моей проблеме ??? – Mohsinjan110

Существуют и другие плагины в стиле Lightbox, которые делают изображение подходящим в вашем окне просмотра, когда вы нажимаете, чтобы открыть большое изображение, или сделать то же самое, и в дополнение к этому также изменяет размер изображения при изменении размера окна. http://fancybox.net/ - http://www.shadowbox-js.com/download.html (Из верхней части головы я не могу вспомнить других, которые делают эти вещи) – Joonas

Вместо

<script type="text/javascript"> 
    $(function() { 
     $('#gallery a').lightBox(); 
    }); 
</script>

попробовать это

<script type="text/javascript"> 
    $('#gallery a').lightBox({ 
     maxHeight: 500, 
     maxWidth: 700 
    }); 
</script>

заменить значения с вашим собственным выбором.

источник

2012-10-16 06:02:21 ganesh

Откроется изображение на новой странице (url = http: // localhost: 1608/photos/image5.jpg), но я хочу просмотреть, как всплывающее окно лайтбокса, как показано выше второго изображения красных листьев. – Mohsinjan110

В каждом теге привязки добавьте rel = "lightbox", а затем проверьте. – ganesh

еще одна проблема :( – Mohsinjan110

JQuery Thumbnail изображение preview

ответ

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