Ask your JavaScript questions! Pay money and get answers fast! (more info)

jQuery Supersized - add Youtube slide JavaScript



I need to add a Youtube slide type to Supersized plugin.

As a basis I'm using krismeister's build where he actually added Vimeo slide type there.
[[LINK href=""]][[/LINK]]

The process of creating slide type starts on line 64 supersized.3.2.7.js (you may need to replace minified file with not compressed one in demo.html):


case 'VIMEO':
if(!$f) alert("You must include froogaloops.js to use vimeo slides");

var d = new Date();
var uid = "vimeo-"+ d.getTime() + '_' + uniqueCounter++;
var html = '<iframe src="'+slideData.video_id+'?api=1&player_id=' + uid + '"';
html += ' id="'+uid+'"';
html += ' width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
var iframe=targetList.find('iframe')[0];
$f(iframe).addEvent('ready', function() {
console.log("ready called");
base.resizeNow(); // Resize background image
if(loadedCallback) loadedCallback($(this));


case 'IMAGE':
var slideLink = (base.options.slides[loadPrev].url) ? "href='" + slideData.url + "'" : "";

var img = $('<img src="'+slideData.image+'"/>');
img.appendTo(targetList).wrap('<a ' + slideLink + linkTarget + '></a>');

base.resizeNow(); // Resize background image
if(loadedCallback) loadedCallback($(this)); //
}); // End IMAGE

case 'YOUTUBE':
var d = new Date();

var html = '<iframe width="100%" height="100%" src="' + slideData.video_id + '" frameborder="0" allowfullscreen></iframe>';


Please notice I'm adding Youtube slide type at the bottom and it actually works but only if not set as the first slide. I need it as the first slide though so asking for help.

Slides are called in HTML the following way:



slides : [ // Slideshow Images

{type:'VIMEO', video_id : "27855315", title : 'Fun Video !', thumb : ''},

{type:'YOUTUBE', video_id : "zjCiP16wSGI", title : 'Fun Video !', thumb : ''},

{type:'VIMEO', video_id : "41989773", title : 'Fun Video 2!', thumb : ''},

{type:'IMAGE', image : '', title : 'Image Credit: Maria Kazvan', thumb : '', url : ''},



Answers (3)


Christianto answers:

Please check this code..

I add callback to start slideshow and re-order some code (for showing navigation)..

Please check demo attach.

Let me know if this is work on your site.


Christianto comments:

Attached file didn't appear?

Please download from this link


Arnav Joy answers:

so you want to show youtube video as the first item to the slideshow if yes then move the code of the youtube to up at both places

denoizzed comments:

The issue is on creating slide stage, not in second script where I'm setting slides.


Rainner Lins answers:

Try removing "default:" right under "case 'IMAGE':" in your switch.
I think that's causing it to call the image type case before it gets to the youtube case in the switch.