CODEWITHSUNDEEP
javascriptjqueryhtmlscroll
Annie
Annie

Reputation: 1391

Making these arrows scroll? jquery & html

I am trying to create a little filmstrip with images. I want to be able to scroll horizontally to view all of the images.

I have:

<div class="gallery"> 
    <div class="back" style="opacity: 0.6;"></div>  
    <div class="thumbs">      
        <ul class="ad-thumb-list"> 
            <li>
               <img id="thumb01" src="../jpeg/thumbnails/01.jpg" title="page 1"/>
            </li>
            (I have many <li>'s listed)
        </ul>    
    </div>  
    <div class="forward" style="opacity: 0.6;"></div> 
</div>

I have css stylizing the whole thing, and I have the display:hidden on the thumbs div. I just need the arrows to function but I have no idea what type of code to use. Any help would be great!

Upvotes: 2

Views: 2254

Answers (3)

Ali Habibzadeh
Ali Habibzadeh

Reputation: 11548

<style type="text/css">
    .ad-thumb-list 
    {
        width:650px;
        }
    .ad-thumb-list li 
    {
        display:block; 
        float:left;
        width:100px;
        height:100px;
        margin-right:20px;
        border:solid 1px #ccc;
        }
    .thumbs 
    {
        overflow:hidden;
        height:120px;
        width:280px;
        }            
</style>

and js:

<script type="text/javascript">
    $(function () {

        $('.forward').click(function () {
            $('.thumbs').animate({ scrollLeft: '+=' + $('.ad-thumb-list li').width() });
        });
        $('.back').click(function () {
            $('.thumbs').animate({ scrollLeft: '-=' + $('.ad-thumb-list li').width() });
        });
    });
</script>

and html

    <div class="gallery"> 
   <div class="back" style="opacity: 0.6;">Back</div>  
      <div class="thumbs">      
         <ul class="ad-thumb-list"> 
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
         </ul>    
      </div>  
   <div class="forward" style="opacity: 0.6;">Forward</div> 
</div>

Upvotes: 1

Eric
Eric

Reputation: 97555

$('.gallery').each(function() {
    var $images = $('.thumbs li', this);
    var $forward = $('.forward', this);
    var $back = $('.back', this);

    var numImages = $images.length;

    var index = 0;

    function update()
    {
        index = (index + numImages)%numImages;
        $images.hide().eq(index).show()
    }

    $back.click(function() {
        index--;
        update();
    });

    $next.click(function() {
        index++;
        update();
    });

    update();
});

Upvotes: 0

Mike Rifgin
Mike Rifgin

Reputation: 10745

Go for a plugin if you're not too adept in javascript. How about this:

http://sorgalla.com/projects/jcarousel/

http://sorgalla.com/projects/jcarousel/examples/static_circular.html

Very easy to implement.

Upvotes: 0

Related Questions