Set the Transition Animation

By default, wijlightbox includes an animated transition effect when moving from one image to the next. You can customize this effect. This example demonstrates how to use the transAnimation and slideDirection options to switch between pages of the wijlightbox widget.

Complete the following steps to set the lightbox transition:

Create a new ASP.NET MVC 5 Wijmo Application (see Creating an MVC Tools Project).
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="lightbox">
    <a href="http://lorempixum.com/600/400/abstract/1" rel="wijlightbox[stock];player=img">
    <img src="http://lorempixum.com/150/125/abstract/1" title="abstract 1" alt="abstract 1" /></a>
    <a href="http://lorempixum.com/600/400/abstract/2" rel="wijlightbox[stock];player=img">
    <img src="http://lorempixum.com/150/125/abstract/2" title="abstract 2" alt="abstract 2" /></a>
    <a href="http://lorempixum.com/600/400/abstract/3" rel="wijlightbox[stock];player=img">
    <img src="http://lorempixum.com/150/125/abstract/3" title="abstract 3" alt="abstract 3" /></a>
    <a href="http://lorempixum.com/600/400/abstract/4" rel="wijlightbox[stock];player=img">
    <img src="http://lorempixum.com/150/125/abstract/4" title="abstract 4" alt="abstract 4" /></a>
</div>
<div class="demo-options">
    <label>Animation</label><select id="animation" class='option'>
        <option value="fade" selected='true'>fade</option>
        <option value="slide">slide</option>
        <option value="none">none</option>
    </select>           
    <label>Slide Direction</label><select id="direction" class='option'>
        <option value="horizontal" selected='true'>horizontal</option>
        <option value="vertical">vertical</option>
    </select>
</div>

This markup will add one lightbox widget with four images to the page as well as two drop-down list boxes allowing you to choose the animation type and slide direction at run time. In the next step, you'll initialize the lightbox.

After the closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijlightbox widget:

<script type="text/javascript">
    $(function () {   
        $("#lightbox").wijlightbox({
            textPosition: 'titleOverlay'
        });              
        $('.option').change(function () {
                $("#lightbox").wijlightbox('option', {
                    transAnimation: {animated : $('#animation').val()},
                    slideDirection: $('#direction').val()
                });
        });     
    });
</script>

The above script initializes the lightbox.

What You've Accomplished

Press F5 to run the application and click a thumbnail image to open the full image. Click the Next or Previous buttons to view the transition animation between images. Choose options from the drop-down box to change the transition.