Defvayne23.com » jQuery http://defvayne23.com A blog by John Hoover Fri, 27 Jan 2012 22:10:28 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 jTube v2.0 Officially Released http://defvayne23.com/2010/09/30/jtube-v2-0-officially-released/ http://defvayne23.com/2010/09/30/jtube-v2-0-officially-released/#comments Thu, 30 Sep 2010 13:40:18 +0000 John Hoover http://www.defvayne23.com/?p=80 Proud to announce that jTube has reached the milestone of v2.0. This update brings:

  • Video info based on video ID
  • Related videos
  • Video comments
  • Video responses
  • Usage Examples
  • Bug fixes


Not only does it bring more data, but also a simplified method of getting the data. Formally you had to pass the right value to the right option:

1
2
3
4
5
6
7
8
9

$.jTube({
	user: "defvayne23",
	userType: 'uploads',
	limit: 10,
	page: 1,
	success: function(videos) {
		...
	}
});

Instead of having to deal with multiple options, they have been consolidated down to three:

1
2
3
4
5
6
7
8
9
10

$.jTube({
	request: 'user',
	requestValue: 'defvayne23',
	requestOption: 'uploads',
	limit: 10,
	page: 1,
	success: function(videos){
		...
	}
});

Get the latest jTube

Questions/Comments

Share

]]> http://defvayne23.com/2010/09/30/jtube-v2-0-officially-released/feed/ 1 jQuery Weather Plugin – simpleWeather http://defvayne23.com/2010/05/17/jquery-weather-plugin-simpleweather-2/ http://defvayne23.com/2010/05/17/jquery-weather-plugin-simpleweather-2/#comments Mon, 17 May 2010 14:30:35 +0000 John Hoover http://www.defvayne23.com/?p=70 monkeeCreate has release another jQuery plugin developed by James Fleeting that uses the Yahoo Weather API to pull in weather data by just passing it a zipcode. Using simpleWeather is alot like jTube in the sense that you pass the zipcode and a function to handle the results. Example of some of the results passed back are high, low, sunrise, sunset, wind direction, current conditions and forecast.

Checkout simpleWeather on jQuery Plugins and GitHub.

Share

]]> http://defvayne23.com/2010/05/17/jquery-weather-plugin-simpleweather-2/feed/ 0 Using jTube – Video and Thumbnail http://defvayne23.com/2010/05/14/using-jtube-video-and-thumbnail/ http://defvayne23.com/2010/05/14/using-jtube-video-and-thumbnail/#comments Fri, 14 May 2010 16:08:21 +0000 John Hoover http://www.defvayne23.com/?p=66 This is the final post of the series that has so far covered the very basics of showing a list of video titles, to paging of the list using jTube. In this post I will discuss how to embed a video using jTubeEmbed which comes with the jTube jQuery plugin, also how to show the video thumbnail provided by YouTube. To show these features off I will modify where we left off in the paging tutorial and show the video for the first entry of the page then show the thumbnail for the other videos on the page.

To show the video only on the first video we need to modify the each loop to tell us where we are in the loop. Simply add `index` as the first parameter received.

12

        $(videos).each(function(index) {


Now that we know what position we are in the loop, we can check if we are on the first video. Simply add an if statement that checks if the index is 0 (first). If we are on the first, embed the video, otherwise show the link with the title and length. To embed the video we will use the jTubeEmbed function. Only thing it requires is the video url. That is given with the key `video`. In this tutorial we can access that with `this.video`. If you choose not to pass the width and height option, the embed defaults to 290x250px. In our demo we will pass in the dimensions 200x172px so they fit snug in our page. These options are passed in similar to jTube but they go in as a second parameter. We should also show the video title below the video, but not link it since we already have the video.

13
14
15
16
17
18
19
20
21
22
23
24

            videoHTML = '<li>';
 
            if(index == 0) {
                videoHTML += $.jTubeEmbed(this.video, {width: 200, height: 172});
                videoHTML += this.title;
            } else {
                videoHTML += '<a href="'+this.link+'" target="_blank">';
                videoHTML += this.title;
                videoHTML += '</a> - '+this.length;
            }
 
            videoHTML += '</li>';

Now that we have the video showing up lets add the thumbnail. Each video that jTube returns we have a url for the thumbnail, accessible with the key `thumbnail`. This will return the image url which you can put as the source in your img tag. To not overflow the page with large thumbnails, also set the width to 200px to match the video and height to 150px to keep the aspect ratio.

19
20
21

                videoHTML += '<a href="'+this.link+'" target="_blank">';
                videoHTML += '<img src="'+this.thumbnail+'" width="200" height="150"><br>';
                videoHTML += this.title;

That should sum it up for this series of jTube tutorials. I have now covered getting users uploaded videos, success function, error function, paging, limit number of videos per page, videos from YouTube feeds, embed video using jTubeEmbed, and thumbnails.

Next series will cover user feeds including subscriptions and playlists. Including getting the videos from those playlists.

If you have any request for help or tutorials either leave a comment or submit a comment.

Complete Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<script type="text/javascript">
var currentPage = 1;
var options = {
    feed: 'top_rated',
    limit: 12,
    page: currentPage,
    success: function(videos, numberPages) {
        $('#myVideos').html('');
        $('#currentPage').html(currentPage);
        $('#numberPages').html(numberPages);
 
        $(videos).each(function(index) {
            videoHTML = '<li>';
 
            if(index == 0) {
                videoHTML += $.jTubeEmbed(this.video, {width: 200, height: 172});
                videoHTML += this.title;
            } else {
                videoHTML += '<a href="'+this.link+'" target="_blank">';
                videoHTML += '<img src="'+this.thumbnail+'" width="200" height="150"><br>';
                videoHTML += this.title;
                videoHTML += '</a> - '+this.length;
            }
 
            videoHTML += '</li>';
 
            $('#myVideos').append(videoHTML);
        });
 
        //Back
        if(currentPage != 1) {
            $('#pageBack').removeClass('disabled').unbind('click').click(function(event) {
                currentPage = currentPage - 1;
                options.page = currentPage;
                $.jTube(options);
                event.preventDefault();
            });
        } else {
            $('#pageBack').addClass('disabled').unbind('click').click(empty);
        }
 
        //Next
        if(currentPage < numberPages) {
            $('#pageNext').removeClass('disabled').unbind('click').click(function(event) {
                currentPage = currentPage + 1;
                options.page = currentPage;
                $.jTube(options);
                event.preventDefault();
            });
        } else {
            $('#pageNext').addClass('disabled').unbind('click').click(empty);
        }
    },
    error: function(error) {
        $('#myVideos').append('<li class="error">'+error+'</li>');
    }
};
var empty = function(event) {event.preventDefault();};
 
$("#pageBack, #pageNext").click(empty);
$.jTube(options);
</script>
<ul id="myVideos"></ul>
<a href="" id="pageBack" class="disabled">Back</a> - Page <span id="currentPage">1</span> of <span id="numberPages">1</span> - <a href="" id="pageNext" class="disabled">Next</a>

View Demo

Keep up with jTube

Share

]]> http://defvayne23.com/2010/05/14/using-jtube-video-and-thumbnail/feed/ 8