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

jQuery Supersized - add Youtube slide JavaScript

  • SOLVED

Hello,

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="https://github.com/krismeister/supersized/archive/master.zip"]][[/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):



switch(slideData.type){

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="http://player.vimeo.com/video/'+slideData.video_id+'?api=1&player_id=' + uid + '"';
html += ' id="'+uid+'"';
html += ' width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
targetList.html(html);
var iframe=targetList.find('iframe')[0];
$f(iframe).addEvent('ready', function() {
console.log("ready called");
base.resizeNow(); // Resize background image
if(loadedCallback) loadedCallback($(this));


});
break;

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

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

img.load(function(){
base._origDim($(this));
base.resizeNow(); // Resize background image
if(loadedCallback) loadedCallback($(this)); //
}); // End IMAGE
break;

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

var html = '<iframe width="100%" height="100%" src="http://www.youtube.com/embed/' + slideData.video_id + '" frameborder="0" allowfullscreen></iframe>';
targetList.html(html);
break;

}


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:


$.supersized({

...


slides : [ // Slideshow Images


{type:'VIMEO', video_id : "27855315", title : 'Fun Video !', thumb : 'http://b.vimeocdn.com/ts/185/416/185416838_200.jpg'},

{type:'YOUTUBE', video_id : "zjCiP16wSGI", title : 'Fun Video !', thumb : 'http://b.vimeocdn.com/ts/185/416/185416838_200.jpg'},

{type:'VIMEO', video_id : "41989773", title : 'Fun Video 2!', thumb : 'http://b.vimeocdn.com/ts/291/167/291167091_200.jpg'},

{type:'IMAGE', image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},

]

});


Answers (3)

2012-12-09

Christianto answers:

Please check this code..
http://pastebin.com/V1NPFkTR

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.

Thanks


Christianto comments:

Attached file didn't appear?

Please download from this link
https://www.dropbox.com/s/gth3xortjjqt42x/slideshow.zip

2012-12-07

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.

2012-12-07

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.