using same same selector for Query lightGallery + smoothdivscroll,

Question

I would like to use smoothdivscroll (http://smoothdivscroll.com/index.html) for a scrolling block of images which users can open using the http://sachinchoolur.github.io/lightGallery/index.html lightbox. Unfortunately these scripts do not function when using the same selector.

<script type="text/javascript">

 if (Modernizr.touch) {   
    $(".scroll-banner").smoothDivScroll({ 
        hotSpotScrolling: false,
        touchScrolling: true,
        manualContinuousScrolling: true,
        mousewheelScrolling: false
    });
} else {   
$(".scroll-banner").smoothDivScroll({ 
        mousewheelScrolling: "horizontal",
        mousewheelScrollingStep: -1,
        easingAfterMouseWheelScrollingFunction: "easeOutCirc",
        manualContinuousScrolling: true,
        autoScrollingMode: "onStart",
        scrollingHotSpotLeftClass: "prev",
        scrollingHotSpotLeftVisibleClass: "prevVisible",
        scrollingHotSpotRightClass: "next",
        scrollingHotSpotRightVisibleClass: "nextVisible",
});
}
$(function() {
$(".scroll-banner").lightGallery({
      loop:true,
      auto:false,
      pause:1000,
      counter:true,
      vimeoColor: "000000"
    });
});
</script>

How do I get two plugins to use the same selector?

why isn't the smoothDivScroll code inside the `$(function() {...}` like the other function? have you checked to make sure both functions work independently? — ussferox, Aug 09 '14 at 22:30
I have now updated to include the full code, (I was trying to post a slimed down version). The above code returns the following error messages: Uncaught TypeError: Cannot read property 'match' of undefine, Failed to load resource: net::ERR_FILE_NOT_FOUND. Each plugin with function independently but when used on the same select the lightGallery will show a pop-up screen but no images. — Sanders, Aug 09 '14 at 23:44

score 0 · Answer 1 · answered Aug 09 '14 at 23:55

is it possible to use it this way:

$(document).ready(function() {
    var scrollbanner = $(".scroll-banner");
    scrollbanner.smoothDivScroll({ 
        mousewheelScrolling: "horizontal",
        mousewheelScrollingStep: -1,
        easingAfterMouseWheelScrollingFunction: "easeOutCirc",
        manualContinuousScrolling: true,
        autoScrollingMode: "onStart",
        scrollingHotSpotLeftClass: "prev",
        scrollingHotSpotLeftVisibleClass: "prevVisible",
        scrollingHotSpotRightClass: "next",
        scrollingHotSpotRightVisibleClass: "nextVisible",
    });

    scrollbanner.lightGallery({
        loop:true,
        auto:false,
        pause:1000,
        counter:true,
        vimeoColor: "000000"
    });
});

In your code one of the functions is called when DOM is ready and the other is not. Does the behaviour/error change when changing the order of execution for adding the functionality to the divs?

Unfortunately that did not work. The script still show the following errors: Uncaught TypeError: Cannot read property 'match' of undefined lightGallery.js:229 setUp.isVideo lightGallery.js:229 setUp.loadContent lightGallery.js:277 setUp.slide lightGallery.js:564 setUp.build lightGallery.js:114 setUp.init lightGallery.js:95 (anonymous function) lightGallery.js:86 m.event.dispatch jquery.min.js:3 r.handle — Sanders, Aug 10 '14 at 12:11

using same same selector for Query lightGallery + smoothdivscroll,

1 Answers1