jQuery Cycle Extras

darren — Thu, 04 Feb 2010 14:39:50 +0000

Yesterday I told you about an excellent Jquery script called Cycle. I’ve been using this recently on a lot of sites – mostly as a header.

It works well as a header slideshow except when you want to put a logo on it – the first idea would be to just put the logo on the actual images – but this requires you to do it on all images, and future images, if you decide to change the images at a later date.

A solution is to overlay the image using a transparent image ……

After the

which adds the images add …

Note: Make sure the logo image file is the same size as the images in the slideshow.

Now style the new class with the following …

.logo {
    height: 175px;
    width: 960px;
    overflow: hidden;
    z-index: 10;
    position: relative;
    top: -175px;
}

Note: Make sure that the height, width and top match the height and the width of the slideshow.

Examples of this …

http://www.graemehowefencing.co.uk/
http://www.svlhire.co.uk/home.html

The Kiermans » header

jQuery Cycle Extras