Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Try this:</p> <pre><code> var __mainDiv; var __preLoaderHTML; var __opts; function __jQueryYouTubeChannelReceiveData(data) { var cnt = 0; $.each(data.feed.entry, function(i, e) { if (cnt &lt; __opts.numberToDisplay) { var parts = e.id.$t.split('/'); var videoId = parts[parts.length-1]; var out = '&lt;div class="video"&gt;&lt;a href="' + e.link[0].href + '"&gt;&lt;img src="http://i.ytimg.com/vi/' + videoId + '/2.jpg"/&gt;&lt;/a&gt;&lt;br /&gt;&lt;a href="' + e.link[0].href + '"&gt;' + e.title.$t + '&lt;/a&gt;&lt;p&gt;'; if (!__opts.hideAuthor) { out = out + 'Author: ' + e.author[0].name.$t + ''; } out = out + '&lt;/p&gt;&lt;/div&gt;'; __mainDiv.append(out); cnt = cnt + 1; } }); // Open in new tab? if (__opts.linksInNewWindow) { $(__mainDiv).find("li &gt; a").attr("target", "_blank"); } // Remove the preloader and show the content $(__preLoaderHTML).remove(); __mainDiv.show(); } (function($) { $.fn.youTubeChannel = function(options) { var videoDiv = $(this); $.fn.youTubeChannel.defaults = { userName: null, channel: "favorites", //options are favorites or uploads loadingText: "Loading...", numberToDisplay: 3, linksInNewWindow: true, hideAuthor: false } __opts = $.extend({}, $.fn.youTubeChannel.defaults, options); return this.each(function() { if (__opts.userName != null) { videoDiv.append("&lt;div id=\"channel_div\"&gt;&lt;/div&gt;"); __mainDiv = $("#channel_div"); __mainDiv.hide(); __preLoaderHTML = $("&lt;p class=\"loader\"&gt;" + __opts.loadingText + "&lt;/p&gt;"); videoDiv.append(__preLoaderHTML); // TODO: Error handling! $.ajax({ url: "http://gdata.youtube.com/feeds/base/users/" + __opts.userName + "/" + __opts.channel + "?alt=json", cache: true, dataType: 'jsonp', success: __jQueryYouTubeChannelReceiveData }); } }); }; })(jQuery); </code></pre> <p>To use the YouTube plugin you just need to add a script reference to the jQuery library and the jquery.youtube.channel.js file. Then add a container to hold the rendered HTML, a line of JavaScript to wire everything up, and some CSS to format the output:</p> <pre><code>&lt;script type=”text/javascript” src=”jquery.youtube.channel.js”&gt;&lt;/script&gt; &lt;div id="youtubevideos"&gt;&lt;/div&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $('#youtubevideos').youTubeChannel({ userName: 'diggerdanh', channel: "favorites", hideAuthor: false, numberToDisplay: 6, linksInNewWindow: true //other options //loadingText: "Loading...", }); }); &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload