My portal – single page layout for your community
Get started
Firstly, prepare new folder (for our template), and create next folders inside:
- css – for CSS stylesheets (reset.css, style.css)
- images – for all the images
- js – for JS files (jquery.spinner.js and script.js)
Head section markup
Now look at the HTML markup of our header:
<!DOCTYPE html>
<html lang="en"><head>
<title>'My portal' single page layout | Script tutorials demo</title>
<meta charset="utf-8">
<!-- Link styles -->
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!-- Link scripts -->
<script src="https://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.7.1");
</script>
<script src="js/jquery.spinner.js"></script>
<script src="js/script.js"></script>
</head>
Moving forward – Main layout (body section)
Main body layout consists of 3 main sections: header (logo, social icons, navigation menu and search form), main section (four blocks: Promo, Headline (you can use some video here), Last members and Last news) and footer (with different links). It looks like:
<body>
<header><!-- Define the header section of the page -->
<h1 class="logo"><!-- Define the logo element -->
<a href="#"><img src="images/logo.png" alt=""></a>
</h1>
<ul class="soc-ico"><!-- Define social icons -->
<li><a href="#"><img src="images/twitter48.png" alt=""></a></li>
.....
</ul>
<nav><!-- Define the navigation menu -->
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Members</a></li>
.....
</ul>
</nav>
<form id="search"><!-- Define the search element -->
<input type="text" name="s" />
<input type="submit" value="" />
</form>
</header>
<div id="content"><!-- Define the content section -->
<div class="box box1">
.....
</div>
<div class="box box2">
.....
</div>
<div class="box box3">
.....
</div>
<div class="box box4">
.....
</div>
</div>
<footer><!-- Define the footer section of the page -->
<ul>
<li class="active"><a href="#">Home</a>|</li>
<li><a href="#">Members</a>|</li>
.....
</ul>
</footer>
</body>
Base CSS styles
/* base styles */
body {
background:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1em;
color:#000;
}
header {
background:url("../images/header-bg.png") repeat-x scroll 0 0 transparent;
height:160px;
position:relative;
}
a {
color:#2cbcfc;
outline:none;
}
a:hover {
text-decoration:none;
}
p {
line-height:16px;
margin-bottom:16px;
}
h1 {
position:absolute;
left:10px;
top:49px;
}
h2 {
font:bold 20px/24px Arial, Helvetica, sans-serif;
color:#fff;
text-transform:uppercase;
margin-bottom:11px;
padding:0 4px;
}
h3,.h3 {
font:bold 13px/22px Arial, Helvetica, sans-serif;
color:#2cbcfc;
text-transform:uppercase;
}
.white {
color:#FFF;
}
.blue {
color:#22a2fb;
}
.gray {
color:#696565;
}
.rm {
width:108px;
padding-left:14px;
background:url(../images/rm-bg.png) no-repeat;
font:bold 11px/29px Arial, Helvetica, sans-serif;
display:inline-block;
text-decoration:none;
text-transform:uppercase;
color:#fff;
float:right;
}
.rm:hover {
color:#000;
}
.upc {
text-transform:uppercase;
}
.extra-wrap {
overflow:hidden;
}
.clear {
clear:both;
line-height:0;
}
.blck {
display:block;
}
Header section preview html markup:
<header><!-- Define the header section of the page -->
<h1 class="logo"><!-- Define the logo element -->
<a href="#"><img src="images/logo.png" alt=""></a>
</h1>
<ul class="soc-ico"><!-- Define social icons -->
<li><a href="#"><img src="images/twitter48.png" alt=""></a></li>
<li><a href="#"><img src="images/google48.png" alt=""></a></li>
<li><a href="#"><img src="images/facebook48.png" alt=""></a></li>
<li><a href="#"><img src="images/stumbleupon48.png" alt=""></a></li>
<li><a href="#"><img src="images/rss48.png" alt=""></a></li>
</ul>
<nav><!-- Define the navigation menu -->
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Radio</a></li>
<li><a href="#">Forum</a></li>
<li><a href="http://www.script-tutorials.com/my-portal-single-page-layout-for-your-community/">back to Script Tutorials</a></li>
</ul>
</nav>
<form id="search"><!-- Define the search element -->
<input type="text" name="s" />
<input type="submit" value="" />
</form>
</header>
CSS styles for header section:
/* navigation menu styles */
header nav {
position:absolute;
top:82px;
white-space:nowrap;
}
header nav li {
float:left;
margin-right:1px;
}
header nav li:first-child {
margin-left:20px;
}
header nav a {
background:url(../images/nav-sprite.png) 0 0 repeat-x;
color:#fff;
display:block;
font:bold 14px/20px Arial, Helvetica, sans-serif;
height:32px;
padding:14px 18px 0;
text-decoration:none;
text-transform:uppercase;
}
header nav a:hover,header nav .active a {
background-position:0 -70px;
}
/* header styles */
.logo {
left:30px;
position:absolute;
top:20px;
}
.soc-ico {
position:absolute;
right:40px;
top:25px;
width:270px;
}
.soc-ico li {
float:left;
margin-left:5px;
}
#search {
border:1px solid #000;
position:absolute;
right:50px;
top:95px;
width:226px;
}
#search input[type=text] {
background-color:#4F4F4F;
border-width:0;
color:#FFF;
float:left;
font-size:12px;
height:28px;
line-height:28px;
margin-right:1px;
padding:0 5px;
width:185px;
}
#search input[type=submit] {
background:url(../images/search-submit.png) no-repeat;
border:none;
cursor:pointer;
float:left;
height:28px;
width:30px;
}
Main body layout consists of 3 main sections: header (logo, social icons, navigation menu and search form), main section (four blocks: Promo, Headline (you can use some video here), Last members and Last news) and footer (with different links). It looks like:
<body>
<header><!-- Define the header section of the page -->
<h1 class="logo"><!-- Define the logo element -->
<a href="#"><img src="images/logo.png" alt=""></a>
</h1>
<ul class="soc-ico"><!-- Define social icons -->
<li><a href="#"><img src="images/twitter48.png" alt=""></a></li>
.....
</ul>
<nav><!-- Define the navigation menu -->
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Members</a></li>
.....
</ul>
</nav>
<form id="search"><!-- Define the search element -->
<input type="text" name="s" />
<input type="submit" value="" />
</form>
</header>
<div id="content"><!-- Define the content section -->
<div class="box box1">
.....
</div>
<div class="box box2">
.....
</div>
<div class="box box3">
.....
</div>
<div class="box box4">
.....
</div>
</div>
<footer><!-- Define the footer section of the page -->
<ul>
<li class="active"><a href="#">Home</a>|</li>
<li><a href="#">Members</a>|</li>
.....
</ul>
</footer>
</body>
Base CSS styles
/* base styles */
body {
background:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1em;
color:#000;
}
header {
background:url("../images/header-bg.png") repeat-x scroll 0 0 transparent;
height:160px;
position:relative;
}
a {
color:#2cbcfc;
outline:none;
}
a:hover {
text-decoration:none;
}
p {
line-height:16px;
margin-bottom:16px;
}
h1 {
position:absolute;
left:10px;
top:49px;
}
h2 {
font:bold 20px/24px Arial, Helvetica, sans-serif;
color:#fff;
text-transform:uppercase;
margin-bottom:11px;
padding:0 4px;
}
h3,.h3 {
font:bold 13px/22px Arial, Helvetica, sans-serif;
color:#2cbcfc;
text-transform:uppercase;
}
.white {
color:#FFF;
}
.blue {
color:#22a2fb;
}
.gray {
color:#696565;
}
.rm {
width:108px;
padding-left:14px;
background:url(../images/rm-bg.png) no-repeat;
font:bold 11px/29px Arial, Helvetica, sans-serif;
display:inline-block;
text-decoration:none;
text-transform:uppercase;
color:#fff;
float:right;
}
.rm:hover {
color:#000;
}
.upc {
text-transform:uppercase;
}
.extra-wrap {
overflow:hidden;
}
.clear {
clear:both;
line-height:0;
}
.blck {
display:block;
}
Header section preview html markup:
<header><!-- Define the header section of the page -->
<h1 class="logo"><!-- Define the logo element -->
<a href="#"><img src="images/logo.png" alt=""></a>
</h1>
<ul class="soc-ico"><!-- Define social icons -->
<li><a href="#"><img src="images/twitter48.png" alt=""></a></li>
<li><a href="#"><img src="images/google48.png" alt=""></a></li>
<li><a href="#"><img src="images/facebook48.png" alt=""></a></li>
<li><a href="#"><img src="images/stumbleupon48.png" alt=""></a></li>
<li><a href="#"><img src="images/rss48.png" alt=""></a></li>
</ul>
<nav><!-- Define the navigation menu -->
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Radio</a></li>
<li><a href="#">Forum</a></li>
<li><a href="http://www.script-tutorials.com/my-portal-single-page-layout-for-your-community/">back to Script Tutorials</a></li>
</ul>
</nav>
<form id="search"><!-- Define the search element -->
<input type="text" name="s" />
<input type="submit" value="" />
</form>
</header>
CSS styles for header section:
/* navigation menu styles */
header nav {
position:absolute;
top:82px;
white-space:nowrap;
}
header nav li {
float:left;
margin-right:1px;
}
header nav li:first-child {
margin-left:20px;
}
header nav a {
background:url(../images/nav-sprite.png) 0 0 repeat-x;
color:#fff;
display:block;
font:bold 14px/20px Arial, Helvetica, sans-serif;
height:32px;
padding:14px 18px 0;
text-decoration:none;
text-transform:uppercase;
}
header nav a:hover,header nav .active a {
background-position:0 -70px;
}
/* header styles */
.logo {
left:30px;
position:absolute;
top:20px;
}
.soc-ico {
position:absolute;
right:40px;
top:25px;
width:270px;
}
.soc-ico li {
float:left;
margin-left:5px;
}
#search {
border:1px solid #000;
position:absolute;
right:50px;
top:95px;
width:226px;
}
#search input[type=text] {
background-color:#4F4F4F;
border-width:0;
color:#FFF;
float:left;
font-size:12px;
height:28px;
line-height:28px;
margin-right:1px;
padding:0 5px;
width:185px;
}
#search input[type=submit] {
background:url(../images/search-submit.png) no-repeat;
border:none;
cursor:pointer;
float:left;
height:28px;
width:30px;
}
Main content section
Now – our main content area. It consists of 4 different blocks: Promo (with jQuery slider), new block with embed video (as example – some video promo), next 2 blocks – listings, first one – with images (you can use it as list of members or photos at your website), second one – without images (you can use this list to display some news of your website).
<div id="content"><!-- Define the content section -->
<div class="box box1">
<div class="gallery">
<div class="pic"><img src="images/promo1.jpg" alt=""></div>
<ul class="imgs">
<li class="current"><a href="images/promo1.jpg"><img src="images/thumb1.jpg" alt=""></a></li>
<li><a href="images/promo2.jpg"><img src="images/thumb2.jpg" alt=""></a></li>
<li><a href="images/promo3.jpg"><img src="images/thumb3.jpg" alt=""></a></li>
</ul>
</div>
<div class="fl">
<h3>Promo block - item title</h3>
<strong class="upc white">Promo block - item description</strong> </div>
</div>
<div class="box box2">
<h2 class="fl"><span class="blue">Our</span> headline</h2>
<iframe width="332" height="187" src="http://www.youtube.com/embed/DzH_wX6Uauc" frameborder="0" allowfullscreen></iframe>
</div>
<div class="box box3">
<h2><span class="blue">Last</span> members</h2>
<ul class="box-set">
<li>
<a href="#"><img src="images/thumbnail.jpg" alt=""></a>
<h3>Member 1</h3>
<strong class="white upc">USA, New York</strong>
</li>
<li>
<a href="#"><img src="images/thumbnail.jpg" alt=""></a>
<h3>Member 2</h3>
<strong class="white upc">USA, New York</strong>
</li>
<li>
<a href="#"><img src="images/thumbnail.jpg" alt=""></a>
<h3>Member 3</h3>
<strong class="white upc">USA, New York</strong>
</li>
<li>
<a href="#"><img src="images/thumbnail.jpg" alt=""></a>
<h3>Member 4</h3>
<strong class="white upc">USA, New York</strong>
</li>
<li>
<a href="#"><img src="images/thumbnail.jpg" alt=""></a>
<h3>Member 5</h3>
<strong class="white upc">USA, New York</strong>
</li>
<li>
<a href="#"><img src="images/thumbnail.jpg" alt=""></a>
<h3>Member 6</h3>
<strong class="white upc">USA, New York</strong>
</li>
</ul>
<a href="#" class="rm">read more</a><br class="clear">
</div>
<div class="box box4">
<h2><span class="blue">Last</span> News</h2>
<ul class="list">
<li><a href="#"><span class="n">01</span><span class="extra-wrap blck"><span class="h3">Post title 1</span><br><strong class="white upc">Description of post #1 Description of post #1 Description of post #1</strong></span></a></li>
<li><a href="#"><span class="n">02</span><span class="extra-wrap blck"><span class="h3">Post title 2</span><br><strong class="white upc">Description of post #2 Description of post #2 Description of post #2</strong></span></a></li>
<li><a href="#"><span class="n">03</span><span class="extra-wrap blck"><span class="h3">Post title 3</span><br><strong class="white upc">Description of post #3 Description of post #3 Description of post #3</strong></span></a></li>
<li><a href="#"><span class="n">04</span><span class="extra-wrap blck"><span class="h3">Post title 4</span><br><strong class="white upc">Description of post #4 Description of post #4 Description of post #4</strong></span></a></li>
<li><a href="#"><span class="n">05</span><span class="extra-wrap blck"><span class="h3">Post title 5</span><br><strong class="white upc">Description of post #5 Description of post #5 Description of post #5</strong></span></a></li>
</ul>
<a href="#" class="rm">read more</a><br class="clear">
</div>
</div>
CSS styles for main section:
/* main section */
#content {
margin:0 auto;
overflow:hidden;
position:relative;
width:1225px;
}
.box {
float:left;
font-size:11px;
margin-bottom:10px;
margin-right:8px;
overflow:hidden;
padding:14px;
/* CSS3 Box sizing property */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.box1,.box2 {
background:#1a1a1a url(../images/block-bg1.png) repeat-x 0 0;
}
.box3 {
background:#0d0d0d url(../images/block-bg2.png) repeat-x 0 0;
width:615px;
}
.box4 {
background:#0d0d0d url(../images/block-bg3.png) repeat-x 0 0;
width:585px;
}
.box1 {
width:840px;
}
.box2 {
width:360px;
}
.gallery {
margin-bottom:3px;
overflow:hidden;
}
.gallery .pic {
float:left;
margin-right:4px;
}
.gallery .imgs {
float:left;
}
.gallery .imgs>li {
margin-bottom:4px;
}
.gallery .imgs>li>a {
display:block;
}
/* list styles */
.list {
display:block;
}
.list li {
background:url(../images/g-separator.png) bottom repeat-x;
margin-bottom:18px;
padding-bottom:18px;
}
.list2 li {
margin-bottom:10px;
padding-bottom:10px;
}
.list a {
text-decoration:none;
}
.list a span {
cursor:pointer;
}
*+html .list li {
margin-bottom:17px;
overflow:hidden;
padding-bottom:16px;
}
.list a .n {
background:#4f4f4f;
color:#fff;
float:left;
font:bold 13px/22px Arial, Helvetica, sans-serif;
margin-right:11px;
text-align:center;
text-decoration:none;
width:22px;
}
.list a:hover .n {
background:#28b3fc;
color:#000;
}
/* box set styles */
.box-set dl dt {
float:left;
}
div.box-set {
margin-top:-12px;
}
div.box-set dl {
overflow:hidden;
padding-top:12px;
position:relative;
}
div.box-set dl dt {
margin-right:10px;
}
div.box-set dl dd strong {
font-size:11px;
font-weight:700;
}
ul.box-set li {
float:left;
margin-bottom:16px;
margin-right:10px;
}
ul.box-set li.last {
margin-right:0;
}
ul.box-set li img {
margin-bottom:8px;
}
.box-set dl,.box-set dl dd,ul.box-set {
overflow:hidden;
}
Now – our main content area. It consists of 4 different blocks: Promo (with jQuery slider), new block with embed video (as example – some video promo), next 2 blocks – listings, first one – with images (you can use it as list of members or photos at your website), second one – without images (you can use this list to display some news of your website).<div id="content"><!-- Define the content section --> <div class="box box1"> <div class="gallery"> <div class="pic"><img src="images/promo1.jpg" alt=""></div> <ul class="imgs"> <li class="current"><a href="images/promo1.jpg"><img src="images/thumb1.jpg" alt=""></a></li> <li><a href="images/promo2.jpg"><img src="images/thumb2.jpg" alt=""></a></li> <li><a href="images/promo3.jpg"><img src="images/thumb3.jpg" alt=""></a></li> </ul> </div> <div class="fl"> <h3>Promo block - item title</h3> <strong class="upc white">Promo block - item description</strong> </div> </div> <div class="box box2"> <h2 class="fl"><span class="blue">Our</span> headline</h2> <iframe width="332" height="187" src="http://www.youtube.com/embed/DzH_wX6Uauc" frameborder="0" allowfullscreen></iframe> </div> <div class="box box3"> <h2><span class="blue">Last</span> members</h2> <ul class="box-set"> <li> <a href="#"><img src="images/thumbnail.jpg" alt=""></a> <h3>Member 1</h3> <strong class="white upc">USA, New York</strong> </li> <li> <a href="#"><img src="images/thumbnail.jpg" alt=""></a> <h3>Member 2</h3> <strong class="white upc">USA, New York</strong> </li> <li> <a href="#"><img src="images/thumbnail.jpg" alt=""></a> <h3>Member 3</h3> <strong class="white upc">USA, New York</strong> </li> <li> <a href="#"><img src="images/thumbnail.jpg" alt=""></a> <h3>Member 4</h3> <strong class="white upc">USA, New York</strong> </li> <li> <a href="#"><img src="images/thumbnail.jpg" alt=""></a> <h3>Member 5</h3> <strong class="white upc">USA, New York</strong> </li> <li> <a href="#"><img src="images/thumbnail.jpg" alt=""></a> <h3>Member 6</h3> <strong class="white upc">USA, New York</strong> </li> </ul> <a href="#" class="rm">read more</a><br class="clear"> </div> <div class="box box4"> <h2><span class="blue">Last</span> News</h2> <ul class="list"> <li><a href="#"><span class="n">01</span><span class="extra-wrap blck"><span class="h3">Post title 1</span><br><strong class="white upc">Description of post #1 Description of post #1 Description of post #1</strong></span></a></li> <li><a href="#"><span class="n">02</span><span class="extra-wrap blck"><span class="h3">Post title 2</span><br><strong class="white upc">Description of post #2 Description of post #2 Description of post #2</strong></span></a></li> <li><a href="#"><span class="n">03</span><span class="extra-wrap blck"><span class="h3">Post title 3</span><br><strong class="white upc">Description of post #3 Description of post #3 Description of post #3</strong></span></a></li> <li><a href="#"><span class="n">04</span><span class="extra-wrap blck"><span class="h3">Post title 4</span><br><strong class="white upc">Description of post #4 Description of post #4 Description of post #4</strong></span></a></li> <li><a href="#"><span class="n">05</span><span class="extra-wrap blck"><span class="h3">Post title 5</span><br><strong class="white upc">Description of post #5 Description of post #5 Description of post #5</strong></span></a></li> </ul> <a href="#" class="rm">read more</a><br class="clear"> </div> </div>CSS styles for main section:/* main section */ #content { margin:0 auto; overflow:hidden; position:relative; width:1225px; } .box { float:left; font-size:11px; margin-bottom:10px; margin-right:8px; overflow:hidden; padding:14px; /* CSS3 Box sizing property */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .box1,.box2 { background:#1a1a1a url(../images/block-bg1.png) repeat-x 0 0; } .box3 { background:#0d0d0d url(../images/block-bg2.png) repeat-x 0 0; width:615px; } .box4 { background:#0d0d0d url(../images/block-bg3.png) repeat-x 0 0; width:585px; } .box1 { width:840px; } .box2 { width:360px; } .gallery { margin-bottom:3px; overflow:hidden; } .gallery .pic { float:left; margin-right:4px; } .gallery .imgs { float:left; } .gallery .imgs>li { margin-bottom:4px; } .gallery .imgs>li>a { display:block; } /* list styles */ .list { display:block; } .list li { background:url(../images/g-separator.png) bottom repeat-x; margin-bottom:18px; padding-bottom:18px; } .list2 li { margin-bottom:10px; padding-bottom:10px; } .list a { text-decoration:none; } .list a span { cursor:pointer; } *+html .list li { margin-bottom:17px; overflow:hidden; padding-bottom:16px; } .list a .n { background:#4f4f4f; color:#fff; float:left; font:bold 13px/22px Arial, Helvetica, sans-serif; margin-right:11px; text-align:center; text-decoration:none; width:22px; } .list a:hover .n { background:#28b3fc; color:#000; } /* box set styles */ .box-set dl dt { float:left; } div.box-set { margin-top:-12px; } div.box-set dl { overflow:hidden; padding-top:12px; position:relative; } div.box-set dl dt { margin-right:10px; } div.box-set dl dd strong { font-size:11px; font-weight:700; } ul.box-set li { float:left; margin-bottom:16px; margin-right:10px; } ul.box-set li.last { margin-right:0; } ul.box-set li img { margin-bottom:8px; } .box-set dl,.box-set dl dd,ul.box-set { overflow:hidden; }
Footer section
And finally – small footer area with extra links:
<footer><!-- Define the footer section of the page -->
<ul>
<li class="active"><a href="#">Home</a>|</li>
<li><a href="#">Members</a>|</li>
<li><a href="#">News</a>|</li>
<li><a href="#">Photos</a>|</li>
<li><a href="#">Radio</a>|</li>
<li><a href="#">Forum</a></li>
</ul>
</footer>
CSS styles for footer section:
/* footer section */
footer {
background:url("../images/footer-bg.png") repeat-x scroll 0 0 transparent;
height:63px;
margin-top:50px;
position:relative;
width:100%;
}
footer ul {
margin:0 auto;
overflow:hidden;
padding-top:24px;
position:relative;
width:410px;
}
footer li {
color:#373838;
float:left;
font:12px/18px Arial, Helvetica, sans-serif;
margin-right:10px;
}
footer li a {
color:#757575;
float:left;
margin-right:10px;
text-decoration:none;
}
footer li a:hover,footer li.active a {
color:#fff;
}
And finally – small footer area with extra links:<footer><!-- Define the footer section of the page --> <ul> <li class="active"><a href="#">Home</a>|</li> <li><a href="#">Members</a>|</li> <li><a href="#">News</a>|</li> <li><a href="#">Photos</a>|</li> <li><a href="#">Radio</a>|</li> <li><a href="#">Forum</a></li> </ul> </footer>CSS styles for footer section:/* footer section */ footer { background:url("../images/footer-bg.png") repeat-x scroll 0 0 transparent; height:63px; margin-top:50px; position:relative; width:100%; } footer ul { margin:0 auto; overflow:hidden; padding-top:24px; position:relative; width:410px; } footer li { color:#373838; float:left; font:12px/18px Arial, Helvetica, sans-serif; margin-right:10px; } footer li a { color:#757575; float:left; margin-right:10px; text-decoration:none; } footer li a:hover,footer li.active a { color:#fff; }
Javascript for our template
There are only 2 JS files (jquery.spinner.js and script.js). First one is extra jQuery library for our promo block. Second one – our own code, look at this code:
;(function($){
$.fn.extend({
praParent:function(name){
var th = $(this);
while (th = th.parent()) {
if (th.is(name)) break
}
return th;
}
})
})(jQuery)
$(function(){
$('.gallery .imgs a').each(function(){
var th=$(this), img=$('img',th), tmp;
if(tmp=img.height()) {
th.css({height:tmp/2});
} else {
img.load(function(){
th.css({height:this.offsetHeight/2})
})
}
th.css({overflow:'hidden',position:'relative'}).append($('<span></span>')
.css({background:'url('+img.attr('src')+') 0 100% no-repeat',position:'absolute',left:0,top:0,width:'100%',height:'100%',opacity:0,cursor:'pointer'})
.bind('mouseenter',function(){
$(this).stop().animate({opacity:1})
})
.bind('mouseleave',function(){
if(!$(this).praParent('li').is('.current')) {
$(this).stop().animate({opacity:0});
}
})
)
.bind('click',function(){
var th=$(this),pic=th.praParent('div').find('.pic img');
th.parent('li').addClass('current').siblings().removeClass('current').find('span').stop().animate({opacity:0});
pic.spinner({
filename:'images/ajax-loader.gif',
src:th.attr('href')
})
return false
})
$('.gallery ul.imgs li.current span').css({opacity:1})
})
})
There are only 2 JS files (jquery.spinner.js and script.js). First one is extra jQuery library for our promo block. Second one – our own code, look at this code:;(function($){ $.fn.extend({ praParent:function(name){ var th = $(this); while (th = th.parent()) { if (th.is(name)) break } return th; } }) })(jQuery) $(function(){ $('.gallery .imgs a').each(function(){ var th=$(this), img=$('img',th), tmp; if(tmp=img.height()) { th.css({height:tmp/2}); } else { img.load(function(){ th.css({height:this.offsetHeight/2}) }) } th.css({overflow:'hidden',position:'relative'}).append($('<span></span>') .css({background:'url('+img.attr('src')+') 0 100% no-repeat',position:'absolute',left:0,top:0,width:'100%',height:'100%',opacity:0,cursor:'pointer'}) .bind('mouseenter',function(){ $(this).stop().animate({opacity:1}) }) .bind('mouseleave',function(){ if(!$(this).praParent('li').is('.current')) { $(this).stop().animate({opacity:0}); } }) ) .bind('click',function(){ var th=$(this),pic=th.praParent('div').find('.pic img'); th.parent('li').addClass('current').siblings().removeClass('current').find('span').stop().animate({opacity:0}); pic.spinner({ filename:'images/ajax-loader.gif', src:th.attr('href') }) return false }) $('.gallery ul.imgs li.current span').css({opacity:1}) }) })
0 comments:
Post a Comment