Set Orientation

The wijgallery widget supports both horizontal and vertical orientations. Simply set the orientation option to take advantage of this feature. See the Gallery > Orientation sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/gallery/Orientation for an example.

Complete the following steps to set the gallery orientation:

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>
<h3>Orientation is "vertical", at left side</h3>
<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>
    </ul>
</div>
<br />
<h3>Orientation is "vertical", at right side</h3>
<br />
<div id="wijgallery1" class="">
    <ul class="">
        <li class=""><a href="http://lorempixum.com/750/300/city/1">
            <img alt="1" src="http://lorempixum.com/200/150/city/1" title="Word Caption 1" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/city/2">
            <img alt="2" src="http://lorempixum.com/200/150/city/2" title="Word Caption 2" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/city/3">
            <img alt="3" src="http://lorempixum.com/200/150/city/3" title="Word Caption 3" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/city/4">
            <img alt="4" src="http://lorempixum.com/200/150/city/4" title="Word Caption 4" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/city/5">
            <img alt="5" src="http://lorempixum.com/200/150/city/5" title="Word Caption 5" />
        </a></li>
        <li class=""><a href="http://lorempixum.com/750/300/city/6">
            <img alt="6" src="http://lorempixum.com/200/150/city/6" title="Word Caption 6" />
        </a></li>
    </ul>
</div>
<br />
<h3>Orientation is "horizontal", at top</h3>
<br />
<div id="wijgallery3" 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>
    </ul>
</div>

This markup will add content for three gallery widgets to the page. In the next step, you'll set the orientation for the galleries.

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

<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
    $("#wijgallery").wijgallery({
        thumbnailOrientation: "vertical",
        thumbnailDirection:"before",
        thumbsDisplay: 3,
        thumbsLength: 150,      
        showCounter: false,
        showTimer: false,
    });
    $("#wijgallery1").wijgallery({
        thumbnailOrientation: "vertical",
        thumbsDisplay: 3,
        showCounter: false,
        thumbsLength: 150,  
        showTimer: false
    });
    $("#wijgallery3").wijgallery({
        thumbnailDirection:"before",
        showCounter: false,
        showTimer: false
    });
});
</script>
<style type="text/css">
.wijmo-wijcarousel-text span
{
    padding: 5px;
}
#wijgallery, #wijgallery1
{
    width: 750px;
    height: 240px;
}
#wijgallery3
{
    width: 750px;
    height: 411px;
}
</style>

Two of the galleries will be vertically oriented and one will be horizontally orientated (default).

What You've Accomplished

Press F5 to run the application, and notice that two of the galleries are vertically oriented (one with thumbnail images to the left, one with thumbnail images to the right) and one is horizontally orientated.