JQuery light box Draggable Image inside

Question

Я пытаюсь выполнить что-то Что такое просмотр Большие изображения внутри чего-то вроде lighbox, но с высоким разрешением, скажем, 1200x1600 или больше, Что я имею в виду, это просмотр Лайтбокса с абсолютной шириной и высота как 800x600, и изображение будет перетаскиваемо/перемещаемо внутри коробки Я думаю, что это возможно, но есть ли готовый JQuery-плагин для такой вещи? или Можете ли вы дать мне совет о том, как сделать его перетаскиваемым внутри Div, если я сделаю свой собственный пользовательский лайтбоксы.

Answer 1

Небольшой скрипт сделает это. Пожалуйста, прочитайте this post. Я создал крошечный fiddle, чтобы попробовать это, и он отлично работает. Его можно легко включить в свой собственный лайтбокс. Ниже приведен исходный код с небольшой модификацией

<script type='text/javascript' src="scripts/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="scripts/jquery-ui.js"></script> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     $("img").draggable({ containment: [-500, -422, 0, 0], scroll: false }); 

    }); 

</script> 

<style type="text/css"> 
    div { 
     width:500px; 
     height:423px; 
     position:relative; 
     overflow:hidden; 
    } 
</style> 

HTML, является:

<div> 
     <img src="http://megapack.ca/wp-content/uploads/2012/06/High-Resolution-Wallpapers-2.jpg" width="1000" height="845" alt="Map" /> 
</div> 

Answer 2

Попробуйте JQ Zoom, как я уже упоминал в комментариях http://www.mind-projects.it/projects/jqzoom/

Также вы можете проверить больше плагинов, если JQZoom Dont соответствовать вашим потребностям

http://www.tripwiremagazine.com/2012/12/jquery-image-zoom.html