Jump to content

Fade In Slider Trouble


colinh_7
 Share

Recommended Posts

Hello,

 

I recently used this code that I got from a working fade in slider on the internet. The only thing I've changed are the images, the rest has stayed the same. When I load up the site in Safari it doesn't slide or fade, it just shows one image the entire time. What am I doing wrong?

 

Heres the code I used from the internet

 

HTML

<div class="fadein">    <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg">    <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg">    <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg">    <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg">    <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg"></div>

CSS

.fadein {    position:relative;    height:320px;    width:320px;}.fadein img {    position:absolute;    left:0;    top:0;}

JS

$('.fadein img:gt(0)').hide();setInterval(function () {    $('.fadein :first-child').fadeOut()                             .next('img')                             .fadeIn()                             .end()                             .appendTo('.fadein');}, 4000); // 4 seconds
Link to comment
Share on other sites

@justsomeguy,

 

I'm not sure how to check my browser's error console. I'm pretty new to web design. and No, I'm pretty positive there is no jQuery, the rest of the code is pretty much just divs

 

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="home.css"><script>$('.fadein img:gt(0)').hide();setInterval(function () {    $('.fadein :first-child').fadeOut()                             .next('img')                             .fadeIn()                             .end()                             .appendTo('.fadein');}, 4000); // 4 seconds</script></head><body><div id="container"><div id="topBar"><div id="navOne"><a href="" style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #FFF; font-weight:100; margin:130px;">DESIGNS</a><a href="" style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #FFF; font-weight:100; margin:20px;">GALLERY</a></div><div id="logo"><img src="../Images/Haube_White.png" width="356" height="154" /></div><div id="navTwo"><a href="" style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #FFF; font-weight:100; margin-left:90px;">ABOUT</a><a href="" style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #FFF; font-weight:100; margin-left:145px;">CONTACT</a></div></div><div id="content"><div id="contentTop"><div class="fadein">    <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg">    <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg">    <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg">    <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg">    <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg"></div><div id="contentbottomOne"></div><div id="contentbottomTwo"></div></div><div id="footer"><img src="../Images/facebook.png" width="30px" height="30px" style="float:left;margin-left:10px;"/><img src="../Images/pinterest.png" width="30px" height="30px" style="float:left;margin-left:10px;" /><img src="../Images/houzz.png" width="30px" height="30px" style="float:left;margin-left:10px;" /></div></body></html>

CSS

@charset "UTF-8";/* CSS Document */body{	margin-top:0px;	margin-bottom:0px;	margin-left:0px;	margin-right:0px;	}#container {	width:1400px;	height:900px;	margin:0 auto;	background-image: url(../Images/background_image.jpg);}#topBar {	width:1400px;	height:180px;	margin:0 auto;}#navOne {	width:521px;	height:17px;		display:inline-block;	margin-right:0px;	font-family: Arial, Helvetica, sans-serif;	letter-spacing: 3px;	font-size: 14px;	margin-left:0px;}#navTwo {	width:521px;	height:20px;	display:inline-block;	margin:0px;	font-family: Arial, Helvetica, sans-serif;	letter-spacing: 3px;	font-size: 14px;	margin-left:0px;}#logo {	width:350px;	height:150px;	display:inline-block;	margin-left:0px;	padding-top:30px;	}#content {	width:1140px;	height:563px;	margin-left: auto;	margin-right: auto;	margin-top:50px;	}#contentTop {	width:1140px;	height:400px;	background-color: #0F0;	margin-left: auto;	margin-right: auto;	margin-top:40px;	}.fadein {    position:relative;    height:320px;    width:320px;}.fadein img {    position:absolute;    left:0;    top:0;}#contentbottomOne {	width:562px;	height:150px;	background-color: #0F0;	margin-top:15px;	display:inline-block;	}#contentbottomTwo {	width:562px;	height:150px;	background-color: #0F0;	display:inline-block;	margin-left: 12px;	margin-top:15px;	}#footer {	width:130px;	height:30px;	margin-left: auto;	margin-right: auto;	margin-top:38px;		}
Link to comment
Share on other sites

That will be the problem then, you're trying to use jQuery without including it first. There are links in my signature for browser developer tools. Depending on the browser you're using, F12 might open them. If you check there then you'll see an error message saying something similar to $ is not defined or is not a function, that's because jQuery isn't there to define $. Check the example you're going off, look for <script> tags in the head section that include the jQuery library.

Link to comment
Share on other sites

The second prroblem, is the jquery code will run before the element that it is targeting is rendered.You either have to use $(document).ready(function(){//place your jquery code here});Which will wait for page to be fully rendered, or place script tags with jq within it below targeted elements.

Link to comment
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
 Share

×
×
  • Create New...