Gallery using Photobox - javascript

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

How to run inline script AFTER jquery confirmed as defined

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
});
});
});
};

Play and Pause in BookBlock.js

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;
});
});

Using flowplayer autoplay true is not working in javascript

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.

Dropzone.js call a custom function after file is uploaded

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");
});
}
};
});

Angularjs and jquery html5Loader

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);
}
});

Categories

Resources