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 2 of 2

Thread: Image Rotating

  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry Image Rotating

    Hi

    I'M using a free downloaded template that i found, and was exactly what i had in mind. Now adjust everything to my need.

    Part of the template is JQUERY1,6 with bgslider.

    I've got 3 background images, that only rotate when you click on the bottom buttons on the footer of the page. I want to change this so that the images rotate automatically?

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

    Question Rotating background

    OK, I've got the 3 background images to rotate, but something still wrong or missing. The images rotate on top of the page and not as background images and show way to big. Below is the codes I've used.

    HTML CODE (HEADER)

    Infinite Rotating Images Using jQuery (JavaScript)
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1"></script><script type="text/javascript" src="js/infinite-rotator.js"></script>
    </pre>
    <h1>Infinite Rotating Images Using jQuery (JavaScript)</h1>
    <div id="rotating-item-wrapper"><img class="rotating-item" src="images/backgroundimages/bg_img1.jpg" alt="railroad" width="2800" height="1700" />
    <img class="rotating-item" src="images/backgroundimages/bg_img2.jpg" alt="special view" width="2800" height="1700" />
    <img class="rotating-item" src="images/backgroundimages/bg_img3.jpg" alt="lion" width="2800" height="1700" />

    CSS CODE:

    #rotating-item-wrapper {
    position: relative;
    width: 2800px;
    height: 1700px;
    }
    .rotating-item {
    display: none;
    position: absolute;
    top: 0;
    left: 0;

    JAVASCRIPT:

    $(window).load(function() { //start after HTML, images have loaded

    var InfiniteRotator =
    {
    init: function()
    {
    //initial fade-in time (in milliseconds)
    var initialFadeIn = 1000;

    //interval between items (in milliseconds)
    var itemInterval = 5000;

    //cross-fade time (in milliseconds)
    var fadeTime = 2500;

    //count number of items
    var numberOfItems = $('.rotating-item').length;

    //set current item
    var currentItem = 0;

    //show first item
    $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

    //loop through the items
    var infiniteLoop = setInterval(function(){
    $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

    if(currentItem == numberOfItems -1){
    currentItem = 0;
    }else{
    currentItem++;
    }
    $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

    }, itemInterval);
    }
    };
    Ive someone can assist in this it will be appreciated.

    Wessel Britz


  •  

    Posting Permissions

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