2009/07/21

AutoTransform Slide/Image

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.



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

7 comments:

Unknown said...

Thanks zenplate.

I do like this tutorial, I need this trick for my blog. But there's a little problem if I put image slideshow on my blog:

1st: when I put this onmy blog its become too much outer link (image and href), i think its not good for search engine.

2nd: my blog size is bigger and heavy to load (actually in my place with slower internet connection).

http://entrecard.com/user_details/50636

Mobular said...

That's pretty cool going to use this on a template I'm working on .

Anonymous said...

it didnt work on mine..i did all 3 steps and it came out just a post, does look gud either..did the 1st step and cant see anything..any tips?

zendersto said...

The step 2 is very important, that's the key to make it run.Please check it, the host and the links, the 1st step is very easy, you dont have to care it, just add it in a right place.

Anonymous said...

im sorry but what does "host it and get the direct link" mean? im guessing that you need to upload the DL file online then get the "direct download link(meaning the link that create a "save as" pop right away when posted)"...anyway i tried posting it online yet it didnt work for me..Zen, can you give any tips on any free sites for hosting the transform file? it would really help..

vuluganck said...

Oh I understand your problem, what you have to do and it is the very important step is "host and get the direct link" then paste it in the following code, but you don't understand it so I will make it easy now: You can use some websites such as 110mb.com or hotlinkfiles.com...You have to sign up to get your free account then you will be able to upload the text,js,script files, that's you get the direct link,it is very similar to upload image you know?That's all, if you still in trouble,keep asking me.Thank you for your question.Good day friend!

cybertron said...

you have done an execellent job here by posting such code for photoalbum sort of thing,it would defintly help many of us in our websites and blogs,and can be used for photoalbums,as it resizes automatically the photo..
but the disturbing thing is that where to put the first code;its written after ]]
kindly explain this a little..
so i can try it on my sites then..
keep up the good work

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

 
.