Revision: 42393
Updated Code
at March 4, 2011 06:42 by vagrantradio
Updated Code
//--------------------------------------------------------------------------------------------
Style
-------------------------------------------------------------------------------------------- //
.holder {
padding:20px 30px;
margin:0 0 30px 0;
clear:both;
background:#ccc;
border: 1px dotted #666;
overflow:auto;
}
#video-holder {
width:720px;
height:445px;
display:block;
float:left;
background: none repeat scroll 0 0 #111111;
border-bottom: 1px solid #000000;
margin: 0 auto 20px;
}
ul#links {
float:right;
margin:0;
padding:0;
height:450px;
width:150px;
overflow:auto;
}
#links li {
list-style-type:none;
padding:4px;
cursor:pointer;
}
//--------------------------------------------------------------------------------------------
Markup
-------------------------------------------------------------------------------------------- //
<div class="holder">
<h3 id="video-title"></h3>
<div id="video-holder" rel="people_intro" title="Intro"></div>
<ul id="links">
<li rel="people_intro" title="Intro">Intro</li>
<li rel="a_wisnewski" title="Aaron Wisnewski">Aaron Wisnewski</li>
<li rel="Bill_Bryan" title="Bill Bryan">Bill Bryan</li>
<li rel="Boscobel" title="Boscobel">Boscobel</li>
<li rel="Chad_Passon" title="Chad Passon">Chad Passon</li>
<li rel="DeKalb" title="DeKalb">DeKalb</li>
<li rel="Elgin" title="Elgin">Elgin</li>
<li rel="Fremont" title="Fremont">Fremont</li>
<li rel="Graham_Morgan" title="Graham Morgan">Graham Morgan</li>
<li rel="Harrison" title="Harrison">Harrison</li>
<li rel="Harrison_SOTY" title="Harrison">Harrison</li>
<li rel="Holland_South" title="Holland South">Holland South</li>
<li rel="Jerry_Higgins" title="Jerry Higgins">Jerry Higgins</li>
<li rel="Kalkaska" title="Kalkaska">Kalkaska</li>
<li rel="Lakeview" title="Lakeview">Lakeview</li>
<li rel="Manistique" title="Manistique">Manistique</li>
<li rel="New_London" title="New_London">New London</li>
<li rel="Pontiac" title="Pontiac">Pontiac</li>
<li rel="Remus" title="Remus">Remus</li>
</ul>
</div>
//--------------------------------------------------------------------------------------------
Usage
-------------------------------------------------------------------------------------------- //
jQuery('li').videoGallery({w:720, h:450, dir:'path/to/video/'});
//--------------------------------------------------------------------------------------------
Plugin
-------------------------------------------------------------------------------------------- //
/*
* Copyright (c) 2011 Jason Pant (http://www.vagrantradio.com)
* This is licensed under GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* For a copy of the GNU General Public License, see <http://www.gnu.org/licenses/>.
*
*/
(function($){
$.fn.videoGallery = function(options){
var defaults = {
w: 320,
h: 240,
dir: 'path/to/video/',
holderDiv: '#video-holder',
src: 'rel',
showTitle: true,
title: 'title',
titleLoc: '#video-title'
};
var options = $.extend(defaults, options);
var element = this;
return this.each(function(){
src = $(options.holderDiv).attr(options.src);
title = $(options.holderDiv).attr(options.title);
if (options.showTitle === true){
$(options.titleLoc)
.text(title);
}
$(options.holderDiv)
.html('<object width="'+options.w+'" height="'+options.h+'" id="single1" name="single1"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="player.swf" /><param name="flashvars" value="image=default.jpg&file='+src+'&skin=glow.zip&frontcolor=000000&lightcolor=000000&screencolor=000000&stretching=fill&&provider=rtmp&streamer=rtmp://your.streamer.com/'+options.dir+'"><embed src="player.swf" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" wmode="transparent" width="'+options.w+'" height="'+options.h+'" flashvars="image=default.jpg&file='+src+'&skin=glow.zip&frontcolor=000000&lightcolor=000000&screencolor=000000&stretching=fill&provider=rtmp&streamer=rtmp://your.streamer.com/'+options.dir+'" /></object>');
$(this).
click(
function(){
src = $(this).attr(options.src);
title = $(this).attr(options.title);
$(options.holderDiv)
.html('<object width="'+options.w+'" height="'+options.h+'" id="single1" name="single1"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="player.swf" /><param name="flashvars" value="image=default.jpg&file='+src+'&skin=glow.zip&frontcolor=000000&lightcolor=000000&screencolor=000000&stretching=fill&&provider=rtmp&streamer=rtmp://fms.autowares.com/'+options.dir+'"><embed src="player.swf" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" wmode="transparent" width="'+options.w+'" height="'+options.h+'" flashvars="image=default.jpg&file='+src+'&skin=glow.zip&frontcolor=000000&lightcolor=000000&screencolor=000000&stretching=fill&provider=rtmp&streamer=rtmp://your.streamer.com/'+options.dir+'" /></object>');
if (options.showTitle === true){
$(options.titleLoc)
.text(title);
}
}
)
}); // end this.each
}; // end fn.videoGallery
})(jQuery);
Revision: 42392
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at March 4, 2011 06:39 by vagrantradio
Initial Code
//--------------------------------------------------------------------------------------------
Markup
-------------------------------------------------------------------------------------------- //
<div class="holder">
<h3 id="video-title"></h3>
<div id="video-holder" rel="people_intro" title="Intro"></div>
<ul id="links">
<li rel="people_intro" title="Intro">Intro</li>
<li rel="a_wisnewski" title="Aaron Wisnewski">Aaron Wisnewski</li>
<li rel="Bill_Bryan" title="Bill Bryan">Bill Bryan</li>
<li rel="Boscobel" title="Boscobel">Boscobel</li>
<li rel="Chad_Passon" title="Chad Passon">Chad Passon</li>
<li rel="DeKalb" title="DeKalb">DeKalb</li>
<li rel="Elgin" title="Elgin">Elgin</li>
<li rel="Fremont" title="Fremont">Fremont</li>
<li rel="Graham_Morgan" title="Graham Morgan">Graham Morgan</li>
<li rel="Harrison" title="Harrison">Harrison</li>
<li rel="Harrison_SOTY" title="Harrison">Harrison</li>
<li rel="Holland_South" title="Holland South">Holland South</li>
<li rel="Jerry_Higgins" title="Jerry Higgins">Jerry Higgins</li>
<li rel="Kalkaska" title="Kalkaska">Kalkaska</li>
<li rel="Lakeview" title="Lakeview">Lakeview</li>
<li rel="Manistique" title="Manistique">Manistique</li>
<li rel="New_London" title="New_London">New London</li>
<li rel="Pontiac" title="Pontiac">Pontiac</li>
<li rel="Remus" title="Remus">Remus</li>
</ul>
</div>
//--------------------------------------------------------------------------------------------
Usage
-------------------------------------------------------------------------------------------- //
jQuery('li').videoGallery({w:720, h:450, dir:'path/to/video/'});
//--------------------------------------------------------------------------------------------
Plugin
-------------------------------------------------------------------------------------------- //
/*
* Copyright (c) 2011 Jason Pant (http://www.vagrantradio.com)
* This is licensed under GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* For a copy of the GNU General Public License, see <http://www.gnu.org/licenses/>.
*
*/
(function($){
$.fn.videoGallery = function(options){
var defaults = {
w: 320,
h: 240,
dir: 'path/to/video/',
holderDiv: '#video-holder',
src: 'rel',
showTitle: true,
title: 'title',
titleLoc: '#video-title'
};
var options = $.extend(defaults, options);
var element = this;
return this.each(function(){
src = $(options.holderDiv).attr(options.src);
title = $(options.holderDiv).attr(options.title);
if (options.showTitle === true){
$(options.titleLoc)
.text(title);
}
$(options.holderDiv)
.html('<object width="'+options.w+'" height="'+options.h+'" id="single1" name="single1"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="player.swf" /><param name="flashvars" value="image=default.jpg&file='+src+'&skin=glow.zip&frontcolor=000000&lightcolor=000000&screencolor=000000&stretching=fill&&provider=rtmp&streamer=rtmp://your.streamer.com/'+options.dir+'"><embed src="player.swf" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" wmode="transparent" width="'+options.w+'" height="'+options.h+'" flashvars="image=default.jpg&file='+src+'&skin=glow.zip&frontcolor=000000&lightcolor=000000&screencolor=000000&stretching=fill&provider=rtmp&streamer=rtmp://your.streamer.com/'+options.dir+'" /></object>');
$(this).
click(
function(){
src = $(this).attr(options.src);
title = $(this).attr(options.title);
$(options.holderDiv)
.html('<object width="'+options.w+'" height="'+options.h+'" id="single1" name="single1"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="player.swf" /><param name="flashvars" value="image=default.jpg&file='+src+'&skin=glow.zip&frontcolor=000000&lightcolor=000000&screencolor=000000&stretching=fill&&provider=rtmp&streamer=rtmp://fms.autowares.com/'+options.dir+'"><embed src="player.swf" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" wmode="transparent" width="'+options.w+'" height="'+options.h+'" flashvars="image=default.jpg&file='+src+'&skin=glow.zip&frontcolor=000000&lightcolor=000000&screencolor=000000&stretching=fill&provider=rtmp&streamer=rtmp://your.streamer.com/'+options.dir+'" /></object>');
if (options.showTitle === true){
$(options.titleLoc)
.text(title);
}
}
)
}); // end this.each
}; // end fn.videoGallery
})(jQuery);
Initial URL
http://www.longtailvideo.com/players/jw-flv-player/
Initial Description
This is a plugin for creating a dynamic video gallery. Call videos by rel tag, including title.
Initial Title
jQuery videoGallery plugin for use with JW Player
Initial Tags
video
Initial Language
jQuery