Flickity.js gallery crashes on load

Multi tool use
I am trying to load a simple js based gallery - Flickity.js
As per mentioned in the example, i tried loading up the gallery which works perfectly fine .
But randomly, the gallery crashes upon page load:
the code that i use to initiate the gallery:
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script>
$('.main-carousel').flickity({
// options
cellAlign: 'left',
contain: true,
pageDots: false,
});
</script>
I do understand that this maybe related to the document (images not loading) at the time the script is initiated so as a result , i tried including the document.ready function which infact throws another error .
$( document ).ready(function() {
$('.main-carousel').flickity({
// options
cellAlign: 'left',
contain: true,
pageDots: false,
});
});
the outcome of this is, it shows flickity is not a function.
why is this happening?
javascript jquery html flickity
add a comment |
I am trying to load a simple js based gallery - Flickity.js
As per mentioned in the example, i tried loading up the gallery which works perfectly fine .
But randomly, the gallery crashes upon page load:
the code that i use to initiate the gallery:
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script>
$('.main-carousel').flickity({
// options
cellAlign: 'left',
contain: true,
pageDots: false,
});
</script>
I do understand that this maybe related to the document (images not loading) at the time the script is initiated so as a result , i tried including the document.ready function which infact throws another error .
$( document ).ready(function() {
$('.main-carousel').flickity({
// options
cellAlign: 'left',
contain: true,
pageDots: false,
});
});
the outcome of this is, it shows flickity is not a function.
why is this happening?
javascript jquery html flickity
add a comment |
I am trying to load a simple js based gallery - Flickity.js
As per mentioned in the example, i tried loading up the gallery which works perfectly fine .
But randomly, the gallery crashes upon page load:
the code that i use to initiate the gallery:
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script>
$('.main-carousel').flickity({
// options
cellAlign: 'left',
contain: true,
pageDots: false,
});
</script>
I do understand that this maybe related to the document (images not loading) at the time the script is initiated so as a result , i tried including the document.ready function which infact throws another error .
$( document ).ready(function() {
$('.main-carousel').flickity({
// options
cellAlign: 'left',
contain: true,
pageDots: false,
});
});
the outcome of this is, it shows flickity is not a function.
why is this happening?
javascript jquery html flickity
I am trying to load a simple js based gallery - Flickity.js
As per mentioned in the example, i tried loading up the gallery which works perfectly fine .
But randomly, the gallery crashes upon page load:
the code that i use to initiate the gallery:
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script>
$('.main-carousel').flickity({
// options
cellAlign: 'left',
contain: true,
pageDots: false,
});
</script>
I do understand that this maybe related to the document (images not loading) at the time the script is initiated so as a result , i tried including the document.ready function which infact throws another error .
$( document ).ready(function() {
$('.main-carousel').flickity({
// options
cellAlign: 'left',
contain: true,
pageDots: false,
});
});
the outcome of this is, it shows flickity is not a function.
why is this happening?
javascript jquery html flickity
javascript jquery html flickity
edited Jan 8 at 21:07


