a stunning jQuery gallery
Download ViewA few weeks ago, the task of building the new website for the company I work for landed on my desk. The designs had been done and I was briefed by the designer for the project on how everything was intended to work. The main focus of the site seemed to be rich user interaction and lots of jQuery - lovely.
One of the focal points of the site was a very functional portfolio gallery (shown below). I looked around and tried to find a quick solution online to the problem (obviously as this wasn't billable work, the amount of allocated working hours where minimal). After looking around and finding sweet amounts of nothing, I thought it best just to write my own one.
HTML
<div id="gallery">
<div id="gallery_main">
<div id="project_cont">
<!-- Add more items here by copy-and-pasting the div.project div and changing it's information accordingly -->
<!-- element wrapping div with background as image. -->
<div class="project" style="background-image:url('/_images/portfolio/project/600/1.jpg');">
<!-- list image gallery -->
<div class="imgs">
<ul>
<li><a href="/_images/portfolio/project/600/1.jpg" class="thumbnail">1</a></li>
</ul>
</div><!-- imgs -->
<!-- info for element, expandable on mouseover -->
<div class="project_info">
<p class="center"><img src="/_images/bullets/arrow_trans.gif" class="arrow_trans" alt="" /></p>
<div class="clear"></div>
<br />
<p class="right">
The solution:<br />
A slick, clean look and user-friendly CSS based navigation means the site is easy to move around, whilst remaining faithful to the corporate look of the Ashworth Golf Company. A fully dynamic catalogue area allows the user to search for clothing via season, collection or gender. Flash animation illustrates the 'Golfers Creed' and enhances brand appeal.
</p>
<p class="left">
Client: Ashworth Europe<br />
Project Type: E-Commerce
</p>
<p class="left">
The brief:<br />
Rebuild the Ashworth Europe website, incorporating a Content Management System (CMS) to allow the staff to make internal updates to the pages and provide a full catalogue to display the current ranges.
</p>
</div><!-- project_info -->
</div><!-- project -->
</div><!-- project_cont -->
</div><!-- gallery_main -->
<div class="clear"></div>
<div id="prev">
<a href="#" class="prev"><img src="/_images/buttons/prev.gif" alt="Prev" /></a>
</div><!-- prev -->
<!-- thumbnail scroller, jumps to element on click -->
<div id="thumbs">
<div id="thumb_container">
<ul>
<!-- When adding more projects, add another <li> below. Remember to increase the 'rel' tag by 600 (or the width of the container if different) for each item -->
<li><a href="#" class="thumb" rel="0"><img src="/_images/portfolio/project/45/1.jpg" alt="" /></a></li>
</ul>
</div><!-- thumb_container -->
</div><!-- thumbs -->
<div id="next">
<a href="#" class="next"><img src="/_images/buttons/next.gif" alt="Next" /></a>
</div><!-- next -->
</div><!-- gallery -->
CSS
#gallery {
width:602px;
height:450px;
margin:0 0 15px 0;
padding:10px 9px 10px 10px;
background:#000;
position:relative;
display:block;
}
#gallery_left {
width:100px;
height:400px;
margin:0;
padding:0;
float:left;
}
#gallery_main {
width:600px;
height:400px;
margin:0;
padding:0;
float:left;
position:relative;
overflow:hidden;
}
#gallery_right {
width:100px;
height:400px;
margin:0;
padding:0;
float:left;
}
#gallery_left a,
#gallery_right a {
outline:none;
}
div.project {
margin:0;
padding:0;
width:600px;
height:400px;
position:relative;
float:left;
}
div.project_info {
width:580px;
height:280px;
margin:0;
padding:10px;
position:absolute;
top:347px;
left:0;
background:url('/_images/trans.png') top left no-repeat;
}
#project_cont {
width:10000px;
position:absolute;
top:0;
left:0;
}
div.project_info p {
margin:0;
padding:0;
color:#FFF !important;
font-size:11px;
line-height:150%;
font-weight:bold;
}
div.imgs {
margin:0;
padding:10px 10px 0 0;
float:right;
}
div.imgs ul {
margin:0;
padding:0;
list-style:none;
}
div.imgs ul li {
margin:0 !important;
padding:0 !important;
float:left !important;
}
div.imgs ul li a {
padding:3px 5px 2px 5px;
margin:0 2px 0 0 !important;
display:block;
font-size:11px;
text-decoration:none;
color:#FFF;
font-weight:bold;
background:#333;
border:1px solid #000;
outline:none;
}
div.imgs ul li a:hover,
div.imgs ul li a.selected {
background:#FFF;
color:#000;
}
#thumbs,
#thumbs2 {
float:left;
width:520px;
height:40px;
margin:10px 0 0 0;
display:inline;
overflow:hidden;
position:relative !important;
}
#thumb_container,
#thumb_container2 {
position:absolute;
top:0;
left:0;
}
#thumbs ul,
#thumbs2 ul {
margin:0;
padding:0;
list-style:none;
}
#thumbs ul li,
#thumbs2 ul li {
margin:0 !important;
padding:0 !important;
float:left !important;
}
#thumbs ul li a,
#thumbs2 ul li a {
width:45px !important;
height:39px !important;
margin:0 7px 0 0 !important;
padding:0 !important;
display:block !important;
outline:none !important;
}
#prev a.prev,
#prev2 a.prev {
width:34px;
margin:0 9px 0 0;
outline:none !important;
}
#next a.next,
#next2 a.next {
width:34px;
margin:0 0 0 1px;
outline:none !important;
}
#prev,
#next,
#prev2,
#next2 {
float:left;
margin:11px 0 0 0;
display:inline;
}
div.project_info p {
font-size:11px;
font-weight:bold;
margin:0;
padding:0;
width:278px;
}
div.project_info p.left {
float:left !important;
}
div.project_info p.right {
float:right !important;
}
#footer p span {
font-size:8px;
}
jQuery
$(document).ready(function() {
// Click handler for 'next' button
$('a.next').click(function() {
// store the element containers current left position in cur_left variable
var cur_left = $('#thumb_container').css('left');
// Calculate the left position of element after move
var next_left = parseInt(cur_left) - parseInt(520);
// get the width of the thumb container
var width = $('#thumb_container').css('width');
// if the width of the next left move is less then the width of the thumb container, return false
if(next_left < '-' + width.substr(0,3)) {
return false;
} else {
// else, move the container to the next left position
$('#thumb_container').animate({left:next_left + 'px'}, {queue:false, duration:300});
return false;
};
});
// Click handler for 'prev' button - as 'next' but in reverse
$('a.prev').click(function() {
var cur_left = $('#thumb_container').css('left');
var next_left = parseInt(cur_left) + parseInt(520);
var width = $('#thumb_container').css('width');
if(next_left >= width.substr(0,3)) {
return false;
} else {
$('#thumb_container').animate({left:next_left + 'px'}, {queue:false, duration:300});
return false;
};
});
// click handler for .thumb links (link inside the scrolling bar), this controls which project_cont div is displayed
$('.thumb').click(function() {
// store number located in the 'rel' attribute of the element clicked
var pos = $(this).attr('rel');
// change the 'left' property of the #project_cont div to the value of 'pos'
$('#project_cont').animate({left:'-' + pos + 'px'}, {queue:false, duration:300});
return false;
});
// click handler for the image thumbnails
$('.thumbnail').click(function() {
// store the 'href' of the link (which will be the path to the larger image) in a var
var img = $(this).attr('href');
// change the background of this element's parent .project_cont div to the location stored in 'img'
$(this).parent().parent().parent().parent().fadeOut('slow',function() {
$(this).css('background-image', 'url(' + img + ')');
$(this).fadeIn('slow');
});
return false;
});
$('.project_info').css('top', '370px');
// click handler to move info div into view on mousever
$('.project_info').hover(function() {
// this :not(:animated) stops it having a yo-yo effect if the user moves the mouse around
if($(this).is(':not(:animated)')) {
$(this).animate({top: '180px'});
$(this).css('cursor', 'pointer');
} else {
return false;
};
}, function() {
if($(this).is(':not(:animated)')) {
$(this).animate({top: '370px'});
} else {
return false;
};
});
});
- I'm on forrst! http://forr.st/-ironhamster88
- the battle is on for Mayor of the Type 3 Office
- I'm at Type3 (unit 2, pooley drive, mortlake). http://4sq.com/dgxEmL
YouTube
Ok, I bought a Peavey 6505 head about a month ago and was completely blown away by it's tone ever since. This thing is amazing. Sorry for going on a bit with the sound demos but once I hear this thing I just can't stop playing!
