There is a gallery that I am trying to implement with the help of fancybox 2.1.x.

Code, for example:

$('a').fancybox({ width: 800, minWidth: 800, margin: 0, padding: 0, // height: 'auto', fitToView: false, autoWidth: false, autoSize: false, wrapCSS: 'gallery-fancy', helpers: { title: { type: 'inside', position: 'top' }, overlay: { css: { 'background': 'rgba(0, 0, 0, 0.8)' }, } }, tpl: { next: '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span>›</span></a>', prev: '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span>‹</span></a>' }, beforeLoad: function() { this.title = "<span class='gallery__title-left'>" + (this.title ? this.title : '') + "</span>" + "<span class='gallery__title-right'>" + (this.index + 1) + ' из ' + this.group.length + "</span>"; } }); 
 ul { padding: 0; margin: 0; list-style-type: none; } ul li { width: 100px; height: 100px; float: left; border: 1px solid red; } a { display: block; width: 100%; height: 100%; } 
 <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.6/css/jquery.fancybox.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.6/js/jquery.fancybox.min.js"></script> <ul> <li> <a href="https://dummyimage.com/600x400/000/fff&text=big-1#.png" rel="gr1" title="1 img"> <img src="https://dummyimage.com/100x100/000/fff&text=prev-1" alt=""> </a> </li> <li> <a href="https://dummyimage.com/600x400/000/fff&text=big-2#.png" rel="gr1" title="1 img"> <img src="https://dummyimage.com/100x100/000/fff&text=prev-2" alt=""> </a> </li> <li> <a href="https://dummyimage.com/600x400/000/fff&text=big-3#.png" rel="gr1" title="1 img"> <img src="https://dummyimage.com/100x100/000/fff&text=prev-3" alt=""> </a> </li> </ul>

When you click on the thumbnail of the picture, a larger resolution image opens and you can scroll through these big pictures (by clicking the arrows, or by scrolling with the mouse).

Question: How to prevent images from scrolling when scrolling with the mouse (i.e. the following / previous image should appear only by clicking on the arrows)?

  • Could you add more code to the snippet to reproduce the problem? Now you have a fancybox does not work. - br3t
  • @ Elena, in your snippet now it goes to stacksnippets.net/big-1.png just - br3t
  • This code is for example - HamSter
  • one
    it would be more convenient if, for example, a problem was observed in the code that needs to be solved - br3t

1 answer 1

The solution requires setting the mouseWheel flag to false.

 $('a').fancybox({ width: 800, minWidth: 800, margin: 0, padding: 0, // height: 'auto', fitToView: false, autoWidth: false, autoSize: false, mouseWheel: false, // ага, вот этот флаг wrapCSS: 'gallery-fancy', helpers: { title: { type: 'inside', position: 'top' }, overlay: { css: { 'background': 'rgba(0, 0, 0, 0.8)' }, } }, tpl: { next: '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span>›</span></a>', prev: '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span>‹</span></a>' }, beforeLoad: function() { this.title = "<span class='gallery__title-left'>" + (this.title ? this.title : '') + "</span>" + "<span class='gallery__title-right'>" + (this.index + 1) + ' из ' + this.group.length + "</span>"; } }); 
 ul { padding: 0; margin: 0; list-style-type: none; } ul li { width: 100px; height: 100px; float: left; border: 1px solid red; } a { display: block; width: 100%; height: 100%; } 
 <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.6/css/jquery.fancybox.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.6/js/jquery.fancybox.min.js"></script> <ul> <li> <a href="https://dummyimage.com/600x400/000/fff&text=big-1#.png" rel="gr1" title="1 img"> <img src="https://dummyimage.com/100x100/000/fff&text=prev-1" alt=""> </a> </li> <li> <a href="https://dummyimage.com/600x400/000/fff&text=big-2#.png" rel="gr1" title="1 img"> <img src="https://dummyimage.com/100x100/000/fff&text=prev-2" alt=""> </a> </li> <li> <a href="https://dummyimage.com/600x400/000/fff&text=big-3#.png" rel="gr1" title="1 img"> <img src="https://dummyimage.com/100x100/000/fff&text=prev-3" alt=""> </a> </li> </ul>