I am using the following code for a gallery in AngularJS but if I try to use it without AngularJS it doesn't seems to work. If I run it with AngularJS then it will open the images properly but if I run it normally it will open the image as Can anyone to explain to me the difference?
app.js (AngularJS)
app.controller('GalleryController', function() {
var gallery = $('#gallery'),
gallery1 = $('#gallery1');
console.log("init gallery");
$('#gallery').photobox('a', {
thumbs: true,
loop: false
}, callback);
$('#gallery1').photobox('a', {
thumbs: true,
loop: false
}, callback);
function callback(){
console.log('image has been loaded');
}
console.log("GALLERY CONTROLLER BEGIN");
});
gallery.html (jQuery)
(function() {
'use strict';
var gallery = $('#gallery'),
gallery1 = $('#gallery1');
console.log("init gallery");
$('#gallery').photobox('a', {
thumbs: true,
loop: false
}, callback);
$('#gallery1').photobox('a', {
thumbs: true,
loop: false
}, callback);
function callback(){
console.log('image has been loaded');
}
console.log("GALLERY CONTROLLER BEGIN");
});
Related
I'm working under particular circumstances and I am trying to get a slick slider carousel to run.
I get an error that $ is not defined.
Unless I use
window.onload = function(e){
$(document).ready(function () {
$('.js-slick').slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
fade: true,
speed: 1000
});
});
};
The problem is, this slider is the first thing on the page, so I can not wait until everything is loaded, as it takes way too long.
I cannot change the order of my script tag or make sure the jQuery link is properly placed in the head an so on.
I know that other sliders on the page work just fine, and I also know that this particular one works fine once the proper files are loaded
There must be a way to check if $ is defined, keep checking until it is, and then run the script once confirmed.
use a waiter:
setTimeout(function wait(){
if(!window.$) return setTimeout(wait, 100);
// do stuff needing $ here:
console.info("$=", $);
}, 100);
var timer = setInterval(checkjQuery, 5000);
function checkjQuery() {
if(window.jQuery) {
clearInterval(timer);
callSlick();
console.log('jQuery is loaded');
return;
} else {
console.log('waiting');
}
}
function callSlick() {
$('.js-slick').slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
fade: true,
speed: 1000
});
};
Similar to DanDavis solution
IMO the answer from #dandavis solves the issue the simplest.
I'd like to offer a way to make a simple "wait-er" re-usable and show how to integrate this with the code you shared.
A re-usable wait-er:
function waitUntil(getResource, callback) {
// Copied from #dandavis' answer
setTimeout(function wait() {
const resource = getResource();
if(!resource) return setTimeout(wait, 100);
callback(resource);
}, 100);
}
window.onload = function(e) {
waitUntil(function () { return window.$; }, function () {
$(document).ready(function () {
$('.js-slick').slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
fade: true,
speed: 1000
});
});
});
};
Or if you wanted to, you could make it promise-based:
function waitUntil(getResource) {
return new Promise((resolve, reject) => {
setTimeout(function wait() {
const resource = getResource();
if(!resource) return setTimeout(wait, 100);
resolve(resource);
}, 100);
});
}
window.onload = function(e) {
waitUntil(function () { return window.$; })
.then(function () {
$(document).ready(function () {
$('.js-slick').slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
fade: true,
speed: 1000
});
});
});
};
How to create play and pause functionality in bookblock.js.
below is my js function which is invoked on click of play/pause button.
i am not able to pause(and again recycle) the slideshow using this function. what is wrong in this.
function playPauseSlide(obj) {
if (isPlay) {
$(obj).find('i').removeClass('glyphicon-pause').addClass('glyphicon-play');
$('#bb-bookblock').bookblock({ autoplay: false });
} else {
$(obj).find('i').removeClass('glyphicon-play').addClass('glyphicon-pause');
$('#bb-bookblock').bookblock({ autoplay: true, interval: 1000 });
}
isPlay = !isPlay;
}
after lots of trying i finally added play and pause functions in slide show by customizing the script.
jquery.bookblock.js
_pauseSlideshow: function () {
if ( this.options.autoplay ) {
clearTimeout( this.slideshow );
}
},
//// public method: pause the slide show
pause: function () {
this._pauseSlideshow();
},
//// public method: play again the paused slide show
playAgain: function () {
this.options.autoplay = true;
this._navigate('next', this.$currentItem);
this._startSlideshow();
},
In my view script
var config = {
$bookBlock: $('#bb-bookblock'),
$navNext: $('#nextPage'),
$navPrev: $('#prevPage'),
$navFirst: $('#bb-nav-first'),
$navLast: $('#bb-nav-last'),
$pause: $('#pause'),
$playAgain: $('#playAgain'),
},
initEvents = function () {
config.$pause.on('click touchstart', function () {
config.$bookBlock.bookblock('pause');
return false;
});
config.$playAgain.on('click touchstart', function () {
config.$bookBlock.bookblock('playAgain');
return false;
});
});
I'm in PHP website. Am trying to play the video automatically in the flowplayer. but it is not working and not giving any problem
$(function(){
// Top Stories videos
var topStoriesVideos = [
{
sources: [
{
type: 'video/mp4',
src: "https://storage.googleapis.com/web-assets/videos/Youarewatchingtrd/ad2/Ad2/Ad2-360p.mp4"
}
]
},
];
PlaylistApi = flowplayer("#tv", { autoPlay: true,
playlist: topStoriesVideos,
});
})
flowplayer(function (api, root) {
api.on("load", function () {
}).on("ready", function () {
history.replaceState({}, '', x[count++]);
});
api.bind("finish", function(){
});
$("#pause").click(function(){
api.pause(function(){
})
})
});
I tried clip:{autoplay: true,},
But it is also not working
It should be autoplay: true instead of autoPlay: true
The 'P' shouldn't be capitalized.
I want to call my own function after the file/files successfully uploaded. This is what I have done so far. Files are being uploaded without a problem but the following code is not working actually.
I just put this code above the Dropzone upload form..
<script>
$(function() {
Dropzone.options.dropzoneJsForm = {
maxFilesize: 10, // Mb
init: function () {
this.on('completemultiple', function () {
alert("sdfsdf");
});
}
};
});
</script>
Add "uploadMultiple: true" to your init.
$(function() {
Dropzone.options.dropzoneJsForm = {
maxFilesize: 10, // Mb
uploadMultiple : true,
init: function () {
this.on('completemultiple', function () {
alert("sdfsdf");
});
}
};
});
In my app i try to create a preloader with jquery.html5loader like this :
$.html5Loader({
filesToLoad: 'load.json', // this could be a JSON or simply a javascript object
onBeforeLoad: function () {
$('body').append('<div id="load">Loading....</div>');
},
onComplete: function () {
$('#load').hide();
console.log('Complete Loaded');
},
onElementLoaded: function ( obj, elm) { },
onUpdate: function ( percentage ) {
// sleep(100000);
console.log(percentage);
$("#load").text(' '+percentage);
}
});
the script correctly work and i get Complete loaded log in console when all script loaded but i get another error on angular
Uncaught object angular.js:36
in my json file i load all script except jquery,angular.js,angular-route.js . i think the problem is because i have a this code in my html :
<html ng-app="myApp">
Probably you are doing something wrong. I've created this simple jsfiddle embedding angularjs in the page and everything seems to work.
$.html5Loader({
filesToLoad: {
files: [{
"type": "SCRIPT",
"source": "//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js",
"size": 4.096,
}]
},
onBeforeLoad: function() {
console.log('Before load');
$('body').append('<div id="load">Loading....</div>');
},
onComplete: function() {
$('#load').hide();
console.log('Complete Loaded');
},
onUpdate: function(percentage) {
// sleep(100000);
console.log(percentage);
$("#load").text(' ' + percentage);
}
});