Блог

Я разрабатываю свой веб-сайт портфолио. Мои проекты веб-сайтов имеют очень большой размер 1600×900 min, потому что я создаю их на широком экране для лучшего просмотра.

Я использую Jquery для увеличения изображения. Теперь, когда оно становится большим, оно покрывает весь экран и покрывает мой веб-сайт.

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

Это приведенный ниже код.

 <div class="two-one last">
    <h2>Recent Work</h2>

    <ul class="recent">
        <li class="image"><img src="./example/recent1.jpg" alt="Image"><a href="./example/recent1_b.jpg" class="link" rel="pretty" title="Vision Plus Logo">View</a></li>
        <li class="image last"><img src="./example/recent2.jpg" alt="Image"><a href="./example/recent2_b.jpg" class="link" rel="pretty" title="Rahman amp; Rahman Dental Surgeons">View</a></li>
        <li class="image"><img src="./example/recent3.jpg" alt="Image"><a href="./example/recent3_b.jpg" class="link" rel="pretty">View</a></li>
        <li class="image last"><img src="./example/recent4.jpg" alt="Image"><a href="./example/recent4_b.jpg" class="link" rel="pretty">View</a></li>
    </ul>
</div>
  

Смотрите это изображение
http://i40.tinypic.com/29lfbs1.jpg

Предварительный просмотр отображается при первом нажатии на изображение. Затем, если вы нажмете кнопку в верхнем углу изображения. Оно получит полный размер, я просто хочу, чтобы оно отображалось в текущем окне, но изображение будет полным, а не в поле. Таким образом, я могу перетащить изображение туда, куда захочу, в поле, чтобы увидеть полное изображение без потери качества.

В jQuery-ui есть несколько действительно хороших реализаций. Вы можете скачать / использовать jQuery-ui бесплатно

Проверьте: http://jqueryui.com/demos/draggable /

С источником html, таким как:

 <div class="two-one last">
  <h2>Recent Work</h2>

  <ul class="recent">
    <li class="image">
      <img src="./example/recent1.jpg" alt="Image">
      <a href="./example/recent1_b.jpg" class="link">View</a>
    </li>

    <!-- more li here -->

   </ul>
 </div>
  

Затем вы можете скрыть изображения по умолчанию с помощью CSS и простого события щелчка, чтобы показать изображение.

 var link = $('.link');

link.click(function()
{
  var big_image_url = $(this).attr('href');

  var big_img = $('<img id="draggable">').attr('src', big_image_url);

  big_img.load(function()
  {
     $("body").prepend(big_img);
     $('#draggable').draggable();
   });

   return false; // To prevent a href from working
 });
  

Полная реализация веб-страницы (очень простая) будет выглядеть следующим образом:

http://pastebin.com/FtjaiGpa