Animate the Gallery

The wijgallery widget supports animation. Simply set the animated option to take advantage of this feature. See the Gallery > Animation sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/gallery/Animation.

Create an C1 ASP.NET MVC 4 Web Application.
Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.

Add the following markup within the <body> tags of the page, just after @RenderBody():

<div id="wijgallery" class="">
    <ul class="">
        <li class=""><a href="http://lorempixum.com/750/300/sports/1">
    <img alt="1" src="http://lorempixum.com/200/150/sports/1" title="Word Caption 1" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/sports/2">
    <img alt="2" src="http://lorempixum.com/200/150/sports/2" title="Word Caption 2" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/sports/3">
    <img alt="3" src="http://lorempixum.com/200/150/sports/3" title="Word Caption 3" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/sports/4">
    <img alt="4" src="http://lorempixum.com/200/150/sports/4" title="Word Caption 4" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/sports/5">
    <img alt="5" src="http://lorempixum.com/200/150/sports/5" title="Word Caption 5" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/sports/6">
    <img alt="6" src="http://lorempixum.com/200/150/sports/6" title="Word Caption 6" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/sports/7">
    <img alt="7" src="http://lorempixum.com/200/150/sports/7" title="Word Caption 7" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/sports/8">
    <img alt="8" src="http://lorempixum.com/200/150/sports/8" title="Word Caption 8" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/sports/9">
    <img alt="9" src="http://lorempixum.com/200/150/sports/9" title="Word Caption 9" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/sports/10">
    <img alt="10" src="http://lorempixum.com/200/150/sports/10" title="Word Caption 10" />
        </a></li>
    </ul>
</div>

This markup will add content for a gallery widget to the page. In the next step, you'll set animation for the gallery.

After the closing </div> tag you added in the previous step, add the following markup to and set the animated options:

<div class="option-row">
    <label for="showingEffectTypes">
        Transition
    </label>
    <select id="showEffectTypes" name="effects">
        <option value="blind">Blind</option>
        <option value="clip">Clip</option>
        <option value="drop">Drop</option>
        <option value="explode">Explode</option>
        <option value="fade">Fade</option>
        <option value="fold">Fold</option>
        <option value="highlight">Highlight</option>
        <option value="puff">Puff</option>
        <option value="scale">Scale</option>
        <option value="size">Size</option>
        <option value="slide">Slide</option>
    </select>
</div>

This will add elements to customize the wijgallery's animation. At run time, you can choose an animation style. Once a style is applied you can navigate through the images with the Previous or Next buttons to view the chosen animation.

After the closing </div> tag you added in the previous step, add the following markup to customize the style options:
```
<style type="text/css">
    .wijmo-wijcarousel-text span
    {
    padding: 5px;
    }       
    #wijgallery
    {
    width: 750px;
    }
</style>
```
This will set the size of the wijgallery widget.

After the closing </style> tag you added in the previous step, add the following jQuery script to initialize the wijgallery widget:

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
    $("#wijgallery").wijgallery({
        thumbsLength: 120
    });
    var transitions = {
        animated: "fade",
        duration: 1000,
        easing: null
    }
    $('#showEffectTypes').change(function () {
        var ee = $("#showEffectTypes option:selected").val();
        $.extend(transitions, { animated: ee });
        $("#wijgallery").wijgallery("option", "transitions", transitions);
    });
    });
</script>

This will initialize the gallery and add animation.

What You've Accomplished

Press F5 to run the application and choose an animation style from the drop-down box. Once a style is applied you can navigate through the images with the Previous or Next buttons to view the chosen animation.