- This topic is empty.
-
AuthorPosts
-
August 25, 2014 at 3:02 pm #180592
hira0000
ParticipantI am trying to implement a simple version of AnythingSlider to display a slideshow of videos that I obtained from a Vimeo channel using Vimeo’s API. The problem with this code is that nothing shows up. When I am trying to just display the list of videos using Vimeo’s API, it works fine, but when I try to integrate the Slider’s code, nothing appears. I am using Anything Slider’s demo code (at video.html) to implement this. In the HTML there’s just a div tag with id=”videos”. This id is where I append an unordered list with id=”slider” (as mentioned in the AnythingSlider demo). I am a beginner with Javascript, and HTM, could anyone please let me know why this is not working ?
HTML:
`
<!DOCTYPE html>
<html>
<head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
<script src=”script.js”></script>
<link rel=”stylesheet” href=”http://4b93n32qwvjj3ddn5w3yhffoas6.wpengine.netdna-cdn.com/wp-content/themes/skillcrush3.0/class-files/anything-slider/css/anythingslider.css” /></head>
<body>
<div id=”videos”></div><script src=”http://skillcrush.com/wp-content/themes/skillcrush3.0/class-files/anything-slider/js/jquery.anythingslid
er.min.js”></script>
</body>
</html>
`JavaScript:
`
$(document).ready(function(){
$.ajax({
url:’http://vimeo.com/api/v2/viborganimation/videos.json’,type:’GET’,
}).done(function(response){
var list = “<ul id=’slider’>”;
$.each(response, function(key, value) {
list = list + “<li class=’panel1′><iframe src='” + value.url + “‘ width=”400″ height=”225″ frameborder=”0″></iframe></li>”;
});
list = list + “</ul>”;
$(‘#videos’).append(list);
});//////////Anything Slider Start////
$(function(){
$(‘#slider’)
.anythingSlider({
resizeContents : true,
addWmodeToObject : ‘opaque’,
navigationFormatter : function(index, panel){ // Format navigation labels with text
return [‘Vimeo-iframe’, ‘Vimeo-embed’, ‘YouTube-iframe’, ‘YouTube-embed’, ‘HTML5 Video’][index – 1];
}
})
// Initialize video extension
// see https://developers.google.com/youtube/player_parameters?hl=en#Parameters for a list of parameters
.anythingSliderVideo({
// video id prefix; suffix from $.fn.anythingSliderVideo.videoIndex
videoId : ‘asvideo’,
// auto load YouTube api script
youtubeAutoLoad : true,
// see: https://developers.google.com/youtube/player_parameters#Parameters
youtubeParams: {
modestbranding : 1,
iv_load_policy : 3,
fs : 1
}
});
});
//////////Anything Slider End/////});
`August 25, 2014 at 3:19 pm #180600nixnerd
ParticipantHi @hira0000, so that we can better assist you… would you mind creating a codepen?
August 25, 2014 at 9:30 pm #180635ParticipantThanks, here’s the link: http://codepen.io/h-i-r-a/pen/kyDqj
August 26, 2014 at 8:55 pm #180807ParticipantAlso, I attempted this on JSBin, and it lists a few errors. Over here: http://jsbin.com/vajop/1/ Its where I create an iframe to list all the videos. I don’t understand all of these errors, maybe anyone can help ?
August 26, 2014 at 10:14 pm #180808ParticipantSo, obviously this is doing nothing. What is it SUPPOSED to do?
August 27, 2014 at 3:54 am #180842ParticipantOkay, so what its supposed to do is there there is a div with id=”videos” in the html where a slideshow (of a list of videos) should appear. I get this list of videos from a random Vimeo’s channel using Vimeo’s API, which works fine (as in listing all the videos) if I use the ajax retrieval method like below where I am creating a list of videos using the data obtained :
`
$.ajax({
url:’http://vimeo.com/api/v2/viborganimation/videos.json’,
type:’GET’,
}).done(function(response){
var list = “<ul>”;
$.each(response, function(key, value) {
list = list + “<li><a href='” + value.url + “‘>” + value.title + “</a> </li>”;
});
list = list + “</ul>”;
$(‘#videos’).append(list);
});});
`But the moment I change the above code inside the list variable to include an iframe (the way in original example and as mentioned in the AnythingSlider’s demos) and the AnythingSlider specific function, nothing appears. I’ve taken the above anythingslider specific code from AnythingSlider’s [video.html
](https://github.com/CSS-Tricks/AnythingSlider/blob/master/video.html “video.html”) and I have included the ul id=’slider’ bit as well so I can’t figure out what could be going wrong.August 29, 2014 at 12:48 am #181002ParticipantSo, I’ve updated my code to this: http://jsfiddle.net/h_i_r_a/ob849z7q/
using the example shown here: http://jsfiddle.net/Mottie/ycUB6/495/Now the videos are appearing. They are not playing because Vimeo doesn’t provide a direct .mp4 link to its PRO users only but thats fine at the moment. I am just experimenting with showing the slideshow.
So, the videos are appearing now, but they are appearing in a list form and not in a slideshow form. I’ve tried to include all the libraries in the external resources in JFiddle, so I am not sure what could be happening over here.
-
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.