Портфолио фильма Изображение с использованием Jquery - PullRequest
Новая
       0

Портфолио фильма Изображение с использованием Jquery

0 голосов
/ 06 ноября 2011

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

Я использую 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 & 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

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

1 Ответ

0 голосов
/ 06 ноября 2011

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

...