Let's start by describing how I've recently changed polilang's main page using CrossFade - JavaScript that allows you to create slide-shows with any HTML content. In this part you will learn how to put it onto your website and how to easily change transition effect (from scrolling to fading). In the next part I'll explain some bits that I've added to this awesome script and point you to modified version (if you can't wait - it's here).
Oh yes. I assume you know HTML and CSS. You really don't need any JavaScript knowledge as this is the simplest bit.
Oh yes. I assume you know HTML and CSS. You really don't need any JavaScript knowledge as this is the simplest bit.
The slide-show story so far
This boring story starts 303BC just before first computer (all you ignorants - first computer was created in 302BC and it was made from stone and copper). Then ranting goes on and on about HTML & CSS standards (or rather their non-existence since 90s). And then we're where we should - the essence. Wasn't that bad, was it? :)
So. The essence.
First version of polilang's main page consisted of slide-show based upon very intriguing JS script called - guess! - "slideshow". It's basic principle was that you specify JS array with content that should be displayed by script and voilà - kaboom jesus whyyy gimme hammer cut the red wire noooooo - it should work. Yes, it required quite a lot of slashing'n'hacking (or even hacking'n'slashing!) to make it work with most of the browsers (IE6 required even more work that is - obviously). Anyway, it was good script for a first take onto "slide-show" topic. If you are interested - take a look. Also - there are few more "Gerry's scripts" on this page.
But then (just few days later) I've discovered prototype and scriptaculous. And I started using them to create some effects. And I found them simple, easy to use. And I felt that existing slide-show is not enough. And months passed. And finally, a miracle has happened: I've found time to make this happen. Here's the story how this has happened.
Making CrossFade work
First of all, you need to download it: either from original source or my modified version. Grab it, put it into directory where your PHP/ASP/Ruby/HTML can see it and let's start.
Create HTML structure
Add CSSCreate HTML structure
- Add DIV element with identifier slideShow:
<div id="slideShow">
</div> - Add child DIV element that will contain slide show content, let it have identifier slideShowContent:
<div id="slideShow">
<div id="slideShowContent">
</div>
</div> - Add list of slides (with id slideShowCrossFade). Each slide can contain any HTML content - image, link, text, another list:
<div id="slideShow">
<div id="slideShowContent">
<ul id="slideShowCrossFade">
<li>
<img src="/img/slideshow/image01.jpg" width="300" height="240" alt="Photo no. 1"/>
</li>
<li>
<a href="/img/slideshow/image02.jpg"><img src="/img/slideshow/thumb02.jpg" width="300" height="240" alt="Thumbnail of photo no. 2"/></a>
</li>
<li>
<span>Some random content. Really!</span>
</li>
</ul>
</div>
</div>
Now you need some CSS to do its magic - there are few important bits:
- Configure CrossFade transition type - you can do that by simply setting CSS class of slideShowCrossFade list to one of the following:
- transition-switch - very simple effect, hiding current slide and showing next one
- transition-crossfade - fades in current slide and fades out next one simultaneously
- transition-fadeoutfadein - fades in current slide and when fading in is finished, fades out next one
- transition-fadeoutresizefadein - fades in current slide with image and then (after fading in is done) fades out next slide with image + resizes the list element to next image size. Honestly, I've never used this one on my site, so experiment yourself!
- transition-slide-horizontal - scroll transition, provided with CrossFade v4.2 BETA. It scrolls next slide onto the current one. I didn't like this transition that much so I've added...
- transition-smooth-horizontal - scroll transition, available only with my version of CrossFade. It provides "smooth scroll" effect where current and next slide is scrolled simultaneously in the same direction. You can see this effect in action on polilang's main page.
<div id="slideShow">
<div id="slideShowContent">
<ul id="slideShowCrossFade" class="transition-fadeoutfadein">
<li class="slide">
<img src="/img/slideshow/image01.jpg" width="300" height="240" alt="Photo no. 1"/>
</li>
<li class="slide">
<a href="/img/slideshow/image02.jpg"><img src="/img/slideshow/thumb02.jpg" width="300" height="240" alt="Thumbnail of photo no. 2"/></a>
</li>
<li class="slide">
<span>Some random content. Really!</span>
</li>
</ul>
</div>
</div> - Configure each slide - you need each slide to appear in the same place of the parent element, so naturally you require absolute positioning. Define CSS class for each of the list items as slide (see previous HTML snippet) and add following bit to your CSS file (or wherever you are defining CSS rules):
li.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
} - Configure list. You probably would like the list to have no style, so let's set it:
ul#slideShowCrossFade {
width: 100%;
height: 100%;
list-style: none;
} - It is good idea to define boundaries of the slide-show (makes life easier that is). In most cases you will deal with images/content with the same maximum dimensions, so you can set slide-show and its content DIV CSS rules to e.g.:
#slideShow {
width: 320px;
height: 260px;
padding: 10px;
}
#slideShowContent {
width: 300px;
height: 240px;
}
JavaScript
Actually not much is required here. It's much simpler then previous parts - just:
Actually not much is required here. It's much simpler then previous parts - just:
- Include CrossFade script (change src to your specific one!):
<script type="text/javascript" src="/crossfade.js"></script> - Create CrossFade JS object, after HTML content:
<div id="slideShow">The bits in { } brackets are CrossFade options, you can find them all explained in detail on CrossFade website. Here I'll quickly tell you that:
<div id="slideShowContent">
<ul id="slideShowCrossFade" class="transition-fadeoutfadein">
<li class="slide">
<img src="/img/slideshow/image01.jpg" width="300" height="240" alt="Photo no. 1"/>
</li>
<li class="slide">
<a href="/img/slideshow/image02.jpg"><img src="/img/slideshow/thumb02.jpg" width="300" height="240" alt="Thumbnail of photo no. 2"/></a>
</li>
<li class="slide">
<span>Some random content. Really!</span>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
<!--
var cf = new Crossfade('slideShowCrossFade', {autoStart: true, interval: 5, duration: 1});
-->
</script>- autoStart starts slide-show automatically when page is loaded,
- interval defines how long the slide will be displayed,
- duration specifies duration of transition effect.
Conclusions
After this little read you should be able to setup CrossFade to run properly on your web page. You will see that it is simpler then it seems judging from length of this blog entry :)Anyway, I hope somebody will find this tutorial a bit helpful. I look forward to any feedback. In the meantime I will try to prepare next part of this tutorial - mostly about CrossFade controls. See you then!
