SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Cycle Plugin - Auto-pager not working

    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:
    HTML 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:
    HTML Code:
    #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:
    HTML Code:
    <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. #2
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/...-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:
    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:
    HTML Code:
    #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:
    HTML Code:
    <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. #3
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by !designer! View Post
    HTML 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>
    The plugin was likely not working because in your original code you were including the plugin before you included jQuery.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    HTML Code:
    <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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •