Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    202
    Thanks
    25
    Thanked 0 Times in 0 Posts

    simple jQuery slideshow - following tutorial not going as planned

    Hi, this tutorial uses jQuery but I didn't see a forum for it, so I posted it here because it uses a bit of javascript too.

    I was looking at this tutorial here trying to get a simple slideshow working:
    http://jonraasch.com/blog/a-simple-jquery-slideshow

    Not sure what I'm doing wrong here. When I F12 in Expression Web to preview the site, it just shows the three pics lined up next to each other and no slideshow. Any suggestions?

    Here is my CSS code:
    Code:
    /* CSS layout */
    #masthead {	height: 57px;
    }
    #top_nav {	height: 56px;
    }
    #slideshow {
        position:relative;
        height:350px;
    }
    
    #slideshow IMG {
        position:absolute;
        top:0;
        left:0;
        z-index:8;
    }
    
    #slideshow IMG.active {
        z-index:10;
    }
    
    #slideshow IMG.last-active {
        z-index:9;
    }
    
    #page_content {
    }
    #footer {
    }
    Here is my HTML code:
    Code:
    <!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <style type="text/css">
    .style1 {
    	border-width: 0px;
    	width: 861px;
    }
    </style>
    <script type="text/javascript">
    function slideSwitch() {
        var $active = $('#slideshow IMG.active');
        var $next = $active.next();    
    
        $next.addClass('active');
    
        $active.removeClass('active');
    }
    
    $(function() {
        setInterval( "slideSwitch()", 5000 );
    });
    function slideSwitch() {
        var $active = $('#slideshow IMG.active');
        var $next = $active.next();
    
        $active.addClass('last-active');
    
        $next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 1000, function() {
                $active.removeClass('active last-active');
            });
    }
    
    $(function() {
        setInterval( "slideSwitch()", 5000 );
    });
    function slideSwitch() {
        var $active = $('#slideshow IMG.active');
    
        if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    
        var $next =  $active.next().length ? $active.next()
            : $('#slideshow IMG:first');
    
        $active.addClass('last-active');
    
        $next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 1000, function() {
                $active.removeClass('active last-active');
            });
    }
    
    $(function() {
        setInterval( "slideSwitch()", 5000 );
    });
    </script>
    </head>
    
    <body style="margin-top: 150px; background-image: url('../images/background.png')">
    
    <table align="center" cellpadding="2" class="style1">
    	<tr>
    		<td colspan="2" style="height: 40px">
    		<img src="../images/LOGO3.png" style="height: 80px; width: 356px" /></td>
    	</tr>
    	<tr>
    		<td style="height: 44px" colspan="2">&nbsp;</td>
    	</tr>
    	<tr>
    		<td style="height: 202px; width: 979px">
    		<div id="slideshow">
        <img src="LEGAL3H.png" alt="" class="active" height="20" width="185" />
        <img src="BOTTOM1VFRONTO.png" alt="" height="20" width="176" />
        <img src="BOTTOM3VFRONTH.png" alt="" height="20" width="176" />
    </div></td>
    		<td style="height: 202px; width: 447px"><marquee direction=up loop=true height="100" scrolldelay=500>
    TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG
    TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG
    TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG TCCG</marquee> </form>
    		</td>
    	</tr>
    	<tr>
    		<td colspan="2" style="height: 63px"></td>
    	</tr>
    	<tr>
    		<td colspan="2">&nbsp;</td>
    	</tr>
    	<tr>
    		<td colspan="2" style="height: 5px"></td>
    	</tr>
    </table>
    
    </body>
    
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by cyborg360 View Post
    Hi, this tutorial uses jQuery but I didn't see a forum for it, so I posted it here because it uses a bit of javascript too.
    Please post in the Javascript Frameworks forum, or ask a mod to move you over.

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Moved in the JavaScript Frameworks sub-Forum
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    This would be much easier to debug if you'd post a link to a live version.
    Are you a Help Vampire?


  •  

    Posting Permissions

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