Quiet Slide-Image Rotator Posted by vuluganck | at Monday, June 08, 2009

Quiet Slide-Image Rotator , the name is quite strange to you.This is a slide, a very big slide, very useful for blogs which are belong to media.
You can see these kinds of slide just on some special websites.If anybody had seen this slide be4, you wished you could have it,but perhaps that dream will never come true.

Now you are sitting on your chair and read these lines, you will be amazing that this incredible tip can be worked on your blog.Yes on your BLOG.

Let me introduce some info about this slide.

-This is not an auto slide so this is the lightweight slide.You can put 6 posts on this slide ( or more if you are pro about function and CSS),I just can made for you 6 slots to put articles.But anyway, I think 6 is enough.

-Quiet Slide uses Jquery so there are some effects here ( smooth, open and close the short contents).

-It is very big, the slide's width is 900px and the height is 450px, so you just able to put it at the header or bottom of your blog.It can not be put at sidebar or post body.

• View live demo


• Download the file

I don't know what you are thinking but I am sure you will like it and already to bring it to your blog.

Ok let's go,you have 3 steps to the final destination.the first is "CSS" work, second is "Call Jquery" work,third is "show off" work.

1.CSS work

Log in your blogger account then put this code before the ]]></b:skin>:

body {
background: #1d1d1d;
margin: 0; padding: 0;
font: 10px normal Arial, Helvetica, sans-serif;
}
* {margin: 0; padding: 0; outline: none;}
img {border: none;}
h1 {
font: 3em normal Georgia, "Times New Roman", Times, serif;
color: #fff;
text-align: center;
background: url(h1_bg.gif) no-repeat;
text-indent: -99999px;
margin: 100px 0 10px;
}
.container {
overflow: hidden;
width: 900px;
margin: 0 auto;
}
#main {
padding: 10px;
background: #f0f0f0;
border: 1px solid #ccc;
}
a {color: #fff;}

/*--Main Image Preview--*/
.main_image {
width: 598px; height: 456px;
float: left;
background: #333;
position: relative;
overflow: hidden;
color: #fff;
}
.main_image h2 {
font-size: 2em;
font-weight: normal;
margin: 0 0 5px; padding: 10px;
}
.main_image p {
font-size: 1.2em;
padding: 10px; margin: 0;
line-height: 1.6em;
}
.block small {
padding: 0 0 0 20px;
background: url(icon_calendar.gif) no-repeat 0 center;
font-size: 1em;
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
position: absolute;
bottom: 0; left: 0;
width: 100%;
display: none;
}
.main_image .block{
width: 100%;
background: #111;
border-top: 1px solid #000;
}
.main_image a.collapse {
background: url(btn_collapse.gif) no-repeat left top;
height: 27px; width: 93px;
text-indent: -99999px;
position: absolute;
top: -27px; right: 20px;
}
.main_image a.show {background-position: left bottom;}


.image_thumb {
float: left;
width: 299px;
background: #f0f0f0;
border-right: 1px solid #fff;
border-top: 1px solid #ccc;
}
.image_thumb img {
border: 1px solid #ccc;
padding: 5px;
background: #fff;
float: left;
}
.image_thumb ul {
margin: 0; padding: 0;
list-style: none;
}
.image_thumb ul li{
margin: 0; padding: 12px 10px;
background: #f0f0f0 url(nav_a.gif) repeat-x;
width: 279px;
float: left;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
background: #ddd;
cursor: pointer;
}
.image_thumb ul li.active {
background: #fff;
cursor: default;
}
html .image_thumb ul li h2 {
font-size: 1.5em;
margin: 5px 0; padding: 0;
}
.image_thumb ul li .block {
float: left;
margin-left: 10px;
padding: 0;
width: 170px;
}
.image_thumb ul li p{display: none;}

*Note :
-The red code is the places you have to add some necessary icons.You should do all the steps and finish then compare with the demo , you will know what icons you still miss.
-This is the important step, this CSS code can change the slide face,unless you are the expert about this, you should not change any thing here except the red code.

2.Call Jquery work

Add this code before the </head> tag :

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="quietslide.js" type="text/javascript"></script>

Note:All you have to do at this step is downloading the file I gave you at first(click on Download next to Demo button).After you download,extract it you will get 1 js file name quiteslide.js, upload it to your favorite host such as 110mb.com,...Then get the direct link and paste instead the word quietslide.js.

3.Final Step-show off work

<div id="main" class="container">
<div class="main_image">
<img src="banner1.jpg" alt="- banner1" />
<div class="desc">
<a href="#" class="collapse">Close Me!</a>

<div class="block">
<h2>About this slide</h2>
<small>04/10/09</small>

<p>This slide is brought to you by Zen, to make this slide please visit<br /><a href="http://zenplate.blogspot.com" target="_blank">Zenplate</a> to find out and don't forget to subscribe <a href="http://feeds2.feedburner.com/zenplate" target="_blank">Zenplate feed</a> and follow me on <a href="http://twitter.com/zendersto" target="_blank">Twitter</a></p>
</div>
</div>
</div>

<div class="image_thumb">
<ul>
<li>
<a href="banner1.jpg"><img src="banner1_thumb.jpg" alt="Slowing Dow" /></a>
<div class="block">
<h2>Slowing Down</h2>
<small>04/10/09</small>


<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://store.glennz.com/slowingdown.html" target="_blank">Artwork By Glenn Jones</a> </p>
</div>
</li>

<li>
<a href="banner2.jpg"><img src="banner2_thumb.jpg" alt="Organized Food Fight" /></a>
<div class="block">
<h2>Organized Food Fight</h2>

<small>04/11/09</small>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et. Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.</p>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://store.glennz.com/orfofi.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</li>

<li>
<a href="banner3.jpg"><img src="banner3_thumb.jpg" alt="Endangered Species" /></a>
<div class="block">
<h2>Endangered Species</h2>
<small>04/12/09</small>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://store.glennz.com/ensp.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</li>

<li>
<a href="banner4.jpg"><img src="banner4_thumb.jpg" alt="Evolution" /></a>
<div class="block">
<h2>Evolution</h2>
<small>04/13/09</small>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et. Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://store.glennz.com/evolution.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</li>

<li>
<a href="banner5.jpg"><img src="banner5_thumb.jpg" alt="Puzzled Putter" /></a>
<div class="block">
<h2>Puzzled Putter</h2>
<small>04/14/09</small>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et. <br /><a href="http://store.glennz.com/puzzledputter.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</li>

<li>
<a href="banner6.jpg"><img src="banner6_thumb.jpg" alt="Secret Habit" /></a>
<div class="block">
<h2>Secret Habit</h2>
<small>04/15/09</small>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem.<br /><a href="http://store.glennz.com/secrethabit1.html" target="_blank">Artwork By Glenn Jones</a></p>

</div>
</li>
</ul>
</div>
</div>

*Note:
-At this step, you can option any thing you want and to put the image in the right place, please notice the pink code.

All Done now , Save and try it.If you have any problem please leave me a comment below, don't be so quiet,just a comment! And don't forget to subscribe me.Thanks.
Zen


Requirements:Jquery
Website : http://www.sohtanaka.com/(Also DesignM.ag)
Source demo : http://www.sohtanaka.com/web-design/examples/image-rotator/
Demo by Zen : http://flowerblog-zenplate.blogspot.com
Convert to blogger : Zenplate