This is a great script if you want to build a cool looking photo gallery. Its called Polaroid Photo Viewer and its powered by jQuery and CSS3. Check out the demo! You can drag your Polaroids around the page. I like it!!!
Continue reading “Creating An Awesome Polaroid Photo Viewer”
Customized Dynamic AJAX Tabs for Prototype
I found these cool AJAX Tabs for Prototype and added some of my own style to them. If you need something like this then you might want to check these tabs out, they are slick! These AJAX tabs where built by 20bits.com. I needed to add more style to them for the new TMS theme that I was building yesterday. Anyway take a look at the before and after screen shots. IF you install theme why not try out my CSS located at the bottom of this post.
Don’t forget to check out the Live Demo!!


Install the tabs by following the directions at this site. 20bits.com
Once you have installed the tabs grab the CSS below and have some fun!
.tabbed-pane * {
margin: 0;
padding: 0;
}
.tabbed-pane {
margin:0 0 0 2px;
width:305px;
text-align:left;
background: #222;
color:#888;
border:1px solid #333;
padding:3px;
}
.tabbed-pane img
{
width:300px;
height:200px;
margin:0 0 8px 0px;
padding:1px;
float:left;
border:1px solid #000;
}
.tabs {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background: #111;
border-bottom: 1px solid #333;
}
.tabbed-pane ol {
height:28px;
margin-bottom:5px;
}
.tabs li a.active {
float: left;
display: block;
padding: 6px 8px 6px 8px;
text-decoration: none;
font-weight: bold;
font-size: 90%;
color: #EEE;
background: #222;
border: 1px solid #222;
}
.tabs li {
float: left;
margin: 0 0px 0 0;
}
.tabs li a {
float: left;
display: block;
padding: 6px 8px 6px 8px;
text-decoration: none;
font-weight: bold;
font-size: 90%;
background: #111;
color:#FFF000;
}
.tabs li a:hover {
float: left;
display: block;
padding: 6px 8px 8px 8px;
text-decoration: none;
font-weight: bold;
font-size: 90%;
color: #EEE;
background: #333;
}
.tabbed-container {
position: relative;
clear: both;
min-height: 10em;
}
.tabbed-container .overlay {
position: absolute;
clear: both;
padding: 0px 5px 0px 5px;
width: 290px;
height: 100%;
top: 0;
left: 0;
opacity:.70;
filter:alpha(opacity=70);
background:#222;
text-align: center;
z-index: 100;
}
.tabbed-container .overlay h3{
font-size:18px;
font-weight:700;
color:#ffF000;
}
imgPreview Powered By jQuery
The ‘imgPreview’ plugin allows your users to preview an image before clicking on it and, out of necessity, will preload the image so when a user does click through to it there is no waiting time!
Continue reading “imgPreview Powered By jQuery”
Beautiful jQuery Slider
As of right now this is my favorite content slider! Its called s3Slider and is built by serie3.info. There are tons of content sliders out there but this one to me is really clean and professional looking. Go Continue reading “Beautiful jQuery Slider”