Results 1 to 2 of 2

Thread: How do you make a horizontal scrolling photo gallery in Javascript?

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    4,959

    How do you make a horizontal scrolling photo gallery in Javascript?

    I have already created the UI for this project. See attached screenshot. The gallery will contain 6 images at a time. I still need to insert a right/left arrow icons for scrolling. So each time an arrow is clicked, I want the gallery to scroll 6 new images. I already have javascript code that loads an entire form with images from the file system. So I'm assuming just to show 6 images at a time an array would be needed or some kind of container object. My problem is I'm just not sure how to create that scrolling effect in the way that I've described. Please help!

    Thanks,
    Attached Images Attached Images  
    Blake

  2. #2

    Re: How do you make a horizontal scrolling photo gallery in Javascript?

    Hello,

    This code can working try it...

    HTML

    Code:
    <span class='arrow-left'>left</span>
    <span class='arrow-right'>right</span>
    <div class='row offer-pg-cont'>
        <div class='offer-pg'>
            <div class="col-md-3 portfolio-item">
                <img src="images/a1.png" class="items" height="100" alt="" />
            </div>
            <div class="col-md-3 portfolio-item">
                <img src="images/a1.png" class="items" height="100" alt="" />
            </div>
            <div class="col-md-3 portfolio-item">
                <img src="images/a1.png" class="items" height="100" alt="" />
            </div>
            <div class="col-md-3 portfolio-item">
                <img src="images/a1.png" class="items" height="100" alt="" />
            </div>
            <div class="col-md-3 portfolio-item">
                <img src="images/a1.png" class="items" height="100" alt="" />
            </div>
            <div class="col-md-3 portfolio-item">
                <img src="images/a1.png" class="items" height="100" alt="" />
            </div>
            <div class="col-md-3 portfolio-item">
                <img src="images/a1.png" class="items" height="100" alt="" />
            </div>
            <div class="col-md-3 portfolio-item">
                <img src="images/a1.png" class="items" height="100" alt="" />
            </div>
            <div class="col-md-3 portfolio-item">
                <img src="images/a1.png" class="items" height="100" alt="" />
            </div>
            <div class="col-md-3 portfolio-item">
                <img src="images/a1.png" class="items" height="100" alt="" />
            </div>
        </div>
    </div>
    JS

    Code:
        $(document).ready(function() {
    
            //cache our items and containers
            var items = $(".portfolio-item");
            var scrollContainer = $(".offer-pg-cont");
    
    
            function fetchItem(container, items, isNext) {
                var i,
                    scrollLeft = container.scrollLeft();
    
                //set isNext default to true if not set
                if (isNext === undefined) {
                    isNext = true;
                }
    
                if (isNext && container[0].scrollWidth - container.scrollLeft() <= container.outerWidth()) {
                    //we reached the last one so return the first one for looping:
                    return $(items[0]);
                }
    
                //loop through items
                for (i = 0; i < items.length; i++) {
    
                    if (isNext && $(items[i]).position().left > 0) {
                        //this item is our next item as it's the first one with non-negative "left" position
                        return $(items[i]);
                    } else if (!isNext && $(items[i]).position().left >= 0) {
                        //this is our previous item as it's the one with the smallest negative "left" position
                        //if we're at item 0 just return the last item instead for looping
                        return i == 0 ? $(items[items.length - 1]) : $(items[i-1]);
                    }
                }
    
                //nothing found
                return null;
            }
    
            /**
             * Moves the scrollcontainer to the next/previous item (depending on event.data.direction).
             *
             * @param event
             */
            function moveToItem(event) {
                //fetch the next/previous item:
                var isNext = event.data.direction == "next";
                var item = isNext ? fetchItem(scrollContainer, items, true) : fetchItem(scrollContainer, items, false);
    
                if (item) {
                    //scroll to item
                    scrollContainer.animate({"scrollLeft": item.position().left + scrollContainer.scrollLeft()}, 400);
                }
            }
    
            //bind events
            $(".arrow-left").click({direction: "prev"}, moveToItem);
            $(".arrow-right").click({direction: "next"}, moveToItem);
    
    
        });
    CSS

    Code:
    .offer-pg-cont{
        width: 100%;
        overflow-x: auto;
        margin: 0px;
    }
    span.arrow-left,span.arrow-right{
        display: block;
        position: absolute;
        background-color: #555;
        top: 40px;
        color:white;
        z-index: 2;
        cursor: pointer;
    }
    span.arrow-left{
        left: 0px;
    }
    span.arrow-right{
        right: 0px;
    }
    span.arrow-left:hover,.offer-pg span.arrow-right:hover{
        background-color: #333;
    }
    .offer-pg{
        width: 1500px;
    }
    .item-wrapper.offer-con{
        background-color: #333 !important;
    }
    .offer-con .left-item h4 {
        color: #fff;
        font-weight: normal;
        margin: 0px;
    }
    .offer-con .right-item{
        float: right;
        padding: 10px;
    }
    .offer-con .right-item h5{
        color: #cb9944;
        margin: 0px;
        font-size: 14px;
    }
    .offer-pg > .portfolio-item{
        width: 100px;
        background-color:blue;
        margin-left:10px;
        float:left;
    }
    http://jsfiddle.net/jbrosi/c6kf2/

Posting Permissions

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



Click Here to Expand Forum to Full Width