Defvayne23

 

Posts Tagged ‘Tutorial’

Using jTube – Video and Thumbnail

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) {

(more…)

  • Share/Bookmark
 

Using jTube – Paging

In my previous post I covered the basics of showing a users uploaded videos. In this tutorial we will go over how to implement paging. To really show off paging, I have changed the request to top rated videos.

First we need to break our video options into a variable so we can re-use them when calling the other pages. This allows us to easily change the page number and leave all the other options intact.

2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var options = {
    feed: 'top_rated',
    success: function(videos, numberPages) {
        $(videos).each(function() {
            videoHTML = '<li>';
            videoHTML += '<a href="'+this.link+'" target="_blank">';
            videoHTML += this.title;
            videoHTML += '</a> - '+this.length;
            videoHTML += '</li>';
 
            $('#myVideos').append(videoHTML);
        });
    },
    error: function(error) {
        $('#myVideos').append('<li class="error">'+error+'</li>');
    }
};
 
$.jTube(options);

(more…)

  • Share/Bookmark
 

Use GD – 2a: Not Modified

When creating an image with PHP per call, why should the server have to create the image every time. In part two of using GD I’ll show how to use the 304 Not Modified header, and storing the image as cache.

To start we need to pass more info about the image from the previous post. Need to pass the last modified date and time, tell the browser that it can cache it and for how long, when the image would expire and an ID for the file.

41
42
43
44
45

header("Last-Modified: ".gmdate("D, d M Y H:i:s", filemtime($sFile))." GMT");
header("Pragma: public");
header("Cache-Control: maxage=".(60*60*24*2));
header("Expires: ".gmdate("D, d M Y H:i:s", strtotime("+2 days"))." GMT");
header("ETag: ".md5($sFile));

(more…)

  • Share/Bookmark
 

Using jTube – Basics

This is the first post in a line of uses for jTube. In this post I will show the basics of getting a users upload list and using the info. Before we start make sure that you have included the latest jQuery and latest jTube.

For jTube to work you must tell it what feed to grab by passing the info to the correct option. The only one we need to worry about today is `user`. Using the users feed has an option that accompanies it. The option userType tells what info about the user to retrieve. By default jTube loads the users uploads. Lets take a look at that.

1
2
3
4
5

<script>
$.jTube({
    user: 'defvayne23'
});
</script>

(more…)

  • Share/Bookmark
 

Use GD: Part 1 – Crop Image

This is the first in a series of accepting a users image, selecting the area, and cropping it. First we will start with the guts of the process and build on top of that.

When letting users upload images for a site, you normally would like the images to be the same ratio and size. To do this we need to crop the image. To get things started lets select the image.

Now that we have the image we need to load the image into GD before we can do anything with it. You can find all the GD functions we use here.
(more…)

  • Share/Bookmark