CODEWITHSUNDEEP
javascriptjqueryhtmlpopupmagnific-popup
rumdrums
rumdrums

Reputation: 1382

How load on double-click instead of click for magnific popup

I thought this would be a very simple problem: How to override Magnific Popup's default method of loading: Instead of loading images on click, I want to load on double-click.

I'm using the module to load images on a site. This is the js code for the page:

 $(document).ready(function() {
    // override magnificPopup.resizeImage:
    $.magnificPopup.instance.resizeImage = betterResizeImage;

    var magnific = $('#photoList').magnificPopup({
        delegate: 'img', // child items selector, by clicking on it popup will open
        type: 'image',
        closeOnContentClick: true,
    });

    $.getJSON('/json', function(json) {
        console.log('got json');
        json.forEach(function(item) {
            var img=$('<img/>')
                .attr('src', '/img/' + item.thumbnail)
                .attr('class', 'thumnail')
                .attr('data-mfp-src', '/img/' + item.file_name)
                .on('load', function() {
                    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
                        console.log('error loading ' + item.thumbnail);
                    } else {
                        $('#photoList').append(img);
                    }            
                });
        });
    });
});

$('#photoList') is just a div that holds images that get appended to it after page load. All I'm trying to do is change free up the single-click event for something else and instead have Magnific Popup open on double-click.

I can't figure out where in the module's code the onclick event is registered to open the module and how I would overwrite it. Mosh Feu's answer is close, but it results in the first image within the div being opened each time any of the images are double-clicked.

Magnific Popup on Github: https://github.com/dimsemenov/Magnific-Popup

Upvotes: 1

Views: 2233

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29347

The solution is to remove the click handler and add double click (dblclick) event.

// init magnific
var magnific = $('.magnific').magnificPopup({
  type: 'iframe'
});

// remove click handler of magnific
magnific.off('click');

// prevent the default click event of the link so it will no redirect to the `href`
magnific.on('click', function(e) {
  e.preventDefault();
});

// add double click handler and call the `open` function of magnific
magnific.on('dblclick', function(){
  magnific.magnificPopup('open')
});
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css" rel="stylesheet" />

<a class="magnific" href="https://www.youtube.com/watch?v=ij_0p_6qTss" class="magnific">magnific</a>

Update

If you want to show a gallery, that's the way:

// init magnific
var magnific = $('.container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image',
  gallery:{
    enabled:true
  }
});

var links = magnific.find('a');

// remove click handler of magnific
magnific.off('click');

// prevent the default click event of the link so it will no redirect to the `href`
links.on('click', function(e) {
  e.preventDefault();
});

// add double click handler and call the `open` function of magnific with a specific index
links.on('dblclick', function() {
  magnific.magnificPopup('open', links.index(this))
});
a {
  text-decoration:none;
}

img {
  width:100px;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css" rel="stylesheet" />

<div class="container">
  <a href="http://www.freeimageslive.com/galleries/objects/general/pics/sun0824.jpg">
    <img src="http://www.freeimageslive.com/galleries/objects/general/sun0824_small.jpg" />
  </a>
  <a href="http://www.freeimageslive.com/galleries/objects/general/pics/sunobject.jpg">
    <img src="http://www.freeimageslive.com/galleries/objects/general/sunobject_small.jpg" />
  </a>
  <a href="http://www.freeimageslive.com/galleries/objects/general/pics/sun0824a.jpg">
    <img src="http://www.freeimageslive.com/galleries/objects/general/sun0824a_small.jpg" />
  </a>
</div>

http://jsbin.com/cusixax/edit?html,css,js,output

Upvotes: 1

Related Questions