Tell the plugin gallery in a separate window with the following criteria:

  1. Image in a separate window
  2. Opening multiple windows
  3. The ability to independently move the window (for example http://jqueryui.com/dialog/ )

Unnecessary frills, such as showing previews of images, not necessarily.

    1 answer 1

    Well, there are simply no such plug-ins. For there is no sense in such logic. In 98% this is not required.

    There are two options, but you just have to finish them yourself.

    The first.

    It is trivial to open a new window when clicking on a picture, through window.open and trigger a pop-up modal event. The new window can just be moved, as you want, call more, etc.

    As an example, take fancybox2 .

    $(document).ready(function() { if (typeof imageUrlOpen !== 'undefined') { $.fancybox.open( [imageUrlOpen] ); $(document).on('click', '.fancybox-close', function () { window.close(); }); } $(document).on('click', '.fancybox', function (e) { e.preventDefault(); var el = $(this); PopupCenter(location.href, getRandomInt(1, 999), 800, 600, function (winHandle) { winHandle.imageUrlOpen = $(el).attr('href'); }); }); }); // для генерации индивидуального идентификатора для окна function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min; } // окно по середине экрана function PopupCenter(url, title, w, h, callback) { // Fixes dual-screen position Most browsers Firefox var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left; var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top; var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width; var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height; var left = ((width / 2) - (w / 2)) + dualScreenLeft; var top = ((height / 2) - (h / 2)) + dualScreenTop; var newWindow = window.open(url, title, 'menubar=yes,scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left); // Puts focus on the newWindow if (window.focus) { newWindow.focus(); } callback(newWindow); } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://fancyapps.com/fancybox/source/jquery.fancybox.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script> <p> <a class="fancybox" href="http://farm9.staticflickr.com/8140/30366640446_eb359921c5_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"> <img src="http://farm9.staticflickr.com/8140/30366640446_eb359921c5_m.jpg" alt="" /> </a> <a class="fancybox" href="http://farm1.staticflickr.com/756/22625719192_fdc3369588_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"> <img src="http://farm1.staticflickr.com/756/22625719192_fdc3369588_m.jpg" alt="" /> </a> <a class="fancybox" href="http://farm9.staticflickr.com/8542/29466009773_a809b99d19_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"> <img src="http://farm9.staticflickr.com/8542/29466009773_a809b99d19_m.jpg" alt="" /> </a> <a class="fancybox" href="http://farm2.staticflickr.com/1514/23919332220_60b7867d60_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"> <img src="http://farm2.staticflickr.com/1514/23919332220_60b7867d60_m.jpg" alt="" /> </a> </p>

    In the snippet will not work ..... well, because the new windows and snippet. Therefore, it is worth trying it as a demo.

    A new window is being generated. It also checks if there is a variable in the imageUrlOpen window. If defined, then it is necessary to produce a trigger. If not, leave everything alone.

    In general, it looks like this:

    enter image description here

    The second is he as a consequence of the first. If you don’t like such a standard window view, then do it, for example via an iframe , which can be styled via css , and also assign frame closing (deletion) events when it is not needed.

    But you only have to add something from draggable plugins to make the frame move.

    And the logic of the appearance of a modal window will be about the same, that is, in fact, the call will be something like this:

     $(document).on('click', '.fancybox', function (e) { e.preventDefault(); var el = $(this); $('body').append('<div id="iframe-wrap"><iframe src="' + location.href + '" width="800" height="600">Ваш браузер не поддерживает плавающие фреймы!</iframe><div id="iframe-close"></div></div>'); });

    css type

     #iframe-wrap, iframe { position: relative; margin: 0 auto; width: 800px; height: 600px; border: 1px solid black; }

    and so on.