asked on

Flash Video Gallery using Jquery

I am trying to use jquery to show flash videos(swf) like a showcase and this is what I am trying to do:
Show a video by default and then have "<Prev" "Next>" below that so when an user click on prev or next, it will show the next one and so on. When a video is clicked after making the selection it can either open the video on top of it in a bigger size Or play the video once right there once they click the play button. I have seen examples for images and I tried those but it did not work with flash files.

Please let me know if anyone can guide me. I prefer using jquery as there are applications on the site that uses jquery.

Also, I just remembered one thing, how to stop the video if they navigate to the next one. This makes me think if its a good idea to do the gallery or showcase for flash videos. Please clarify my questions.

thanks

Igiwwa

ASKER

Please let me know if there is any plugin or if there is an alternative way.

SOLUTION

Roonaan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Igiwwa

ASKER

Hi,

thnaks for the reply. I guess right now, I will just go with hard coded method of pasting the embeded code as I will not have swf files to load it dynamically. I guess we would need the files to use ajax method. Is that correct?

I am trying to do something similar to the attached screen shot. If we click on the video 2 thumbnail, then it should change to video 2 on the above div and so on. when we try to navigate using "prev/next" then also it should do the same thing as clicking on thumbnails.

I created a test page based on the example by http://demos.flesler.com/jquery/serialScroll/
I will paste the sample code created based on the above example and there are two things which I couldn't figure out.
1) In Firefox, the div containing the next video also shows up.
2) Do not know how to stop one video if we navigate to the next one.

Hope I am clear in explaining my requirements.

If there is any other plug in that does this then I shall look into that and do accordingly.

I have attached the code. I just modified the css file to get eh layout I want so I have pasted the css inside the html code itself. All the js files are pointing to the actual site.

I guess, the error in FF could be fixed but the main thing is stop the video when the next one is clicked.

thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
	body{ 
	padding: 0 5px;
	font-family: Verdana, sans-serif;
	background-color: #DDD;
}
ul, li, h4, h3, h2, h1, p{
	padding:0;
	margin:0;
	list-style:none;
}
 
.next, .prev{
	cursor:pointer;
	width:24px;
	height:24px;
}
 
#screen{
	position:relative;
	height:300px;
	width:370px;
	margin-top:40px;
}
	
	#navigation{
		width:510px;
		text-align:center;
		margin-left:55px;
	}
		#navigation ul{
			margin-left:-5px !important;
			margin-left:-10px;
		}
			#navigation li{
				float:left;
				margin:0 0px;
				padding:5px 11px;
				background-color:#EEE;
			}
				#navigation a{
					color:#933;
					font-weight:bolder;
					text-decoration:none;
				}
	
#sections{
	overflow:hidden;
	background-color:white;
	width:375px;
	height:300px;
	clear:left;
	margin-left:50px;
	border:1px solid #ff0000;
}
	
	#sections ul{
		width:3500px;
	}
	
		#sections li{
			float:left;
			padding:0px 0px;
			margin-top:-16px;
			
			
		}
			/*to make it fall from the top*/
			#sections li.fallen{
				margin-top:369px;
			}
			
			#sections p{
				width:550px;
				margin:16px 0;
				margin-left:1px;
				font-size:85%;
				line-height:1.4em;
			}
			
			#sections h2{
				color:#993333;
				margin:20px 0pt;
			}
			#sections a{
				color:#777;
				font-weight:bolder;
				text-decoration:none;
			}
 
.clear{
	clear:both;
	width:0;
	height:0;
}
 
 
</style>
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>
	<script type='text/javascript' src='http://demos.flesler.com/jquery/serialScroll/js/jquery.serialScroll-min.js'></script>
	<script type='text/javascript' src='http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js'></script>
	<script type='text/javascript' src='http://demos.flesler.com/jquery/serialScroll/js/init.js'></script>
</head>
<body>
<div>Videos are from Youtube</div>
		<div id="screen">
		<div id="sections">
			<ul>
				<li>
				<p><object width="375" height="300"><param name="movie" value="http://www.youtube.com/v/IcL6-WEvUAA&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/IcL6-WEvUAA&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="375" height="300"></embed></object></p>
				</li>
 
				<li>
				<p><object width="375" height="300"><param name="movie" value="http://www.youtube.com/v/Mcc-GkjkOvE&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Mcc-GkjkOvE&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="375" height="300"></embed></object></p>
				</li>
				
				<li>
				<p><object width="375" height="300"><param name="movie" value="http://www.youtube.com/v/b3NRuzQvuxA&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/b3NRuzQvuxA&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="375" height="300"></embed></object></p>
				</li>	
			</ul>
 
		</div>
			<div style="margin-left:200px;align:center;">
			<img class="prev" src="http://demos.flesler.com/jquery/serialScroll/img/prev.gif" alt="prev" width="42" height="53" />
			<img class="next" src="http://demos.flesler.com/jquery/serialScroll/img/next.gif" alt="next" width="42" height="53" />
			</div>
			
			<div id="navigation">
			<ul>
				<li><a href="#"><img height="75" width="100" alt="2.Technical Analysis Lesson 2: An Introduction to Dow Theory" qlicon="VWRv9l6wrr8" class="vimg90" src="http://i3.ytimg.com/vi/VWRv9l6wrr8/default.jpg" title="2.Technical Analysis Lesson 2: An Introduction to Dow Theory"/></a></li>
				<li><a href="#"><img height="75" width="100" alt="What Happened to Bear Stearns Explained Simply Part 2" qlicon="40HCPneJUh0" class="vimg90" src="http://i1.ytimg.com/vi/40HCPneJUh0/default.jpg" title="What Happened to Bear Stearns Explained Simply Part 2"/></a></li>
				<li><a href="#"><img height="75" width="100" alt="80. Who Really Controls the Forex Market?" qlicon="IcL6-WEvUAA" class="vimg90" src="http://i2.ytimg.com/vi/IcL6-WEvUAA/default.jpg" title="80. Who Really Controls the Forex Market?"/></a></li>
			</ul>
			</div>
		
	</div>
	
	
 
</body>
</html>

Open in new window

video-ee.JPG

ASKER CERTIFIED SOLUTION

Roonaan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Igiwwa

ASKER

Hi,

thanks a lot for the reply. I modified the code with your suggestions and its working fine except that I have to align the "preview" div over the "sections" div. I will try this. One more question: I am not sure if I can have an image in the sections box instead of the video(as I have now) because I just copy the youtube embed code from the website and save the thumbnail next to it. I am thinking if we can still show the object code in the sections window instead of an image. Please let me know if something is possible like this.

ps: the firefox issue(it was showing all divs) was fixed by adding the wmode:opaque.

thanks again.