2009/06/08

Quiet Slide-Image Rotator

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.



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

7 comments:

2pngfx said...

Wow. Thing thing is great. I myself is a CSS coder also. I love your design. IT follows user-centeredness. The user will be fond of posting contents with your slider. About the effects its great with smoothing. Jquery function is a new trend of web technology and its very great that you integrate it in your slider. Keep up the good work mate. Good day!

iLLukin mYztiKa said...

this thing has made me little more mad about improving my skills as the self-made CSS coder.. the best thing that i find in this script is that it isnt that bulky and doesnt even load the site ( in reference to that of live demo ). Most of the scripts that i have worked upon took a lot of load to load themselves... i have seen even the back flip stuffs using the jquery, your method is kool and fine plus a lot relevant to simple and ethical approach to code a better half ! i will use it in my new blog of media blog as soon i get my Nokia N96 on my birthday !

adminoe said...

well, the concept is easy to grab and digest with such an eased , descriptive explanation of code...

what's really strange is nobody else coded such a low-resource utilizing script and i never had people reveal it to me of how can i code one...

i'd love to use it under sectioned areas with selected ones to show, well how can we automate it to synchronize with the feed ( say feedburner ) so that i can place as a widget too for rolling out my posts (all pics ) to come out on a roll...

i would love to see that as a future prospect, i'll subscribe !

Cinnamon said...

Hey, thanks for sharing the code and color coding the important bits so that a computer simpleton like me can follow the code. I will be experimenting with the codes. Every visit I make to your side is an exercise in coding. Awesome.

Auror said...

Hi bro, thanks for the code its realy realy wonderfull i was looking for this kind of code and its realy awsome thanks a lot

Alan said...

it works in wordpress??

vuluganck said...

yes, it does!

Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen

 
.