Set the Resize Animation

The wijlightbox widget can display various transition effects when moving from one image to next for images of varying sizes.

Complete the following steps to set the lightbox resize animation:

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/sports/1" rel="wijlightbox[stock];player=img">
        <img src="http://lorempixum.com/150/125/sports/1" title="Sports 1" alt="Sports 1" /></a>
    <a href="http://lorempixum.com/800/400/sports/2" rel="wijlightbox[stock];player=img">
        <img src="http://lorempixum.com/150/125/sports/2" title="Sports 2" alt="Sports 2" /></a>
    <a href="http://lorempixum.com/300/400/sports/3" rel="wijlightbox[stock];player=img">
        <img src="http://lorempixum.com/150/125/sports/3" title="Sports 3" alt="Sports 3" /></a>
    <a href="http://lorempixum.com/600/300/sports/4" rel="wijlightbox[stock];player=img">
        <img src="http://lorempixum.com/150/125/sports/4" title="Sports 4" alt="Sports 4" /></a>
</div>
<div class="demo-options">
    <br /><label>Animation</label><br /><select id="animation" class='option'>
        <option value="sync" selected='true'>Sync</option>
        <option value="wh">Width To Height</option>
        <option value="hw">Height To Width</option>
        <option value="none">None</option>
    </select>
</div>

This markup will add a lightbox widget containing four images and drop-down box with four options to the page. In the next step, you'll set the initialize the lightbox.

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

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

At run time the option you select from the drop-down box will determine the resize animation in the wijlightbox widget.

What You've Accomplished

Press F5 to run the application and click on a thumbnail image. The image will appear in the lightbox. The images selected are different sizes so if you click the Next or Previous buttons you'll see the resize animation effect. Change the effect by choosing a different item from the drop-down list.