Speed up development with full-stack environments for every branch.

Learn More

How to create and use a jQuery UI CoverFlow component

1828 Runs 3841 Views 1314 Copies
Saved

Saved

dipesh.parmar 55

dipesh.parmar
published 4 years ago

<!DOCTYPE html>
<html lang="en">
<head>
  <title>jQuery UI CoverFlow</title>
	
	<!-- Include theme -->
	<link type="text/css" href="css/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
	
	<!-- Include jQuery and UI -->
	<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>

		
	<!-- Include jQuery CoverFlow widget -->
	<script type="text/javascript" src="js/ui.coverflow.js"></script>

	<link type="text/css" href="css/demos.css" rel="stylesheet" />
	
	<!-- Transformie is a plugin that makes webkit's CSS transforms work in Internet Explorer -->
	<script src="js/sylvester.js" type="text/javascript"></script>
	<script src="js/transformie.js" type="text/javascript"></script>
	
	<!-- Include mousewheel dependancies and app files -->
	<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
	
	<!--
		Main CoverFlow Class creation Javascript.
	-->
	<script src="js/app.js" type="text/javascript"></script>
</head>
<body>

<div class="pageWrapper">
	<h1>jQuery UI CSS3 CoverFlow</h1>
	<div class="demo">
		<div class="wrapper">
			<!--
				ConverFlow HTML Code.
				make sure div id is coverflow.
			-->
			<div id="coverflow">
	            <img src="http://s6.postimg.org/bkfetthjh/gorillaz_plasticbeach.jpg" data-artist="Gorillaz" data-album="Plastic Beach"/>
				<img src="http://s6.postimg.org/ojltakrnx/kingsofleon_comearoundsunshine.jpg" data-artist="Kings Of Leon" data-album="Come Around Sunshine"/>
				<img src="http://s6.postimg.org/71368aznx/kidrock_bornfree.jpg" data-artist="Kid Rock" data-album="Born Free"/>		
				<img src="http://s6.postimg.org/f1m2aj5zh/recovery_recovery.jpg" data-artist="Eminem" data-album="Recovery"/>
				<img src="http://s6.postimg.org/ttqs1vbwt/lilwayne_iamnotahumanbeing.jpg" data-artist="Lil Wayne" data-album="I Am Not A Human Being"/>
				<img src="http://s6.postimg.org/ksc8o9dzh/taylorswift_speaknow.jpg" data-artist="Taylor Swift" data-album="Speak Now"/>
				<img src="http://s6.postimg.org/f5fvqsbgt/thebandperry_thebandperry.jpg" data-artist="The Band Perry" data-album="The Band Perry"/>
				<img src="http://s6.postimg.org/5v3rn90r1/mychemicalromance_dangerdays.jpg" data-artist="My Chemical Romance" data-album="Danger Days"/>
				<img src="http://s6.postimg.org/teawv40lp/ironmaiden_thefinalfrontier.jpg" data-artist="Iron Maiden" data-album="The Final Frontier"/>
				<img src="http://s6.postimg.org/nvcyrmsy5/order_of_the_black_black_label_society.jpg" data-artist="Order Of The Black" data-album="Black Label Society"/>	
				<img src="http://s6.postimg.org/yr4cmzdvx/usher_raymondvraymond.jpg" data-artist="Usher" data-album="Raymond V Raymond"/>
			</div>
		</div>
		<div id="imageCaption">Sample Text</div>
		<div id='slider'></div>
	</div>
	<div class="demo-description"></div>
</div>
</body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).