Set the Text Position

You can include caption text in the wijlightbox widget and customize the location and display of the text. For example, you can display text inside, outside, or over a lightbox image. Or you can choose to not display text at all.

Complete the following steps to choose the text position at run time:

Create a new C1 ASP.NET MVC 5 Web Application (see Creating an MVC Classic 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">
<h6>Text Position:</h6>
<select id="textposition">
    <option value="inside" selected='true'>inside</option>
    <option value="outside">outside</option>
    <option value="overlay">overlay</option>
    <option value="titleOverlay">titleOverlay</option>
    <option value="none">none</option>
</select>
</div>

This markup will add one lightbox widget with four images to the page as well as a drop-down list box allowing you to choose the text position 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').change(function () {
                $("#lightbox").wijlightbox('option', 'textPosition', $(this).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. Notice how text is displayed in the image. Choose another option from the text drop-down box and click a thumbnail image to view where the text is now displayed.