Cargo Collective Lightbox, Override JavaScript Function, Click to Double-click

Question

I have an earlier generation cargocollective.com website (using the Runyon template) that has a lightbox feature I want to enable.

I've disabled lightbox in my site's config because I also have custom code that allows for dragging gallery images, to scroll them across the screen.

Enabling the lightbox causes the first image the drag event contacts, to expand/zoom, when the mouse click is released, after dragging.

I'd like the lightbox instead to open only on a double-click.

I believe the code below is what causes the image to expand (when lightbox is enabled), and after releasing the mouse click on a drag event.

        // Only inititilize the lightbox when that display option is checked
        if($("fullscreen_option").attr("data") == "lightbox" ) {
            // Find the parent
            // Initialize lightbox when clicking project_content img
            $(self.options.parent+" "+self.options.element, self).each(function() {
                // If this is a Cargo uploaded image or not in an anchor tag
                if ( $(this).is("[src_o]") && !$(this).parent("a").length > 0 ) {
                
                    // Cursor style
                    $(this).css("cursor", function() {
                        if ($.browser.mozilla) {
                            return '-moz-zoom-in';
                        } else if ($.browser.webkit) {
                            return '-webkit-zoom-in';
                        } else {
                            return 'pointer'; 
                        }
                    });
                
                    // Setup
                    $(this).die().unbind("click").click( function(e) {
                        self.InitLightbox(e, $(this).attr("data-mid"), $(this).parents(".entry").attr("id"));
                        return false;
                    });
                };
            });
        } // end if lightbox

The .js snippet the code above is from, is referenced in a file unavailable for me to edit -- cargo.site.package.js?26.11.18.1.

My site loads the files like this:

On inspecting an image that behaves as described when lighbox is enabled, my browser says the code relates to jquery and shows events: click, dragend, and dragstart, and displays code that is also included in the above snippet - specifically it displays this part:

function(e) {
  self.InitLightbox(e, $(this).attr("data-mid"), $(this).parents(".entry").attr("id"));
  return false;
}

Can I override the referenced function above by including a version of it in the custom code area that responds on double-click instead of on a single-click? I think the following might need the edit:

$(this).die().unbind("click").click( function(e) {

Maybe .click to .dblclick? I'm not sure how to override this function but think my custom code area loads after cargo.site.package.js?26.11.18.1, so hopefully, it seems possible.

My custom code references (I don't think this is relevant):

https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

I notice the cargo.site.package.js?26.11.18.1 file seems to reference jquery-ui-1.8.18.custom.min.js (I don't think this is relevant).

In the past, I've used var jq = jQuery.noConflict(true); in cargo collective's custom html/custom code area -- I believe to reference a different jquery version and/or possibly to use new features. Again, I'm not sure if this would help me or is relevant in this case.

Thanks for any help!

P.S. Here's the custom code that handles the dragging - hopefully, it doesn't create issues for any single-click to double-click lightbox fix (or, ... maybe it could be modified to not trigger the lightbox on a mouse click release?):

jq('.entry').draggable({
  axis: 'x', 
  cursor: 'grabbing', 
  opacity: 0.80, 
  drag: function(event, ui) {
    var left = ui.position.left,
      offsetWidth = ($(this).width() - $(this).parent().width()) * -1;

    if (left > 0) {
      ui.position.left = 0;
    }
    if (offsetWidth > left) {
      ui.position.left = offsetWidth ;
    }
  }
});

// To scroll while dragging
var curDown = false,
  // curYPos = 0,
  curXPos = 0;
$('.entry').mousemove(function(m){
  if(curDown === true){
    // $(window).scrollTop($(window).scrollTop() + (curYPos - m.pageY)); 
    $(window).scrollLeft($(window).scrollLeft() + (curXPos - m.pageX));
  }
});

$('.entry').mousedown(function(m){
  curDown = true;
  // curYPos = m.pageY;
  curXPos = m.pageX;
});

$('.entry').mouseup(function(){
  curDown = false;
});

Cargo Collective Lightbox, Override JavaScript Function, Click to Double-click

0 Answers