Skip to content

Instantly share code, notes, and snippets.

@gingerrific

gingerrific/index.html

Created May 28, 2014 02:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gingerrific/43869e7411453cfe882f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gingerrific/43869e7411453cfe882f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. gingerrific created this gist May 28, 2014.
    18 changes: 18 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    <div class="images-container">
    <div class="image-slider">
    </div>
    </div>

    <div class="button-container">
    <div class="button previous">&lt;&lt;</div>
    <div class="button play">&#9654
    </div>
    <div class="button stop">&#9608</div>
    <div class="button next">&gt;&gt;</div>
    </div>


    <script type="text/template" class="image-frame">
    <div class="image-display"></div>

    </script>
    86 changes: 86 additions & 0 deletions main.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,86 @@
    'use strict';


    var imagesArray = ["https://s3.amazonaws.com/ksr/projects/660047/photo-main.jpg?1397831981", "http://supergiantgames.com/site/wp-content/uploads/Transistor_Wallpaper_1920x1080.jpg", "http://cloud-4.steampowered.com/ugc/615043645846589420/E237625134C7E37487EC553109818982CE3FD0FD/", "http://www.radialgames.com/press/ROCKETSROCKETSROCKETS/images/logo.png", "http://thekoalition.com/images/2013/08/bell.jpg"];



    function imageDisplay (images) {
    if ($.isArray(images) && images !== []){
    // error checks for array type
    var max = images.length
    // sets the display width of the div to accomodate varying width based on array length
    $('.image-slider').css('width',(max*100)+'%');

    images.map(function (x) {
    // appends the contents of the .image-frame div into the dom for each index of the array (could posisbly be split off)
    $('.image-slider').append($('.image-frame').text());
    // the most recent div will have its background-image changed to the formatted array index
    $('.image-display').last().css('background', 'url(' + x + ') center / cover no-repeat');
    })
    }

    else {
    throw new Error("ImageParse requires a non-empty array as argument");
    }
    }


    var i = 0;
    var interval;
    // inter function that calls the animation, but also loops
    function intervalManager () {
    interval = setInterval(function () {
    moveLeft();
    i += 1;

    if (i == 6) {
    // when the counter hits the end of the array (in this case) return to one. need to set to index.length instead of '6'
    // also resets the image slider to the first image
    i=1;
    $('.image-slider').animate({'margin-left': '0px', 'transition': 'none'},10);
    }

    }, 2400);

    }
    // animate the slider moving left the width of an image
    function moveLeft () {
    $('.image-slider').animate({'margin-left': '-=392px'}, 800);
    }

    // 'controls' - allows the slider to be stopped, restarted and advanced
    $('.stop').click(function () {
    $('.image-slider').stop();
    clearInterval(interval);
    })

    $('.play').click(function () {
    imageDisplay(imagesArray);
    intervalManager();
    })

    $('.previous').click(function () {
    clearInterval(interval);
    $('.image-slider').animate({'margin-left': '+=392px'}, 800);
    i -=1;
    if (i == -1) {
    $('.image-slider').stop();
    $('.image-slider').animate({'margin-left': '-=392px'}, 800);
    i = 1;
    }
    intervalManager();
    })

    $('.next').click(function () {
    clearInterval(interval);
    $('.image-slider').animate({'margin-left': '-=392px'}, 800);
    i += 1;
    if (i == 7) {
    $('.image-slider').stop();
    $('.image-slider').animate({'margin-left': '+=392px'}, 800);
    i = 5;
    }
    intervalManager();
    })

    67 changes: 67 additions & 0 deletions main.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,67 @@
    $icon-font-path: "/bower_components/sass-bootstrap/fonts/";

    @import 'sass-bootstrap/lib/bootstrap';

    .images-container {
    margin: 30px auto;
    border: 4px solid gray;
    height: 300px;
    width: 400px;
    overflow: hidden;

    & .image-slider {
    display: inline-block;
    width: 300%;
    transition: all 1s linear;
    margin-left: 392px;
    & .image-display {
    height: 292px;
    width: 392px;
    float: left;
    background-repeat: no-repeat;
    background-size: contain;
    }
    }
    }

    .button-container {
    margin: 0 auto;
    width: 632px;
    }

    .button {
    margin-top: 60px;
    width: 150px;
    height: 75px;
    background-color: rgb(149, 149, 165);
    border-radius: 8px;
    display: inline-block;
    margin-right: 5px;
    text-align: center;
    line-height: 55px;
    font-weight: bolder;
    color: rgb(232, 30, 30);
    text-shadow: 0px 1px 1px rgb(223, 23, 23);
    font-size: 20px;
    letter-spacing: -.1em;
    box-shadow: inset 0px -12px 0px rgb(130, 130, 147),
    2px 2px 1px rgb(111, 111, 126);
    transition: all .2s ease;
    padding:.4em;
    vertical-align: bottom;
    cursor: default;
    }

    .button:hover {
    height:70px;
    margin-top: 65px;
    box-shadow: inset 0px -8px 0px rgb(130, 130, 147),
    2px 2px 1px rgb(111, 111, 126);
    }

    .button:active {
    height: 65px;
    margin-top: 70px;
    box-shadow: inset 0px -4px 0px rgb(130, 130, 147),
    2px 2px 1px rgb(111, 111, 126);
    }