Web Design Forum: jquery background image slider - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

jquery background image slider

#1 User is offline   Terry T 88 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 26
  • Joined: 01-February 12
  • Reputation: 0
  • Gender:Male
  • Location:Essex
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 01 February 2012 - 03:16 PM

Hi guys,

How could I have a slide show going in the background of my website with my navigation bar on top?

I'm trying to do the same as this website http://www.islandtribe.co.za/

Thank you,

Terry
0

#2 User is offline   Wickham 

  • Web Guru
  • View gallery
  • Group: Moderators
  • Posts: 2,876
  • Joined: 11-June 09
  • Reputation: 257
  • Gender:Male
  • Location:Salisbury UK
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 01 February 2012 - 03:25 PM

You have to use position: relative or position: absolute and a z-index for the menu to keep it on top.

Just to be sure I add the above to the slideshow too, with a z-index: -1; to make sure everything else will sit on top including the menu dropdown with a z-index: 5;
0

#3 User is offline   Terry T 88 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 26
  • Joined: 01-February 12
  • Reputation: 0
  • Gender:Male
  • Location:Essex
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 01 February 2012 - 04:14 PM

View PostWickham, on 01 February 2012 - 03:25 PM, said:

You have to use position: relative or position: absolute and a z-index for the menu to keep it on top.

Just to be sure I add the above to the slideshow too, with a z-index: -1; to make sure everything else will sit on top including the menu dropdown with a z-index: 5;


Aaah great thanks for that. I'm just finishing off the design then going to cut it up and code it so will try then and report back :) thanks again.

Terry
0

#4 User is offline   Terry T 88 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 26
  • Joined: 01-February 12
  • Reputation: 0
  • Gender:Male
  • Location:Essex
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 01 February 2012 - 09:59 PM

right so I've tried to use absolute but I can't see how its suppose to work??? could you show me the code please?

Terry
0

#5 User is offline   Terry T 88 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 26
  • Joined: 01-February 12
  • Reputation: 0
  • Gender:Male
  • Location:Essex
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 01 February 2012 - 10:54 PM

right after playing about with it I've managed to do all that but now how do I centre everything? do I have to centre everything with "position" surely there's an easy way.

Terry
0

#6 User is offline   Terry T 88 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 26
  • Joined: 01-February 12
  • Reputation: 0
  • Gender:Male
  • Location:Essex
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 03 February 2012 - 03:29 PM

I'm trying to download a jquery background image slider but I want it to be in my header and not actually a full background of my website. I want to do the same as in this website http://www.islandtribe.co.za/

Thanks, Terry
0

#7 User is offline   nublue 

  • Dedicated Member
  • PipPip
  • Group: Members
  • Posts: 119
  • Joined: 15-November 07
  • Reputation: 5
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 03 February 2012 - 04:45 PM

View PostTerry T 88, on 03 February 2012 - 03:29 PM, said:

I'm trying to download a jquery background image slider but I want it to be in my header and not actually a full background of my website. I want to do the same as in this website http://www.islandtribe.co.za/

Thanks, Terry


Hi Terry,

That is in the header? they have just made it look like it blends into the background but it has really just been overlaid. The background image is here:

http://www.islandtri...1/05/bg_new.png

which repeats down the page. Have you used jquery before? Is there a specific point at which you are getting stuck? Some code samples would help.

This post has been edited by nublue: 03 February 2012 - 04:45 PM

0

#8 User is online   Bomb 

  • Expert
  • PipPipPipPip
  • View gallery
  • Group: Members
  • Posts: 694
  • Joined: 09-October 10
  • Reputation: 88
  • Gender:Male
  • Location:Cheshire, UK
  • Experience:Advanced
  • Area of Expertise:Designer

Posted 03 February 2012 - 06:40 PM

It looks like the site is using this slider on the site, positioned in the header of the page.
0

#9 User is offline   Terry T 88 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 26
  • Joined: 01-February 12
  • Reputation: 0
  • Gender:Male
  • Location:Essex
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 03 February 2012 - 07:44 PM

I've managed to find a slider to use but when I view it in dreamweaver its all out of line but when I preview it on the web its fine, is this normal?

Another quick problem, I've got to div tags 1 on the left and the other on the right but I don't want them to have a height to them because its going into wordpress so their going to expand at different times but with out putting a height to them I can't give them a background?? and solutions??

Thanks.
0

#10 User is online   Bomb 

  • Expert
  • PipPipPipPip
  • View gallery
  • Group: Members
  • Posts: 694
  • Joined: 09-October 10
  • Reputation: 88
  • Gender:Male
  • Location:Cheshire, UK
  • Experience:Advanced
  • Area of Expertise:Designer

Posted 03 February 2012 - 08:21 PM

View PostTerry T 88, on 03 February 2012 - 07:44 PM, said:

I've managed to find a slider to use but when I view it in dreamweaver its all out of line but when I preview it on the web its fine, is this normal?


Yes. Never trust the design view in DreamWeaver, just test in various browsers.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users