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 1 of 1
  1. #1
    New Coder
    Join Date
    Nov 2011
    Location
    ON, Canada
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Free Slider Module (IE Shim needed)

    Here is a quick little script for a slider. It takes a bit of setup but this way you have no inline code.
    Take note of the title however - an IE shim is needed. This code should work fine on anything except IE9 and earlier.

    To add this into your webpage, simply create a javascript file titled "slider_module.js" and paste the javascript code there.
    Then, add a script tag in your head to point to the js file, and call the animate_slider() function in the body onload.
    Similar to the script tag, add a reference to your styles in the head as well, and add the styles posted here
    Lastly, place the html snippet where you want your slider to appear.

    This slider was built to have arrows to traverse the slideshow. You can find these arrows below, or substitute for your own as long as the dimensions are as they should be (128H x 32W)
    Free Slider Module (IE Shim needed)-triangle-previous32x128.pngFree Slider Module (IE Shim needed)-triangle-next32x128.png


    Make sure your src gets edited....coding forums automatically prefixed my src value with "http://www.codingforums.com/" (seriously codingforums???)
    Code:
            <div id="slider_module">
                <a class="slider_traversal" onclick="previous_image()"><img src="http://www.codingforums.com/images/navigation/triangle-previous32x128.png" alt="button to view previous slideshow image" width="32" height="128" /></a>
                    <!--Add as many images as you want here-->
                    <!--Max dimensions of each image must not exceed 400H x 800W otherwise styles need adjusting-->    
                <a class="slider_traversal" onclick="next_image()"><img src="http://www.codingforums.com/images/navigation/triangle-next32x128.png" alt="button to view next slideshow image" width="32" height="128" /></a>
            </div>
    Code:
    #slider_module>*{
       float: left;
    }
    
    .slider_traversal{
        height: 400px;
        width: 40px;
        background-color: transparent;
        opacity: .5;
    }
    
    .slider_traversal:hover{
        cursor: pointer;
        opacity: 1;
    }
    
    .slider_traversal>img{
        display: block;
        position: relative;
        top: 35%;
        margin-left: auto;
        margin-right: auto; 
    }
    
    .slider_img{
        display: none;
    }
    Code:
    var slide_timer = setInterval(animate_slider, 3000);
    var currPhoto = 3;
    var photo_album;
    
    
    
    function animate_slider(){
        
        photo_album = ((document.getElementById("slider_module")).childNodes);
        photo_album[currPhoto].style.display = "none";
        
        //if reaching end of array, restart slideshow (reset currPhoto to 3, which
        //is the index of the first image
        if(currPhoto === photo_album.length - 4){
            photo_album[(currPhoto=3)].style.display = "block";
        }else{ //otherwise, increment by 2 (skip text nodes)
            photo_album[(currPhoto+=2)].style.display = "block";
        }
    }
    
    
    
    /* 
     * previous_image and next_image are called when the navigation arrows are clicked
     * checks if the last image is currently displayed. If so, currPhoto must be reset to beginning
     * of set, otherwise decrement/increment by 2 in order to skip the irrelevant text nodes in 
     * the collection. Lastly, visibility is adjusted to show current image and timer is reset 
     */
    
    function previous_image(){
        photo_album[currPhoto].style.display = "none";
        currPhoto = currPhoto===3 ? photo_album.length -  4 : currPhoto-2;
        photo_album[currPhoto].style.display = "block";
        clearInterval(slide_timer);
        slide_timer = setInterval(animate_slider, 3000);
    }
    
    function next_image(){
        photo_album[currPhoto].style.display = "none";
        currPhoto = currPhoto===photo_album.length - 4 ? 3 : currPhoto+2;
        photo_album[currPhoto].style.display = "block";
        clearInterval(slide_timer);
        slide_timer = setInterval(animate_slider, 3000);
    }
    Please let me know if there's any issues. My hope is that you can plug it right in with no conflicts

    Apart from the border and shadowing, it should look something like this:
    Free Slider Module (IE Shim needed)-freshest_pizza_evar.jpg
    Last edited by AGENT_P6; 05-05-2014 at 07:43 AM.
    sudo chmod / 000ps!


 

Tags for this Thread

Posting Permissions

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