AutoTransform Slide/Image Posted by zendersto | at Tuesday, July 21, 2009

I am sorry about the long time that I did not publish new tips for you.But from now it will be different, to sorry, I will bring this slide for you.I hope you will like it and I am sure it will not disappoint you.

This slide is called Auto Transform Slide/Image, its name is very special and its features,too.Let's find out them.

Why is it called auto transform image?Because you don't have to fix the margin if you want it bigger or smaller.All you have to do with your images is resizing the images to be smaller and bigger.If you have used this slide-Auto Image Slideshow-which I have published, you have to change the margin always to be fit.And why it is called auto transform slide?Yes that's the auto slide,too.

Now it's time to make it.

• View live demo


• Download

1.First, put this code before the ]]></b:skin> tag:
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
margin-left:40px;
background-color:#e5e5e5;
}
/* begin: slideshow */
.slideshow {
position:relative;
padding:0;
margin:0;
}
.slideshow a img {
border:none;
}
.slideshow li.slide {
list-style-type:none;
}
.slideshow .slides {
height:260px;
margin:0;
}
.slideshow .slides li.slide {
visibility:hidden;
position:absolute;
left:0px;
top:0;
}
.slideshow .buttons {
display:none;
}
.slideshow .buttons {
display:block;
position:absolute;
z-index:100;
left:0px;
bottom:20px;
margin:0;
}
.slideshow .buttons li {
float:left;
display:inline;
width:30px;
height:30px;
margin:0;
padding-left:11px;
line-height:30px;
background-image:url('buttonBg.png');
background-repeat:no-repeat;
}
.slideshow .buttons li a {
float:left;
text-decoration:none;
width:30px;
height:30px;
color:#fff;
outline:0;
}
.slideshow ul.buttons li a:hover {
text-decoration:none;
color:#0a0a0a;
}
.slideshow ul.buttons li.active a:hover,
.slideshow ul.buttons li.active a {
color:#666666;
}
/* end: slideshow */

Ok, at this step you just have to notice the pink place if you really don't want to care about the fixing.You can get that icon in the file you have to download,or you can put your own icon, it's ok.

2.Now, add these 2 scripts before the </head> tag:
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script charset='utf-8' src='transform.js' type='text/javascript'/>

Download the file I gave you, host it and get the direct link, paste it instead of the red code.

3.Save all and create a HTML/Javascript, add this code:

<div class='slideshow'>
<ul class='buttons'>
<li class='active' id='button1'><a href='#' title='website named desire'>1</a></li>
<li id='button2'><a href='#' title=''>2</a></li>
<li id='button3'><a href='#' title='oomph'>3</a></li>

</ul>
<ul class='slides'>

<li class='slide' id='image1' style='visibility:visible'>
<a href='http://zenplate.blogspot.com/2009/06/quiet-slide-image-rotator.html'><img alt='website named desire' src='http://i651.photobucket.com/albums/uu240/zendersto/imagesliderotator.png'/></a></li>

<li class='slide' id='image2'>
<a href='http://zenplate.blogspot.com/2009/06/bbc-radio-slide.html'><img alt='' src='http://i651.photobucket.com/albums/uu240/zendersto/footer.png'/></a></li>

<li class='slide' id='image3'>
<a href='http://zenplate.blogspot.com/2009/05/create-image-slideshow.html'><img alt='oomph' src='http://i651.photobucket.com/albums/uu240/zendersto/ghe.jpg'/></a></li>

</ul>
</div>

Alright, at this step, you can change the links and images by your own.I hope you will like this, please do me a back link for thank, thank you very much friends and don't forget to subscribe me to see more great tips for blogger.All you see here is just from Zenplate.

Requirements : Jquery
Developers: MIX Online
Website : http://visitmix.com/labs/glimmer/samples/sequence.html
Convert to blogger : Zenplate