Develop Reference

Slow image loading using spritespin.js

Im trying to animate 360 degree spin on a page using lot of images (110) with the spritespin bundle, which means that they are all loaded so that means the page take some time to be viewable. I tried preloading only one frame but then when I spin the picture around some frames dont load correctly (i get white spaces instead), especially on the last frame (so most likely the last frame still did not load).
So this is my spritespin config:
<script>
var frames = SpriteSpin.sourceArray('/images/RcH_png_000{frame}.jpg', {
frame: [1, 110]
});
$(".spritespin").spritespin({
// path to the source images.
source: frames,
//width : 480, // width in pixels of the window/frame
//height : 327, // height in pixels of the window/frame
responsive: true,
animate: false,
preloadCount:1,
plugins: [
'360', // display plugin
'drag', // interaction plugin
]
});
</script>
You can also check how the website is slowly loading here:
https://dry-cove-88007.herokuapp.com

var frames = SpriteSpin.sourceArray('/images/RcH_png_000{frame}.jpg', {
frame: [1, 110]
});
//add img
let imgLoading = $('<span class="loadersprite"><img src="/images/loading.gif"></span>');
imgLoading.insertAfter('.spritespin');
and then in the oncomplete method
$(".spritespin").spritespin({
source: frames,
//width : 480, // width in pixels of the window/frame
//height : 327, // height in pixels of the window/frame
responsive: true,
animate: false,
preloadCount:1,
plugins: [
'360', // display plugin
'drag', // interaction plugin
],
onComplete:function(){
imgLoading.hide();
}
});

change logo and preview image size on full screen

I am using a pro version of Jwplayer. Can I change the size of the logo image for branding and the image size of the Video preview (VTT) in fullscreen mode ?
I need to show bigger image in video preview when on fullscreen and smaller when restored. Same for my custom logo.
This the code I am using
jwplayer("container").setup({
sources: [{
file: "http://15.20.19.73:1935/vod/smil:pls183.smil/jwplayer.smil"
}],
tracks: [{
file: "http://15.20.19.73/video_vtt/thumbs/183.mp_vtt/183.mp_thumbs.vtt",
kind: "thumbnails"
}],
events: {
onComplete: function() {
endHandler();
}
}
});
So It shows a video preview and a logo on left-top position. But it is always of fixed size. In Fullscreen or Not. Can I vary the size of video preview image (Like Youtube does) and the logo size.

You can set the custom logo to a different size in fullscreen using the .jw-flad-fullscreen class in CSS.
.jw-flag-fullscreen .jw-logo {
      width: 150px !important;
      height: 150px !important;
    }
CSS Reference: https://developer.jwplayer.com/jw-player/docs/developer-guide/customization/css-skinning/skins_reference/
JW Player's video transcoding outputs thumbnails at a static 120px width size, so you cannot adjust the thumbnail size in the same way: http://assets-jpcust.jwpsrv.com/strips/92XQ91bP-120.jpg

Below the solution that is working today. For JWplayer 8 and others.
//name player div...
var playerInstance = jwplayer("player");
//Set start logo...
playerInstance.setup({
file: '//gticontrol.com/video.m3u8',
repeat: true,
autostart: shouldAutostart,
"logo": {
"file": "https://gticontrol.com/br_tnt_m.png",
"hide": "true",
"position": "top-left"
}
});
//Creat function to change logo
function changeLogo(playerId, logoUrl){
var logoElem = document.querySelector('#'+playerId + ' .jw-logo');
logoElem.style.backgroundImage='url('+logoUrl+')';
};
//Call If need change logo...
changeLogo(playerInstance.id, 'https://gticontrol.com/mx_hbo-2_m.png');

Playing youtube video randomly on element's background

Currently, I'm using this jquery which gets youtube video and plays them in element's background.
I was provided with this code that will play single youtube video. But I would like to make a list of videos and play them randomly... I am not so good with Javascript at the moment, so I would really appreciated some help on this...
right now I have this....
I wanna make a list of videos and play them randomly like a shuffled playlist..
$(function()
{
var videos = ['xJvt2SDV7ck', 'x6DD1k4BAUg', 'xJvt2SDV7ck'];
var index = Math.floor(Math.random() * videos.length);
var Video_back = new video_background($("#bgvideo"),
{
"position": "absolute", //Stick within the div
"z-index": "-1", //Behind everything
"loop": true, //Loop when it reaches the end
"autoplay": true, //Autoplay at start
"muted": true, //Muted at start
"youtube": "videos[index]", //Youtube video id
"start": 0, //Start with 6 seconds offset (to pass the introduction in this case for example)
"video_ratio": 1.333, // width/height -> If none provided sizing of the video is set to adjust
"fallback_image": "videos/main.jpg", //Fallback image path
});
});
Currently It only plays 1 video randomly selected from the list(single loop).
I want to make it so that it will move on to another video when the first video finishes..
HELP WILL BE MUCH MUCH APPRECIATED! THANK YOU FOR YOUR TIME!

