Giter Club home page Giter Club logo

lg-autoplay's Introduction

Sachin's GitHub stats

lg-autoplay's People

Contributors

sachinchoolur avatar

Watchers

avatar avatar avatar

Forkers

mickyfen17 alangreene cerynna valumin jadiator kleberrao

lg-autoplay's Issues

Autoplay does not seem to work or I'm doing something wrong :(

Hi,

I just started to use lightGallery and facing a problem with autoplay not starting.

This is the code I use to launch it:
`
function init_gallery() {

const lgContainer = document.getElementById('inline-gallery-container');
const inlineGallery = lightGallery(lgContainer, {
	plugins: [lgZoom, lgFullscreen, lgThumbnail, lgHash, lgAutoplay],
	licenseKey: 'your_license_key',
	speed: 500,
	thumbnail: true,
	mode: 'lg-fade',
	download: false,
	/* inline-gallery-container */
	container: lgContainer,
	dynamic: true,
	hash: false,
	closable: false,
	showMaximizeIcon: true,
	appendSubHtmlTo: '.lg-item',
	autoplay: true,
	slideDelay: 400,
	pause: 1000,
	dynamicEl: [
		{$slideIMGS}
	],
});
inlineGallery.openGallery();

}

document.addEventListener("DOMContentLoaded", init_gallery);
`

$slideIMGS is prepared in PHP and seems to be right.

Why the slide does not start automatically after the page is loaded is a mystery to me.

You can see the page in action here:
https://tf.ugosinhache.com/en/

I hope someone can give me a clue.

Thank you!

lg-autoplay.js Uncaught TypeError: Cannot read property 'modules' of undefined

is not loading perfectly showing some unknown properties

Html Structure

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>LightGallery JS</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.0/css/lightgallery.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div id="lightgallery">
        <a href="img/1.jpg" class="images">
            <img src="img/1.jpg" />
        </a>
        <a href="img/2.jpg" class="images">
            <img src="img/2.jpg" />
        </a>
        <a href="img/3.jpg" class="images">
            <img src="img/3.jpg" />
        </a>
        <a href="img/4.jpg" class="images">
            <img src="img/4.jpg" />
        </a>
        <a href="img/5.jpg" class="images">
            <img src="img/5.jpg" />
        </a>
        <a href="img/6.jpg" class="images">
            <img src="img/6.jpg" />
        </a>
        <a href="img/7.jpg" class="images">
            <img src="img/7.jpg" />
        </a>
        <a href="img/8.jpg" class="images">
            <img src="img/8.jpg" />
        </a>
        <a href="img/9.jpg" class="images">
            <img src="img/9.jpg" />
        </a>
        <a href="img/10.jpg" class="images">
            <img src="img/10.jpg" />
        </a>
        <!-- ... -->
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/lightgallery.min.js"></script>
    <script src="js/main.js"> </script>

    <!-- A jQuery plugin that adds cross-browser mouse wheel support. (Optional) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
    <script src="js/lg-thumbnail.min.js"></script>
    <script src="js/lg-autoplay.min.js"></script>
    <script src="js/lg-fullscreen.min.js"></script>
</body>

</html>

Browser Console:

lg-autoplay.min.js:53 Uncaught TypeError: Cannot read property 'modules' of undefined
    at lg-autoplay.min.js:53
    at lg-autoplay.min.js:54
    at lg-autoplay.min.js:7
    at lg-autoplay.min.js:8
(anonymous) @ lg-autoplay.min.js:53
(anonymous) @ lg-autoplay.min.js:54
(anonymous) @ lg-autoplay.min.js:7
(anonymous) @ lg-autoplay.min.js:8
lg-fullscreen.min.js:41 Uncaught TypeError: Cannot read property 'modules' of undefined
    at lg-fullscreen.min.js:41
    at lg-fullscreen.min.js:42
    at lg-fullscreen.min.js:7
    at lg-fullscreen.min.js:8

Could not stop/start auto playing gallery

I initialize lightGallery with next options:

$("#lightgallery").lightGallery({
    autoplay: true,
    pause: 1500,
    download: false,
    enableSwipe: false
});

And I want to pause/start auto swiping gallery after clicking on image. But I didn't find any method or option to do this.

I tried in next method, but it not work:

var isPaused = false;
lightgallery.on('onSlideClick.lg', function() {
    var autoplayModule = $("#lightgallery").data('lightGallery').modules.autoplay;
    if(isPaused) {
        autoplayModule.startlAuto();
    } else {
        autoplayModule.cancelAuto();
    }
    autoplayModule.interval = isPaused = !isPaused;
});

How I can resolve my problem?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.