jQuery Cycle Plugin - Auto-pager not working

JavaScript
1

I am trying to make the jQuery Cycle Plugin - Auto-pager work, but it hasn’t worked for me. The first image displays, but it just will not change and display the pagnition. Can someone please help me with this? Thanks in advance.

Here is my jQuery code:

<script type="text/javascript" src="src/jquery.cycle.all.js"></script>
<script type="text/javascript" src="src/chili-1.7.pack.js"></script>
<script type="text/javascript" src="src/jquery.min.js"></script>
<script type="text/javascript" src="src/jquery.easing.1.3.js"></script>
<script type="text/javascript">
jQuery(function($){
    $('#slideshow').before('<div id="nav" class="nav">').cycle({
        fx:     'scrollLeft',
        speed:  'fast',
        timeout: 3000,
        pager:  '#nav',
        before: function() { if (window.console) console.log(this.src); }
    });
});
</script>

Here is my css:

#slideshow {
	margin: 0 auto;
}

#slideshow img {
	display: none;
}

#slideshow img.first {
	display: block;
}

#nav {
	text-align: left;
}

#nav li { width: 25px; float: left; margin: 8px; list-style: none; }

#nav a {
	border: 1px solid #000;
	background: #FFF;
	text-decoration: none;
	margin: 0 5px;
	padding: 3px 5px;
	display: block;
}

#nav a.activeSlide {
	background: #ea0;
}

#nav a:focus {
	outline: none;
}

.nav {
	margin: 5px 0;
}

.pics { height: 333px; width: 900px; padding:0; margin:0; overflow: hidden; }

.pics img { height: 333px; width: 900px; padding: 15px; top:0; left:0; }

Here is my html:

<div id="slideshow" class="pics">		
		<img alt="" height="333" src="images/img1.jpg" width="900" class="first" />
		<img alt="" height="333" src="images/img2.jpg" width="900" />
		<img alt="" height="333" src="images/img3.jpg" width="900" />
	</div>
2

I have decided to find a better tutorial, than the website where I originally found the idea. Anyway I have changed the way it functions. The actual image cycle works, now I can’t get the navigation to display and work. The website where I found the tutorial is here: http://www.codingcereal.com/2011/03/simple-slideshow-using-jquery-cycle/. I am needing a solution to this problem soon please, so can someone please have a look at my new image cycle and tell me how I can solve it?

Here is my new jquery code:

<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.cycle.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
            if (jQuery('#cycleimages').length > 0) {
                jQuery('#cycleimages').cycle({ 
                    fx: 'scrollHorz',
                    speed: 750,
                    timeout: 4000, 
                    randomizeEffects: false, 
                    easing: 'easeOutCubic',
                    next:   '.cyclenext', 
                    prev:   '.cycleprev',
                    pager:  '#cyclewrapnav',
                    cleartypeNoBg: true
            });
       }
});
</script>

Here is my css:

#cyclewrap {
	overflow: hidden;
	width:900px;
	position:relative;
}

#cycleimages {
	overflow: hidden;
	position: relative;
}

#cycleimages img {
	display: none;
}

#cycleimages img.first {
	display: block;
}

#cyclewrap .cycleprev, #cyclewrap .cyclenext {
	display:block;
	width:32px;
	height:32px;
	top:150px;
	z-index:9999;
	text-decoration:none;
	position:absolute;
}

#cyclewrap .cycleprev {
	left:0;
	background:url('images/img-prev.png') no-repeat top left;
}

#cyclewrap .cyclenext {
	right:0;
	background:url('images/img-next.png') no-repeat top left;
}

#cyclewrapnav {
	position:absolute;
	bottom:0;
	z-index:9999;
}

#cyclewrapnav a { 
	background:transparent url('images/pagenav.png') no-repeat 0 0;
	float:left;
	height:15px;
	overflow:hidden;
	text-decoration:none;
	text-indent:-1234px;
	width:48px;
}

#cyclewrapnav a.activeSlide {
	background-position:-32px 0;
}

Here is my html:

<div id="cyclewrap">
		<div id="cycleimages">
			<img alt="" height="333" src="images/img1.jpg" width="900" class="first" />
			<img alt="" height="333" src="images/img2.jpg" width="900" />
			<img alt="" height="333" src="images/img3.jpg" width="900" />
		</div>
	</div>
	<div class="cycleprev"><a href="#">&nbsp;</a></div>
    <div class="cyclenext"><a href="#">&nbsp;</a></div>
    <div id="cyclewrapnav">&nbsp;</div>
3

The plugin was likely not working because in your original code you were including the plugin before you included jQuery.

4

Thanks for your help AussieJohn. With all the messing around with the image cycle, I decided to go with the second image cycle tutorial, and have just worked out that I was suppose to place the cyclewrap div below the nav. Here is an example of what I talking about:

<div id="cyclewrap">
		<div id="cycleimages">
			<img alt="" height="333" src="images/img1.jpg" width="900" class="first" />
			<img alt="" height="333" src="images/img2.jpg" width="900" />
			<img alt="" height="333" src="images/img3.jpg" width="900" />
		</div>
	<div class="cycleprev"><a href="#">&nbsp;</a></div>
    <div class="cyclenext"><a href="#">&nbsp;</a></div>
    <div id="cyclewrapnav">&nbsp;</div>
	</div>
		</div>

It is working now.