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
    Oct 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    background slideshow starts late

    hello,

    i got a really simple code on my site which makes an array of images and switches between them to make a background slideshow.

    this is how it looks:
    http://lrevital.com/

    the problem is that the first image isnt shown from some reason, which makes the background blank for aprox. 6 seconds (the time it takes an image to to trun on the opacity and turn it off again)

    this is the code:
    Code:
    $('.royalSlider').data('royalSlider').st.imageScaleMode = "fill";
    // get slider instance
    var slider = $('#gallery-1').data('royalSlider');
    slider.ev.on('rsEnterFullscreen', function() {
    // change scale mode
    slider.st.imageScaleMode = "fit";
    
    // force updating size by adding "true" to updateSliderSize method
    slider.updateSliderSize(true);
    
    });
    </script>
    <script>
    $('#gallery').royalSlider({
        thumbs: {
            orientation: 'vertical',
            columns: 2
        },
    });
    this is the css tag the the js affects:

    Code:
    #mast-head {
    
            -webkit-background-size: cover; 
    		        -moz-background-size: cover; 
            -o-background-size: cover;
    		background-image:img/website-06.png;
    	 position: absolute;
    	 z-index: -1;
    	background-size: cover;
    	background-position:no-repeat center center fixed;
    	margin-top:-70px;
    
       left:0;
       right:0;
       
       max-height: 100%;
        max-width: 100%;
     
     
      height: 100% !important;
      width: auto !important;
      display: block;
    }

    and its not a problem with the image itself, i tried to switch between them and it never shows the first image in the array.

    i hope i explained myself well.. thanks!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,029
    Thanks
    23
    Thanked 588 Times in 587 Posts
    $('#gallery').royalSlider({
    thumbs: {
    orientation: 'vertical',
    columns: 2
    },
    });
    remove that(?) A guess because I can't find this on the page.
    Evolution - The non-random survival of random variants.

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    ok so I looked at the page you linked. You have 2 versions of jQuery linked to the page, and I didnt see your code so Im guessing it is in scripts.js.css? probabaly because of this, looks like you renamed your script file to a .css file and linked it as a stylesheet. fix that stuff and maybe we can help lol.


    Code:
    <!--<script src="libs/scripts.js"></script>-->
    <link href="libs/scripts.js.css" rel="stylesheet" type="text/css">


  •  

    Posting Permissions

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