Sign in to follow this  
Followers 0
CheckOne

How to transition through a few images?

4 posts in this topic

Hi there everyone. I've done a couple of simple websites for local businesses (All people I know) and one asked me to add a banner at the top. So I created a div and set the banner image as the background. It worked very well. Now though, they just asked me if they could put 4 different banner images up there and have it transition through the images.

Does anyone know if I can do this with html or css?

I've never done anything like that and did a few searches online and found a couple of interesting posts but nothing that I could make work.

So I figured at this point I should ask and see if anyone has done this on here and how best it can be done.

Thanks, :)

Share this post


Link to post
Share on other sites

Looks like you could put something together using CSS and jQuery. I found this code which I imagine you could rework to fit what you were looking for (for example, rather than the continuous scroll like they show in the example, tweak it to switch every x seconds).

Sorry if it's not quite what you're looking for, I've been out of the game for a while now.

Share this post


Link to post
Share on other sites

The Mandigo theme for Wordpress has this feature for the theme header, I use both on my blog! It cycles on page refreshes, and I think it can be timed too :)

I'm not sure if this'll help but here's a snippet. It uses PHP but might be useful nonetheless for you somehow:

// if we didn't find one but the "random headers" option is enabled

if (!$user_header && $mandigo_options['header_random_image']) {

shuffle($user_headers);

$user_header = array_shift($user_headers);

}

Share this post


Link to post
Share on other sites

Thank you both for your help. I'm not using WordPress unfortunately, so I won't be able to use a theme for that.

I will take a look at the example Intrinsica posted to see how that one works. :)

I did find this example here: http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

But as simple as this one sounds, I still can't get it working. On my site the images are showing stacked one below the other (Instead of all in the same place) and they also don't fade. LOL I wasn't sure where to put the jquery file so I placed in in a jquery folder in my website directory and then also in the directory with my css and then also in the directory with the html files. Still no luck. :(

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.