iStu | Home Page

2011-01-29

In the beginning

A minimalist website in which I will be placing random web demonstrations using CSS/javascript/jQuery, many of which will be free to download for personal use.

Page
01
02

2011-02-17

#12 jQuery Slideshow for variable sized images

A basic slideshow that can handle images of various sizes and adjust the viewing window to suit. A caption for each image is also possible using the 'alt' attribute for each image.

The speed of slide can be set-up but the jQuery handles all the rest of the 'variables' and can adjust to any size and any number of images.

#12 DOWNLOAD

2011-02-12

#11 jQuery Carousel with Bounce

A simple carousel of images that can be set up with a minimum of variables.

The classname of the carousel <ul>, the number of images displayed, the gap between the images and the speed of transition.

The jQuery will workout the rest of the parameters and adjust the number of images to be rotated (if the total number is less than twice the displayed number) so that there are no blank spaces displayed.

#11 DOWNLOAD

2011-02-11

#10 jQuery Accordian Menu with Bounce

A single level accordian menu with 'bounce' using the jQuery easing plug-in.

Uses a simple two line jQuery routine and CSS3 style enhancements for non-IE browsers.

VIEW IN NEW WINDOW

#10 DOWNLOAD

2011-02-06

#9 jQuery Rotating Images

Continuing the gallery demos with a rotating set of image links.

This one uses a modified 'Tag Cloud' script adapted to work with images.

VIEW DEMO

#9 DOWNLOAD

2011-02-05

#8 jQuery Stacked Gallery with fade-in animation

A stack of images that will animate forwards when clicked. The top image will enlarge then fade out and become the last image in the stack so that it will continually cycles through the images.

The stylesheet is just two lines and the animation part of the javascript is just five lines. The remainder of the javascript is just setting up the 'variables'.

Tested in IE7, IE8, IE9, Firefox, Opera, Safari and Chrome.

#8 DOWNLOAD

2011-02-03

#7 CSS Image Enlarger that works on the iPhone etc..

If you have every produced a website for the iPhone, iPad and iPod Touch you will have come across the :hover problem in the Safari Mobile browser for these devices.

Hovering a link cannot be done on these devices as they use 'screen taps' to navigate. So tapping a link that has a hover state will activate the hover (as long as the link does not have a url which will open another page). But you cannot then tap elsewhere to cancel the hover, so the hover state persists until another link is tapped.

So in the above 'hover to enlarge' demo, the image can be tapped and it will expand to full size and normally it will stay full sized on these devices. So to overcome this problem I have coded and styled a 'close icon' which will only appear (in the top left corner of the image) when using these mobile devices and tapping this 'close icon' will shrink the image back to its original size. This will take a second or two to activate the close because of the other javascript demos on this page.

#7 DOWNLOAD

2011-02-02