CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
user686327
user686327

Reputation: 193

How do I create a scroll and sort with thumbnail pictures?

I need to create a simple horizontal scroll from a slew of pictures a friend sent me. I don't really work much with javascript as I think that is what I need to use to accomplish this, but I wanted to ask here first to see if there was a more viable option. Here is a shell pic of what he needs:

enter image description here

In which the thumbnail of pics will be displayed side by side in the red to orange gradient box, where the arrows on each side shift the pics. The sorts at the top would need to change the way the pics are arranged from left to right.

I am not looking for a step by step on how to create this. I am just asking for advice on how I should go about accomplishing this. I am assuming the easiest method is maybe jQueryUI but wanted your advice - maybe it is even doable in HTML 5 now?. Thanks!

Upvotes: 0

Views: 709

Answers (3)

Tim
Tim

Reputation: 1039

Something like jCarousel may work for you.

Upvotes: 1

Jasper
Jasper

Reputation: 76003

Make a container element that is the size you want the visible potion of your slider to be, then add a child element that can be moved around to shift what content is currently viewable:

<style>
#container {
    position : relative;/*necessary so its child can be positioned absolutely*/
    width    : 500px;
    height   : 200px;
    overflow : hidden;
}
#container ul {
    position   : absolute;
    top        : 0;
    left       : 0;
    list-style : none;
    width      : <total number of LI elements times their width, so eight LI elements would be 800>px
}
#container li {
    width : 100px;
    float : left;
}
</style>

<div id="container">
    <ul>
       <li>item 1</li>
       <li>item 2</li>
       ...
    </ul>
</div>

<script>
$(function () {
    $('#left-nav-button').on('click', function () {
        //use `.animate()` or `.css()` to move the UL element to the left (Hint: negative `left` value)
    });
    $('#right-nav-button').on('click', function () {
        //use `.animate()` or `.css()` to move the UL element to the right
    });
});
</script>

Here is a simple demo on jsfiddle: http://jsfiddle.net/qML6L/

Upvotes: 1

Angel Marino
Angel Marino

Reputation: 95

As for the sorting, you could accomplish this nicely with jQuery Isotope. I suppose you could just put the pictures in a very narrow div and use the fitRows layout mode.

As for the sliding, serialScroll would work, although something like jCarousel could also be an option.

Upvotes: 1

Related Questions