SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery slideshow problems on home page.

    jQuery slideshow problems on home page.

    Hi all

    I have an example here to illustrate my problem.

    [SOLVED/]

    It's a wordpress site but I'm sure the problem is with my javascript (and wordpress people are never any help)

    It's just one page that has a slideshow using the jQueury cycle plugin - http://jquery.malsup.com/cycle/

    My problem is when the page first loads only part of the slideshow is visible. If you scroll left/right near the 'Home'
    button you can see the rest of the slideshow.

    If you then click 'Home' the same page loads but the full slideshow is visible.

    Why is the slideshow not loading correctly when the page loads.


    Code:
    <!DOCTYPE html>
    <html dir="ltr" lang="en-US">
    <head>
      <meta charset="UTF-8" />
      
      <meta name="robots" content="noindex,nofollow">
    
      <title></title>
      
      <link rel="profile" href="http://gmpg.org./xfn/11" />
      <link rel="stylesheet" type="text/css" href="http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/themes/cars/style.css" />
      <link rel="pingback" href="http://www.ttmt.org.uk/forum/wordpress-forum/xmlrpc.php" />
      
      <link rel="alternate" type="application/rss+xml" title="forum &raquo; Home Comments Feed" href="http://www.ttmt.org.uk/forum/wordpress-forum/?feed=rss2&page_id=5" />
    <link rel='stylesheet' id='admin-bar-css'  href='http://www.ttmt.org.uk/forum/wordpress-forum/wp-includes/css/admin-bar.css?ver=3.4' type='text/css' media='all' />
    <link rel='stylesheet' id='NextGEN-css'  href='http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/plugins/nextgen-gallery/css/nggallery.css?ver=1.0.0' type='text/css' media='screen' />
    <link rel='stylesheet' id='shutter-css'  href='http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.css?ver=1.3.4' type='text/css' media='screen' />
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2'></script>
    <script type='text/javascript'>
    /* <![CDATA[ */
    var shutterSettings = {"msgLoading":"L O A D I N G","msgClose":"Click to Close","imageCount":"1"};
    /* ]]> */
    </script>
    <script type='text/javascript' src='http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.js?ver=1.3.3'></script>
    <script type='text/javascript' src='http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/plugins/nextgen-gallery/js/jquery.cycle.all.min.js?ver=2.9995'></script>
    <script type='text/javascript' src='http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/plugins/nextgen-gallery/js/ngg.slideshow.min.js?ver=1.06'></script>
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.ttmt.org.uk/forum/wordpress-forum/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.ttmt.org.uk/forum/wordpress-forum/wp-includes/wlwmanifest.xml" /> 
    <meta name="generator" content="WordPress 3.4" />
    <link rel='canonical' href='http://www.ttmt.org.uk/forum/wordpress-forum/' />
    <!-- <meta name="NextGEN" version="1.9.5" /> -->
    <style type="text/css" media="print">#wpadminbar { display:none; }</style>
    <style type="text/css" media="screen">
    	html { margin-top: 28px !important; }
    	* html body { margin-top: 28px !important; }
    </style>
      
      <!-- include Cycle plugin -->
      <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>	
    
    </head>
    <body>
      
      <div id="wrap">
          
        <div id="header">
          
        </div><!-- #header -->
        
      <div id="leftCol">
        <div id="logoDiv">
          
          
        </div><!-- #logoDiv -->
        
        <ul id="nav">
          <li class="page_item page-item-5 current_page_item"><a href="http://www.ttmt.org.uk/forum/wordpress-forum/">Home</a></li>
        </ul>
      </div><!-- #leftCol -->
    
    
      <div id="rightCol">    
                
              
        <div id="homeSlides">
          <div id="slideshow">
          
            <p><img class="ngg-singlepic ngg-none" src="http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/gallery/trucks/17.jpg" alt="17" /></p>
    <p><img class="ngg-singlepic ngg-none" src="http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/gallery/trucks/18.jpg" alt="18" /></p>
    <p><img class="ngg-singlepic ngg-none" src="http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/gallery/trucks/19.jpg" alt="19" /></p>
          
          </div><!-- #slideshow -->  
        </div><!-- #homeSldies -->  
              
          
        
      </div><!-- #rightCol -->
    
      <script type="text/javascript">
    
        //$(function($) {
        
        jQuery(document).ready(function($){
    
          //$('#slideshow').css('max-height','553px');
          
          $('#slideshow').cycle({
            fx: 'fade',
            speed: 800,
            timeout: 3000
    
          });
    
        });
        
      </script>	  
    
      
    </body>
    </html>
    
    <script type='text/javascript' src='http://www.ttmt.org.uk/forum/wordpress-forum/wp-includes/js/admin-bar.js?ver=3.4'></script>
    	<script type="text/javascript">
    		(function() {
    			var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');
    
    			request = true;
    
    			b[c] = b[c].replace( rcs, '' );
    			b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
    		}());
    	</script>
    Last edited by Mittineague; Aug 3, 2012 at 11:58.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    What browser is this occurring in as it works perfectly for me.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I should have updated - I got it sorted.


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
  •