PDA

View Full Version : How to rotate the image Like this using css?



balavalli
Mar 14th, 2010, 07:07 PM
How to rotate the image Like this?Is it css or flash?? Any help plz?? Thanks in advance

This is the Original Site (http://www.thebeatlesrockband.com/)


http://i42.tinypic.com/xprbx1.jpg

mbaker
Mar 14th, 2010, 07:22 PM
http://www.thebeatlesrockband.com/ is very heavy with javascript. Looks to me like a combination of javascript and CSS.

balavalli
Mar 14th, 2010, 07:31 PM
http://www.thebeatlesrockband.com/ is very heavy with javascript. Looks to me like a combination of javascript and CSS.

Hi can u teach me how to do it ? initially i thought its Flash .But surprisingly its not its some thing coding.Any idea one how to make similar one using css ??

skywalker2208
Mar 14th, 2010, 07:39 PM
Hi can u teach me how to do it ? initially i thought its Flash .But surprisingly its not its some thing coding.Any idea one how to make similar one using css ??

Take a look at
http://sorgalla.com/jcarousel/

balavalli
Mar 14th, 2010, 08:07 PM
Take a look at
http://sorgalla.com/jcarousel/

Yeah tks but its some thing different. Is the original one is with jquery??

met
Mar 14th, 2010, 08:44 PM
yes, its jquery, and its based on a bunch of libraries included the one linked (carousel)

that sites just taken the implementation one step further and created something bespoke for their own purpose.

you *can* rip the code straight from their site and modify it for your needs.

mbaker
Mar 14th, 2010, 10:17 PM
Here is a cut down page, just displaying the cross fading images / tabs / links.


<!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" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org" />
<base href="http://www.thebeatlesrockband.com/" />
<title>The Beatles&trade;: Rock Band&trade;</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body, div, span, span, h2, h3, h4, h5, h6, a, img, ul, li { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
:focus { outline: 0;}
body { line-height: 1; color: black; background: white;}
ol, ul { list-style: none;}
a:link, a:hover, a:active, a:visited { text-decoration: none;}

body { text-align: center; color: #593c2d; font: normal 62.5% Georgia, "Times New Roman", Times, serif; line-height: 1.6em;}
#container { margin: 0 auto; width: 994px; overflow:hidden;}
a:link, a:visited { color: #f63;}
a:hover { color: #39c;}
.gpx-head { clear:none;}
div#crossfade.homehero span { position: absolute; top: 10px; left: 10px; display: block; width: 860px; height: 47px; background-position: 0 0; background-repeat: no-repeat;}
div#crossfade.homehero span { display: none;}
div#crossfade.homehero span span { float: left; text-indent: -9999px;}
div#crossfade.homehero span#tvcommercial { background-image: url(/images/home/spans/tvcommercial.png);}
div#crossfade.homehero span#openingcinematic { background-image: url(/images/home/spans/openingcinematic.png);}
div#crossfade.homehero span#abbeyroaddlc { background-image: url(/images/home/spans/abbeyroaddlc.png);}
div#crossfade.homehero span#sgtpepperdlc { background-image: url(/images/home/spans/sgtpepperdlc.png);}
div#crossfade.homehero span#rubbersouldlc { background-image: url(/images/home/spans/rubbersouldlc.png);}
div#crossfade { position: relative; width: 900px; height: 400px;}
div#crossfade.homehero { height: 260px; margin-bottom: 0;}
div#crossfade ul { list-style-type: none; position: absolute; top: 0; left: 0;}
div#crossfade ul li { opacity: 0; position: absolute; top: 0; left: 0;}
ul.hero-thumbs { height: 21px; margin: 0 0 0 15px;}
ul.hero-thumbs li { font: 9px/9px 'Lucida Grande', 'Lucida Sans Unicode', Geneva, sans-serif; text-transform: uppercase; letter-spacing: 2px; display: inline; margin: 0; cursor: pointer;}
ul.hero-thumbs li a { display: block; float: left; height: 21px; padding: 0 0 0 20px; margin: 0 10px 0 0; background: url(/images/tabs/hero-l.gif) no-repeat;}
ul.hero-thumbs li a span { display: block; height: 11px; margin: 0 -10px 0 0; padding: 4px 10px 6px 5px; background: url(/images/tabs/hero-r.gif) right 0 no-repeat;}
ul.hero-thumbs li a.current { color: #fff; background-image: url(/images/tabs/hero-s-l.gif);}
ul.hero-thumbs li a.current span { color: #fff; background-image: url(/images/tabs/hero-s-r.gif);}
</style>

<script src="http://www.google.com/jsapi" type="text/javascript">
</script>

<script type="text/javascript">
google.load( "jquery", "1.3.2" );
google.load( 'jqueryui', '1.7.2' );

var body_id = 'home';

</script>

<script src="/js/jquery.jparallax.js" type="text/javascript">
</script>

<script src="/js/crossfade.js" type="text/javascript">
</script>
</head>
<body id="home">
<!-- container -->
<div id="container">
<div id="inwrap">
<script type="text/javascript">
$( function ( ) {
$( 'div#crossfade' ).crossfade( { use_hover_images: false, autorotate: true } );
} );
</script>



<div id="crossfade" class="homehero">
<ul class="hero-images">
<li class="current"><a href="/videos/rubbersoul"><span id="rubbersouldlc" class=
"gpx-head"><span>Rubber Soul Full Album</span></span> <img alt="" src=
"/images/home/rubbersouldlc.png" /></a></li>

<li><a href="/videos/lonelyhearts"><span id="sgtpepperdlc" class="gpx-head"><span>Sgt
Pepper's Full Album</span></span> <img alt="" src=
"/images/home/sgtpepperdlc.png" /></a></li>

<li><a href="/videos/abbeyroad"><span id="abbeyroaddlc" class="gpx-head"><span>Abbey Road
Full Album</span></span> <img alt="" src="/images/home/abbeyroaddlc.png" /></a></li>

<li><a href="/videos/tvcommercial"><span id="tvcommercial" class="gpx-head"><span>TV
Commercial</span></span> <img alt="" src="/images/home/tvcommercial.png" /></a></li>

<li><a href="/videos/cinematic"><span id="openingcinematic" class="gpx-head"><span>Click
to Watch the Opening Cinematic</span></span> <img alt="" src=
"/images/home/openingcinematic.png" /></a></li>
</ul>
</div>

<ul class="hero-thumbs">
<li><a href="javascript:;" class="current"><span>Rubber Soul Album</span></a></li>

<li><a href="javascript:;"><span>Sgt. Pepper's Album</span></a></li>

<li><a href="javascript:;"><span>Abbey Road Album</span></a></li>

<li><a href="javascript:;"><span>TV Commercial</span></a></li>

<li><a href="javascript:;"><span>The Opening Cinematic</span></a></li>
</ul>
</div>
</div>
</body>
</html>



There is a bit of CSS, but the bulk of the heavy lifting is done in two javascript files (particularly the second one):


http://www.thebeatlesrockband.com/js/jquery.jparallax.js
http://www.thebeatlesrockband.com/js/crossfade.js

I've modified the code slightly (replaced h1 with span and added alt="" to img tags) to get it to validate, and then run through tidy.
The CSS validates to CSS level 3.

It is quite possible that the code could be cut down further. But it should be easier with this to see how it is done.

Note: Using the above code for anything but study or commentary is probably in breach of someone's copyright.

balavalli
Mar 17th, 2010, 02:20 PM
Here is a cut down page, just displaying the cross fading images / tabs / links.


<!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" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org" />
<base href="http://www.thebeatlesrockband.com/" />
<title>The Beatles&trade;: Rock Band&trade;</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body, div, span, span, h2, h3, h4, h5, h6, a, img, ul, li { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
:focus { outline: 0;}
body { line-height: 1; color: black; background: white;}
ol, ul { list-style: none;}
a:link, a:hover, a:active, a:visited { text-decoration: none;}

body { text-align: center; color: #593c2d; font: normal 62.5% Georgia, "Times New Roman", Times, serif; line-height: 1.6em;}
#container { margin: 0 auto; width: 994px; overflow:hidden;}
a:link, a:visited { color: #f63;}
a:hover { color: #39c;}
.gpx-head { clear:none;}
div#crossfade.homehero span { position: absolute; top: 10px; left: 10px; display: block; width: 860px; height: 47px; background-position: 0 0; background-repeat: no-repeat;}
div#crossfade.homehero span { display: none;}
div#crossfade.homehero span span { float: left; text-indent: -9999px;}
div#crossfade.homehero span#tvcommercial { background-image: url(/images/home/spans/tvcommercial.png);}
div#crossfade.homehero span#openingcinematic { background-image: url(/images/home/spans/openingcinematic.png);}
div#crossfade.homehero span#abbeyroaddlc { background-image: url(/images/home/spans/abbeyroaddlc.png);}
div#crossfade.homehero span#sgtpepperdlc { background-image: url(/images/home/spans/sgtpepperdlc.png);}
div#crossfade.homehero span#rubbersouldlc { background-image: url(/images/home/spans/rubbersouldlc.png);}
div#crossfade { position: relative; width: 900px; height: 400px;}
div#crossfade.homehero { height: 260px; margin-bottom: 0;}
div#crossfade ul { list-style-type: none; position: absolute; top: 0; left: 0;}
div#crossfade ul li { opacity: 0; position: absolute; top: 0; left: 0;}
ul.hero-thumbs { height: 21px; margin: 0 0 0 15px;}
ul.hero-thumbs li { font: 9px/9px 'Lucida Grande', 'Lucida Sans Unicode', Geneva, sans-serif; text-transform: uppercase; letter-spacing: 2px; display: inline; margin: 0; cursor: pointer;}
ul.hero-thumbs li a { display: block; float: left; height: 21px; padding: 0 0 0 20px; margin: 0 10px 0 0; background: url(/images/tabs/hero-l.gif) no-repeat;}
ul.hero-thumbs li a span { display: block; height: 11px; margin: 0 -10px 0 0; padding: 4px 10px 6px 5px; background: url(/images/tabs/hero-r.gif) right 0 no-repeat;}
ul.hero-thumbs li a.current { color: #fff; background-image: url(/images/tabs/hero-s-l.gif);}
ul.hero-thumbs li a.current span { color: #fff; background-image: url(/images/tabs/hero-s-r.gif);}
</style>

<script src="http://www.google.com/jsapi" type="text/javascript">
</script>

<script type="text/javascript">
google.load( "jquery", "1.3.2" );
google.load( 'jqueryui', '1.7.2' );

var body_id = 'home';

</script>

<script src="/js/jquery.jparallax.js" type="text/javascript">
</script>

<script src="/js/crossfade.js" type="text/javascript">
</script>
</head>
<body id="home">
<!-- container -->
<div id="container">
<div id="inwrap">
<script type="text/javascript">
$( function ( ) {
$( 'div#crossfade' ).crossfade( { use_hover_images: false, autorotate: true } );
} );
</script>



<div id="crossfade" class="homehero">
<ul class="hero-images">
<li class="current"><a href="/videos/rubbersoul"><span id="rubbersouldlc" class=
"gpx-head"><span>Rubber Soul Full Album</span></span> <img alt="" src=
"/images/home/rubbersouldlc.png" /></a></li>

<li><a href="/videos/lonelyhearts"><span id="sgtpepperdlc" class="gpx-head"><span>Sgt
Pepper's Full Album</span></span> <img alt="" src=
"/images/home/sgtpepperdlc.png" /></a></li>

<li><a href="/videos/abbeyroad"><span id="abbeyroaddlc" class="gpx-head"><span>Abbey Road
Full Album</span></span> <img alt="" src="/images/home/abbeyroaddlc.png" /></a></li>

<li><a href="/videos/tvcommercial"><span id="tvcommercial" class="gpx-head"><span>TV
Commercial</span></span> <img alt="" src="/images/home/tvcommercial.png" /></a></li>

<li><a href="/videos/cinematic"><span id="openingcinematic" class="gpx-head"><span>Click
to Watch the Opening Cinematic</span></span> <img alt="" src=
"/images/home/openingcinematic.png" /></a></li>
</ul>
</div>

<ul class="hero-thumbs">
<li><a href="javascript:;" class="current"><span>Rubber Soul Album</span></a></li>

<li><a href="javascript:;"><span>Sgt. Pepper's Album</span></a></li>

<li><a href="javascript:;"><span>Abbey Road Album</span></a></li>

<li><a href="javascript:;"><span>TV Commercial</span></a></li>

<li><a href="javascript:;"><span>The Opening Cinematic</span></a></li>
</ul>
</div>
</div>
</body>
</html>



There is a bit of CSS, but the bulk of the heavy lifting is done in two javascript files (particularly the second one):


http://www.thebeatlesrockband.com/js/jquery.jparallax.js
http://www.thebeatlesrockband.com/js/crossfade.js

I've modified the code slightly (replaced h1 with span and added alt="" to img tags) to get it to validate, and then run through tidy.
The CSS validates to CSS level 3.

It is quite possible that the code could be cut down further. But it should be easier with this to see how it is done.

Note: Using the above code for anything but study or commentary is probably in breach of someone's copyright.

Really awesome . can u tell me where i can get similar script which can be implemented with out any copy right issues?

vijetha
Mar 17th, 2010, 04:33 PM
that image slider is really looks awesome