James Z
11.1k71935
11.1k71935
asked Dec 29 '18 at 16:11
titustitus
51
51
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Try using
$(window).on('load', function() {
// your code here
});
since $(document).ready
is fired only when DOM (HTML) is loaded.
Edit: Also, since you are using Juicer.io/embedjs, you should import it before Flickity, since it contains JQuery already (and remove the standalone JQuery import):
<script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script>
$(window).on('load', function() {
$('.carousel').flickity({
// options
cellAlign: 'left',
contain: true,
pageDots: false,
adaptiveHeight: true
});
});
</script>
http://jsfiddle.net/pycfs5e8/
If you still need to import JQuery for some reason, you can also use Embed with no JQuery version (not tested):
<script src="//assets.juicer.io/embed-no-jquery.js" type="text/javascript"></script>
tried the same , the issue remains .<script> $(window).on('load', function() { $('.main-carousel,.gallery,.related-topics').flickity({ // options cellAlign: 'left', contain: true, pageDots: false, adaptiveHeight: true }); }); </script>
– titus
Dec 30 '18 at 4:04
Are you importing the libraries in order? 1st JQuery, 2nd Flickity, 3rd your script. Like this codepen.io/desandro/pen/yyvXYL
– Rashomon
Dec 30 '18 at 11:03
Hey there , i found that the issue is with this library - Juicer.io<script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
how do i find what is causing the issue ? When i remove this , flickity is being initailzed properly .
– titus
Dec 30 '18 at 12:39
Have a look at the source code here : [link](www.shadesproperties.ae)
– titus
Dec 30 '18 at 12:43
You can create a JSFiddle replicating your problem. Couldnt find anything in a minified code
– Rashomon
Dec 30 '18 at 13:09
|
show 2 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53971172%2fflickity-js-gallery-crashes-on-load%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try using
$(window).on('load', function() {
// your code here
});
since $(document).ready
is fired only when DOM (HTML) is loaded.
Edit: Also, since you are using Juicer.io/embedjs, you should import it before Flickity, since it contains JQuery already (and remove the standalone JQuery import):
<script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script>
$(window).on('load', function() {
$('.carousel').flickity({
// options
cellAlign: 'left',
contain: true,
pageDots: false,
adaptiveHeight: true
});
});
</script>
http://jsfiddle.net/pycfs5e8/
If you still need to import JQuery for some reason, you can also use Embed with no JQuery version (not tested):
<script src="//assets.juicer.io/embed-no-jquery.js" type="text/javascript"></script>
tried the same , the issue remains .<script> $(window).on('load', function() { $('.main-carousel,.gallery,.related-topics').flickity({ // options cellAlign: 'left', contain: true, pageDots: false, adaptiveHeight: true }); }); </script>
– titus
Dec 30 '18 at 4:04
Are you importing the libraries in order? 1st JQuery, 2nd Flickity, 3rd your script. Like this codepen.io/desandro/pen/yyvXYL
– Rashomon
Dec 30 '18 at 11:03
Hey there , i found that the issue is with this library - Juicer.io<script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
how do i find what is causing the issue ? When i remove this , flickity is being initailzed properly .
– titus
Dec 30 '18 at 12:39
Have a look at the source code here : [link](www.shadesproperties.ae)
– titus
Dec 30 '18 at 12:43
You can create a JSFiddle replicating your problem. Couldnt find anything in a minified code
– Rashomon
Dec 30 '18 at 13:09
|
show 2 more comments
Try using
$(window).on('load', function() {
// your code here
});
since $(document).ready
is fired only when DOM (HTML) is loaded.
Edit: Also, since you are using Juicer.io/embedjs, you should import it before Flickity, since it contains JQuery already (and remove the standalone JQuery import):
<script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script>
$(window).on('load', function() {
$('.carousel').flickity({
// options
cellAlign: 'left',
contain: true,
pageDots: false,
adaptiveHeight: true
});
});
</script>
http://jsfiddle.net/pycfs5e8/
If you still need to import JQuery for some reason, you can also use Embed with no JQuery version (not tested):
<script src="//assets.juicer.io/embed-no-jquery.js" type="text/javascript"></script>
tried the same , the issue remains .<script> $(window).on('load', function() { $('.main-carousel,.gallery,.related-topics').flickity({ // options cellAlign: 'left', contain: true, pageDots: false, adaptiveHeight: true }); }); </script>
– titus
Dec 30 '18 at 4:04
Are you importing the libraries in order? 1st JQuery, 2nd Flickity, 3rd your script. Like this codepen.io/desandro/pen/yyvXYL
– Rashomon
Dec 30 '18 at 11:03
Hey there , i found that the issue is with this library - Juicer.io<script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
how do i find what is causing the issue ? When i remove this , flickity is being initailzed properly .
– titus
Dec 30 '18 at 12:39
Have a look at the source code here : [link](www.shadesproperties.ae)
– titus
Dec 30 '18 at 12:43
You can create a JSFiddle replicating your problem. Couldnt find anything in a minified code
– Rashomon
Dec 30 '18 at 13:09
|
show 2 more comments
Try using
$(window).on('load', function() {
// your code here
});
since $(document).ready
is fired only when DOM (HTML) is loaded.
Edit: Also, since you are using Juicer.io/embedjs, you should import it before Flickity, since it contains JQuery already (and remove the standalone JQuery import):
<script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script>
$(window).on('load', function() {
$('.carousel').flickity({
// options
cellAlign: 'left',
contain: true,
pageDots: false,
adaptiveHeight: true
});
});
</script>
http://jsfiddle.net/pycfs5e8/
If you still need to import JQuery for some reason, you can also use Embed with no JQuery version (not tested):
<script src="//assets.juicer.io/embed-no-jquery.js" type="text/javascript"></script>
Try using
$(window).on('load', function() {
// your code here
});
since $(document).ready
is fired only when DOM (HTML) is loaded.
Edit: Also, since you are using Juicer.io/embedjs, you should import it before Flickity, since it contains JQuery already (and remove the standalone JQuery import):
<script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script>
$(window).on('load', function() {
$('.carousel').flickity({
// options
cellAlign: 'left',
contain: true,
pageDots: false,
adaptiveHeight: true
});
});
</script>
http://jsfiddle.net/pycfs5e8/
If you still need to import JQuery for some reason, you can also use Embed with no JQuery version (not tested):
<script src="//assets.juicer.io/embed-no-jquery.js" type="text/javascript"></script>
edited Dec 31 '18 at 10:24
answered Dec 29 '18 at 19:35
RashomonRashomon
367212
367212
tried the same , the issue remains .<script> $(window).on('load', function() { $('.main-carousel,.gallery,.related-topics').flickity({ // options cellAlign: 'left', contain: true, pageDots: false, adaptiveHeight: true }); }); </script>
– titus
Dec 30 '18 at 4:04
Are you importing the libraries in order? 1st JQuery, 2nd Flickity, 3rd your script. Like this codepen.io/desandro/pen/yyvXYL
– Rashomon
Dec 30 '18 at 11:03
Hey there , i found that the issue is with this library - Juicer.io<script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
how do i find what is causing the issue ? When i remove this , flickity is being initailzed properly .
– titus
Dec 30 '18 at 12:39
Have a look at the source code here : [link](www.shadesproperties.ae)
– titus
Dec 30 '18 at 12:43
You can create a JSFiddle replicating your problem. Couldnt find anything in a minified code
– Rashomon
Dec 30 '18 at 13:09
|
show 2 more comments
tried the same , the issue remains .<script> $(window).on('load', function() { $('.main-carousel,.gallery,.related-topics').flickity({ // options cellAlign: 'left', contain: true, pageDots: false, adaptiveHeight: true }); }); </script>
– titus
Dec 30 '18 at 4:04
Are you importing the libraries in order? 1st JQuery, 2nd Flickity, 3rd your script. Like this codepen.io/desandro/pen/yyvXYL
– Rashomon
Dec 30 '18 at 11:03
Hey there , i found that the issue is with this library - Juicer.io<script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
how do i find what is causing the issue ? When i remove this , flickity is being initailzed properly .
– titus
Dec 30 '18 at 12:39
Have a look at the source code here : [link](www.shadesproperties.ae)
– titus
Dec 30 '18 at 12:43
You can create a JSFiddle replicating your problem. Couldnt find anything in a minified code
– Rashomon
Dec 30 '18 at 13:09
tried the same , the issue remains .
<script> $(window).on('load', function() { $('.main-carousel,.gallery,.related-topics').flickity({ // options cellAlign: 'left', contain: true, pageDots: false, adaptiveHeight: true }); }); </script>
– titus
Dec 30 '18 at 4:04
tried the same , the issue remains .
<script> $(window).on('load', function() { $('.main-carousel,.gallery,.related-topics').flickity({ // options cellAlign: 'left', contain: true, pageDots: false, adaptiveHeight: true }); }); </script>
– titus
Dec 30 '18 at 4:04
Are you importing the libraries in order? 1st JQuery, 2nd Flickity, 3rd your script. Like this codepen.io/desandro/pen/yyvXYL
– Rashomon
Dec 30 '18 at 11:03
Are you importing the libraries in order? 1st JQuery, 2nd Flickity, 3rd your script. Like this codepen.io/desandro/pen/yyvXYL
– Rashomon
Dec 30 '18 at 11:03
Hey there , i found that the issue is with this library - Juicer.io
<script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
how do i find what is causing the issue ? When i remove this , flickity is being initailzed properly .– titus
Dec 30 '18 at 12:39
Hey there , i found that the issue is with this library - Juicer.io
<script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
how do i find what is causing the issue ? When i remove this , flickity is being initailzed properly .– titus
Dec 30 '18 at 12:39
Have a look at the source code here : [link](www.shadesproperties.ae)
– titus
Dec 30 '18 at 12:43
Have a look at the source code here : [link](www.shadesproperties.ae)
– titus
Dec 30 '18 at 12:43
You can create a JSFiddle replicating your problem. Couldnt find anything in a minified code
– Rashomon
Dec 30 '18 at 13:09
You can create a JSFiddle replicating your problem. Couldnt find anything in a minified code
– Rashomon
Dec 30 '18 at 13:09
|
show 2 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53971172%2fflickity-js-gallery-crashes-on-load%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
RADxmDzCEjYLNg,JfGy5n8JJB,biM08Jgl38c ti