Friday, December 14, 2012

Creating a Slideshow with SlideJS Plugin for jQuery

I have had a couple people email me and ask how I built the photo slider on the koryleephotography.com website.  The implementation is actually very easy thanks to the developers at slidesjs.com.  SlideJS is a jQuery plugin that uses both JavaScript and CSS to do the animation and provide the functionality of the slider buttons.

Here's a snippet of basic sample code from their site:

<!doctype html>
    <head>
        <title>Title</title>
    
        <style type="text/css" media="screen">
            .slides_container {
                width:570px;
                height:270px;
            }
            .slides_container div {
                width:570px;
                height:270px;
                display:block;
            }
        </style>
    
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="slides.js"></script>
    
        <script>
            $(function(){
                $("#slides").slides();
            });
        </script>
    </head>
    <body>
        <div id="slides">
            <div class="slides_container">
                <div>
                    <img src="http://placehold.it/570x270">
                </div>
                <div>
                    <img src="http://placehold.it/570x270">
                </div>
                <div>
                    <img src="http://placehold.it/570x270">
                </div>
                <div>
                    <img src="http://placehold.it/570x270">
                </div>
            </div>
        </div>
    </body>

Just make sure to include the jquery-latest.min.js script into your html.

For a better example, take a look at http://slidesjs.com/examples/standard/.  In my Chrome browser I took a closer look at the html and css (F12) to model my photo slider.  Instead of the smaller 570 pixel width I wanted to make a grander statement so I increased my images to 950 pixels.


I really like the SliderJS library.  They have plenty of other examples and customizations that you can apply to your slideshow.

No comments:

Post a Comment