This example is just to get going. You might wonder how this box opens and closes? Its just a matter of hiding and showing the elements you want to display. The box minimizes itself when you click the x up in the right corner and you can open it up in full width by clicking the number or the wrapped giftbox.
When you click on the text or images in this example it will shift (toggle) between dark and light color.
Its all about using selectors and the eventhandlers.
In this example we look at event propagation. When you click anywhere in this box, independently on the cursor style, the box will toggle between pink and white. The same thing happens when you click on the image, and in addition, the image will toggle between larger and smaller size.
Looking in the code will show you an eventhandler for the image, but any click in the image is also a click in the box which has its own eventhandler, the event is propagated up through the chain of eventhandlers. This behaviour can be stopped by using the method
Lets create a color palette from this image. Choose each color you think should be in there and add it to the palette, click the color to remove it.
Here are a couple of buttons which will resize the image when you press them. The current image size is also visible.
Basic animations can make your page look a bit more lively by dynamically change its look. One ood idea is to make movements a bit smoother. You can toggle the image visibility by fadeing it in or out. You can also slide the image visibility by sliding it in or out.
A lightbox is often used to display a larger version of an image without reloading the page. Click the image to try out my lightbox.
An example gallery of flowers.
An image gallery may look in many ways but it usually acts as a container for a bunch om images and allows for the user to easily traverse and look at the images.
A slideshow is commonly used at the first page on many websites to display a set of images and change the image being displayed with a timed interval or by clicking it.
An animated header background.
This plugin slides the image up and down when clicked.