jQuery Strip Photo Gallery

Written by Joe on Wednesday, January 5, 2011

A Quick, Easy, & Stylish jQuery Photo Gallery

This simple, yet stylish gallery is sure to impress your visitors. The Strip Photo Gallery uses 2 jQuery scripts including thickbox and jcarousel. Thickbox is used to enlarge the images when clicked on and jcarousel is used to actually display the images. With a little styling you can have a custom jquery photo gallery in no time!

Download the jQuery strip photo gallery here.

Step 1: Include javascript and css files

    <link rel="stylesheet" href="css/thickbox.css" type="text/css"/>
    <link rel="stylesheet" href="css/tango_skin.css" type="text/css"/>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.jcarousel.min.js" type="text/javascript"></script>
    <script src="js/thickbox.js" type="text/javascript"></script>

Step 2: Initialize the gallery

    <script type="text/javascript" charset="utf-8">   
        $(document).ready(function(){
            $("#gallery .open").click(function(){
                toggle('#gallery .active');

                $("#gallery_list").jcarousel({
                    wrap: 'circular',
                    animation: 1000
                });
            });

            $("#gallery .close").click(function(){
                toggle('#gallery .active');
            });
        });

        //<![CDATA[
        function toggle(id)
        {
            $(id).animate({"width": "toggle"}, { duration: 600 });
        }
        //]]>
    </script>

Step 3: the HTML

<div id="content">
        <div id="gallery">
            <a href="#" class="open" onclick="return false;"><img  src="images/photo_gallery_button.gif" alt="Photo Gallery"/></a>

            <div class="active">
                <ul id="gallery_list">
                    <li><a title="Your Caption" rel="gallery" href="images/1.jpg" class="thickbox"><img src="images/1.jpg" alt=""/></a></li>
                    <li><a title="Your Caption" rel="gallery" href="images/2.jpg" class="thickbox"><img src="images/2.jpg" alt=""/></a></li>
                    <li><a title="Your Caption" rel="gallery" href="images/3.jpg" class="thickbox"><img src="images/3.jpg" alt=""/></a></li>
                    <li><a title="Your Caption" rel="gallery" href="images/4.jpg" class="thickbox"><img src="images/4.jpg" alt=""/></a></li>
                    <li><a title="Your Caption" rel="gallery" href="images/5.jpg" class="thickbox"><img src="images/5.jpg" alt=""/></a></li>
                    <li><a title="Your Caption" rel="gallery" href="images/6.jpg" class="thickbox"><img src="images/6.jpg" alt=""/></a></li>
                    <li><a title="Your Caption" rel="gallery" href="images/7.jpg" class="thickbox"><img src="images/7.jpg" alt=""/></a></li>
                    <li><a title="Your Caption" rel="gallery" href="images/8.jpg" class="thickbox"><img src="images/8.jpg" alt=""/></a></li>
                    <li><a title="Your Caption" rel="gallery" href="images/9.jpg" class="thickbox"><img src="images/9.jpg" alt=""/></a></li>
                    <li><a title="Your Caption" rel="gallery" href="images/10.jpg" class="thickbox"><img src="images/10.jpg" alt=""/></a></li>
                </ul>
                <a class="close"><img src="images/gallery_close.gif" alt="close"/></a>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
    </div>

Like what you’ve read?

Link back to us.
http://www.revolutionunlimited.com/news-and-articles/javascript-jquery/2011-01-05/jquery-strip-photo-gallery/

OR Join Our Mailing List