Advanced Search

jQuery videoGallery plugin for use with JW Player

/ Published in: jQuery
Save to your folder(s)
This is a plugin for creating a dynamic video gallery. Call videos by rel tag, including title.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. //--------------------------------------------------------------------------------------------
  2. Style
  3. -------------------------------------------------------------------------------------------- //
  4. .holder {
  5. 	padding:20px 30px;
  6. 	margin:0 0 30px 0;
  7. 	clear:both;
  8.     background:#ccc;
  9.     border: 1px dotted #666;
  10. 	overflow:auto;
  11. }
  12. #video-holder {	
  13. 	width:720px;
  14. 	height:445px;
  15. 	display:block;
  16. 	float:left;
  17.     background: none repeat scroll 0 0 #111111;
  18.     border-bottom: 1px solid #000000;
  19.     margin: 0 auto 20px;
  20. }
  21. ul#links {
  22. 	float:right;
  23. 	margin:0;
  24. 	padding:0;
  25. 	height:450px;
  26. 	width:150px;
  27. 	overflow:auto;
  28. }
  29. #links li {
  30. 	list-style-type:none;
  31. 	padding:4px;
  32. 	cursor:pointer;
  33. }
  34.  
  35. //--------------------------------------------------------------------------------------------
  36. Markup
  37. -------------------------------------------------------------------------------------------- //
  38. <div class="holder">
  39.         <h3 id="video-title"></h3>
  40.         <div id="video-holder" rel="people_intro" title="Intro"></div>
  41.  
  42.         <ul id="links">
  43.             <li rel="people_intro" title="Intro">Intro</li>
  44.             <li rel="a_wisnewski" title="Aaron Wisnewski">Aaron Wisnewski</li>
  45.             <li rel="Bill_Bryan" title="Bill Bryan">Bill Bryan</li>
  46.             <li rel="Boscobel" title="Boscobel">Boscobel</li>
  47.             <li rel="Chad_Passon" title="Chad Passon">Chad Passon</li>
  48.             <li rel="DeKalb" title="DeKalb">DeKalb</li>
  49.             <li rel="Elgin" title="Elgin">Elgin</li>
  50.             <li rel="Fremont" title="Fremont">Fremont</li>
  51.             <li rel="Graham_Morgan" title="Graham Morgan">Graham Morgan</li>
  52.             <li rel="Harrison" title="Harrison">Harrison</li>
  53.             <li rel="Harrison_SOTY" title="Harrison">Harrison</li>
  54.             <li rel="Holland_South" title="Holland South">Holland South</li>
  55.             <li rel="Jerry_Higgins" title="Jerry Higgins">Jerry Higgins</li>
  56.             <li rel="Kalkaska" title="Kalkaska">Kalkaska</li>
  57.             <li rel="Lakeview" title="Lakeview">Lakeview</li>
  58.             <li rel="Manistique" title="Manistique">Manistique</li>
  59.             <li rel="New_London" title="New_London">New London</li>
  60.             <li rel="Pontiac" title="Pontiac">Pontiac</li>
  61.             <li rel="Remus" title="Remus">Remus</li>
  62.         </ul>
  63.     </div>
  64.  
  65. //--------------------------------------------------------------------------------------------
  66. Usage
  67. -------------------------------------------------------------------------------------------- //
  68. jQuery('li').videoGallery({w:720, h:450, dir:'path/to/video/'});
  69.  
  70. //--------------------------------------------------------------------------------------------
  71. Plugin
  72. -------------------------------------------------------------------------------------------- //
  73.  
  74. /*
  75.  * Copyright (c) 2011 Jason Pant (http://www.vagrantradio.com)
  76.  * This is licensed under GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
  77.  *
  78.  * This program is free software: you can redistribute it and/or modify
  79.  * it under the terms of the GNU General Public License as published by
  80.  * the Free Software Foundation, either version 3 of the License, or
  81.  * (at your option) any later version.
  82.  *
  83.  * This program is distributed in the hope that it will be useful,
  84.  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  85.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  86.  * GNU General Public License for more details.
  87.  *
  88.  * For a copy of the GNU General Public License, see <http://www.gnu.org/licenses/>.
  89.  *
  90. */ 
  91.  
  92.  (function($){
  93. 	$.fn.videoGallery = function(options){
  94.  
  95. 	    var defaults = {
  96.             w: 320,
  97.             h: 240,
  98. 			dir: 'path/to/video/',
  99.             holderDiv: '#video-holder',
  100.             src: 'rel',
  101. 			showTitle: true,
  102.             title: 'title',
  103.             titleLoc: '#video-title'
  104. 		};
  105.  
  106. 		var options = $.extend(defaults, options);
  107.  
  108. 		var element = this;
  109.  
  110. 		return this.each(function(){
  111.          src = $(options.holderDiv).attr(options.src);
  112.          title = $(options.holderDiv).attr(options.title);
  113.  
  114.          if (options.showTitle === true){
  115.             $(options.titleLoc)
  116.                .text(title);  
  117.          }
  118.  
  119.          $(options.holderDiv)
  120. 		 	.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&#58;//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&#58;//your.streamer.com/'+options.dir+'" /></object>');
  121.  
  122.  
  123.          $(this).
  124.             click(
  125.                function(){
  126.                   src = $(this).attr(options.src);
  127.                   title = $(this).attr(options.title);
  128.  
  129.                   $(options.holderDiv)
  130.                      .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&#58;//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&#58;//your.streamer.com/'+options.dir+'" /></object>');
  131.  
  132.                   if (options.showTitle === true){
  133.                      $(options.titleLoc)
  134.                         .text(title);  
  135.                   }
  136.                }
  137.             )
  138. 		}); // end this.each
  139.  
  140. 	}; // end fn.videoGallery
  141.  
  142. })(jQuery);

URL: http://www.longtailvideo.com/players/jw-flv-player/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.