VION is extremely easy to use, manage and update. It can be easily integrated into your website by placing a piece of javascript code between the <head></head> tags. Updating your gallery is as easy as editing a document.

How to Use

Adding Vion Gallery to Your Website

You need to add some html code to your website to be able to use VION. You should start with a main container DIV called vion-gallery. Each slide DIV under vion-gallery represents a particular slide. See the code tree below to understand it better.

<!-- Gallery starts -->
<div id="my-gallery" class="vion-gallery">

    <!-- Gallery mask starts -->
    <div class="gallery-mask">

        <!-- Slides start -->
        <div class="slides">
            <div class="slide">

                <div class="image-holder">
                    <img src="images/image-name.jpg" />
                </div>
                <div class="info">

                    <h2>Title goes here</h2>
                    <p>Subtitle goes here.</p>
                </div>
            </div>

            <div class="slide">
                <div class="image-holder">
                    <img src="images/image-name.jpg" />
                </div>

                <div class="info">
                    <h2>Title goes here</h2>
                    <p>Subtitle goes here.</p>
                </div>

            </div>

            <div class="slide">
                <div class="image-holder">
                    <img src="images/image-name.jpg" />

                </div>
                <div class="info">
                    <h2>Title goes here</h2>
                    <p>Subtitle goes here.</p>

                </div>
            </div>
        </div>
        <!-- Slides end -->

    </div>
    <!-- Gallery mask ends -->

    <!-- Thumbnails start -->
    <div class="thumbnails">
        <ul>
            <li><img src="images/thumbs/thumbnail.jpg" /></li>

            <li><img src="images/thumbs/thumbnail.jpg" /></li>
            <li><img src="images/thumbs/thumbnail.jpg" /></li>
        </ul>

    </div>
    <!-- Thumbnails end -->

</div>
<!-- Gallery ends -->

Initializing the Plugin

After getting your markup done, it's time to initialize the plugin. Initializing VION is pretty simple. Just add the following script between your head tags.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Vion - jQuery Image Gallery</title>

    <link href="css/vion.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>

    <script type="text/javascript" src="js/jquery.vion-1.0.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#my-gallery").vion();
        });
    </script>

</head>