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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multiple images in my header slideshow

    Hi People, Newbie to jquery here.

    When my site opens it shows all the header images (7 in total) stacked down the page. It does go to the normal state and slideshow starts after a few seconds, however, it is not something I want visitors to see.

    could someone assist me in resolving this please.

    Many thanks

    Code:
    In the head section
    <script src="Scripts/jquery-1.6.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.cycle.all.js" type="text/javascript"></script>
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    
    in the body
    
    <script type="text/javascript">
    // BeginOAWidget_Instance_2559022: #slideshow
    
       		    slideshowAddCaption=false;
    $(document).ready(function() {
    	$('#slideshow').cycle({
    		after:			slideshowOnCycleAfter, //the function that is triggered after each transition
    		autostop:			false,     // true to end slideshow after X transitions (where X == slide count) 
    		fx:				'fade',// name of transition effect 
    		pause:			false,     // true to enable pause on hover 
    		randomizeEffects:	true,  // valid when multiple effects are used; true to make the effect sequence random 
    		speed:			2000,  // speed of the transition (any valid fx speed value) 
    		sync:			true,     // true if in/out transitions should occur simultaneously 
    		timeout:		5000,  // milliseconds between slide transitions (0 to disable auto advance) 
    		fit:			true,
    		height:		   '200px',
    		width:         '850px'   // container width (if the 'fit' option is true, the slides will be set to this width as well) 
    	});
    }); 
    function slideshowOnCycleAfter() { 
    	if (slideshowAddCaption==true){
    			$('#slideshow-caption').html(this.title); 
    	}
    } 
    		
    // EndOAWidget_Instance_2559022
            </script>
              <div id="slideshow">
                <!--All elements inside this will become slides-->
                <img src="images/page_header1a.jpg" width="850" height="200" title="" /> 
                <img src="images/page_header2a.jpg" width="850" height="200" title="" /> 
                <img src="images/page_header3a.jpg" width="850" height="200" title="" />
                <img src="images/page_header4a.jpg" width="850" height="200" title="" />
                <img src="images/page_header5a.jpg" width="850" height="200" title="" />
                <img src="images/page_header6a.jpg" width="850" height="200" title="" />
                <img src="images/page_header7a.jpg" width="850" height="200" title="" />

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    I would hide (display:none) the div "#slideshow" first and show it just before it becomes a "cycle"
    Code:
    <div id="slideshow" style="display:none;">
    Code:
    $(document).ready(function() {
            $('#slideshow').show();
    	$('#slideshow').cycle({
               ...
            });
    });

  • #3
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thank You

    Many thanks devnull69, that appears to have done the trick.


  •  

    Posting Permissions

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