The following answer is based on the fact that there is no way of determining when a video has finished. The lengths are in milliseconds:
$(function()
{
var videos =
[
{ id : 'xJvt2SDV7ck', length : 60000 },
{ id : 'x6DD1k4BAUg', length : 125000 },
{ id : 'xJvt2SDV7ck', length : 166000 }
];
function playNext()
{
var index = Math.floor(Math.random() * videos.length);
alert( "Playing next movie => " + videos[index].id );
var Video_back = new video_background($("#bgvideo"),
{
"position": "absolute", //Stick within the div
"z-index": "-1", //Behind everything
"loop": true, //Loop when it reaches the end
"autoplay": true, //Autoplay at start
"muted": true, //Muted at start
"youtube": videos[index].id, //Youtube video id
"start": 0, //Start with 6 seconds offset (to pass the introduction in this case for example)
"video_ratio": 1.333, // width/height -> If none provided sizing of the video is set to adjust
"fallback_image": "videos/main.jpg", //Fallback image path
});
setTimeout(function()
{
playNext();
}, videos[index].length);
}
playNext();
});

jQuery Hide Class

I have a web page that is loading images and scans across about 600+ images as the user presses next or previous. This is working fine. However, the image load time is slow so the idea is to put a processing while in place of the images until they are fully loaded. I can get the processing wheel to load perfectly fine but I cannot get it to hide once the image or document is loaded. I have tried doing this two different ways:
Attempt 1:
$('#centerImage').ready(function () {
$('.spinner').css('display', 'none');
});
Attempt 2:
$('#centerImage').ready(function () {
$('.spinner').hide();
});
I have also tried replacing the selector #centerImage on the .ready() function with document but still don't see the Processing Wheel get hidden.
What I find strange is that when I try and hide an ID instead of a Class, it works perfectly fine. I tried a 'Try Me' on W3 Schools with a simple example and hiding a class with the .hide() doesn't work there either.
Google isn't returning anything specific to any limitations with jQuery hiding classes. Is this possible or am I approaching this the wrong way?
NOTE: I'm using spin.js for the processing wheel.
All Code:
JavaScript:
EDIT: Added .load instead of .ready
var previousImage = document.getElementById("previousImage");
var centerImage = document.getElementById("centerImage");
var nextImage = document.getElementById("nextImage");
previousImage.setAttribute("src", "../.." + document.getElementById("MainContent_lblPreviousImage").innerHTML);
centerImage.setAttribute("src", "../.." + document.getElementById("MainContent_lblCenterImage").innerHTML);
nextImage.setAttribute("src", "../.." + document.getElementById("MainContent_lblNextImage").innerHTML);
$('#centerImage').load(function () {
$('.spinner').hide();
});
HTML/ASP.NET:
<div id="images">
<img id="previousImage" onload="showProgress()" alt="" src=""/>
<img id="centerImage" onload="showProgress()" alt="" src=""/>
<img id="nextImage" onload="showProgress()" alt="" src=""/>
</div>
Show Progress JavaScript File:
function showProgress () {
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
var target = document.getElementById('images');
var spinner = new Spinner(opts).spin(target);
}
Thanks in advance for any helpful input.

As #Barmar $("#centerimage").ready() is the same as $(document).ready(). There's no separate ready event for each element, it just applies to the whole DOM.
Ready is used to check if the DOM is ready and the load is used to check if the Content is loaded.
Use load instead of ready:
$('#centerImage').load(function () {

cross image to close the light box

i have a cube when u click the cube a light box opens up.....
right now i need to to click outside to close the cube....
i am planning to implement a cross icon to close the cube....
can u tell me how to include the cross icon to close the cube......
providing my code below....
http://jsfiddle.net/rajkumart08/wWaKs/1/
$(window).bind('resize', function() {
location.reload();
Gallery.setOptions({
size: 78,
lightbox: false,
//animation: 'drop'
//speed: 500,
//closeOnEsc: true,
//slideshow: false,
//slideshow_speed: 3000,
//cube_speed: 1000
});
})

if you would like to use a 'close button', like the 'X' graphic in the examples above, specify its location at the top of the lightbox.js file.
var closeButton = 'close.gif';
http://lokeshdhakar.com/projects/lightbox/