PDA

View Full Version : JQUERY PROBLEM causing big headache


Kuler
10-10-2011, 08:05 PM
I have been unable to make a "simple" Jquery Cycle Slideshow work - despite numerous attempts.

I'm using http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle but all I ever get are the images in a vertical column and not working as a slider or just a single image showing.

I'd be very grateful if someone could tell me what I'm doing wrong.


The css & html is below with the js available from the link.

Thanks for any advice.

Paul

css

body, h1, ul, li {
margin: 0; padding: 0; border: 0;
}

body {
background: #e8dbcb;
}

#container {
width:980px;
height:auto;
margin:25px auto;
position: relative;
}

h1 {
width: 262px; height: 226px; margin: 0 auto; position: relative; top: 100px;
text-indent: -9999px; z-index: 10;
}

div#slideshow {
width: 958px; height: 450px; padding: 15px 0 0 12px;
background: url(images/border.png);
overflow: scroll; /* Allows the slides to be viewed using scrollbar if Javascript isn't available */
position: relative; z-index: 5;
}
div#slideshow ul#nav {
display: none;
list-style: none;
position: relative; top: 210px; z-index: 15;
}
div#slideshow ul#nav li#prev {
float: left; margin: 0 0 0 40px;
}
div#slideshow ul#nav li#next {
float: right; margin: 0 50px 0 0;
}
div#slideshow ul#nav li a {
display: block; width: 80px; height: 80px; text-indent: -9999px;
}
div#slideshow ul#nav li#prev a {
background: url(images/prev.png);
}
div#slideshow ul#nav li#next a {
background: url(images/next.png);
}

div#slideshow ul#slides {
list-style: none;
}
div#slideshow ul#slides li {
margin: 0 0 20px 0;
}

a {outline: none; }

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" src="JQUERYjs/jquery.cycle.all.js"></script>
<script type="text/javascript" src="JQUERYjs/jquery.js"></script>
<script type="text/javascript" src="JQUERYjs/scripts.js"></script>
<link href="CSS/HARLEY.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="container">

<div id="slideshow">
<ul id="slides">
<li><img src="11.jpg" alt="WEDDING" width="960" height="450" /> </li>
<li><img src="22A.jpg" alt="WEDDING" width="960" height="450" /> </li>
<li><img src="44.jpg" alt="WEDDING" width="960" height="450" /> </li>
<li><img src="77.jpg" alt="WEDDING" width="960" height="450" /> </li>
<li><img src="33A.jpg" alt="WEDDING" width="960" height="450" /> </li>
</ul>
</div>

</div>
</div>
</body>
</html>

domedia
10-11-2011, 03:04 AM
Put it up somewhere on the web. You have the files already ;-)

Kuler
10-11-2011, 09:26 AM
I had to swap these two lines around to make things work ..... finally.
<script type="text/javascript" src="JQUERYjs/jquery.cycle.all.js"></script>
<script type="text/javascript" src="JQUERYjs/jquery.js"></script>Paul

gentleone
10-11-2011, 12:50 PM
I had to swap these two lines around to make things work ..... finally.
<script type="text/javascript" src="JQUERYjs/jquery.cycle.all.js"></script>
<script type="text/javascript" src="JQUERYjs/jquery.js"></script>Paul
That's weird... everybody (even jQuery) says to load first the library and then plugins otherwise it won't work :confused: