Example code for common arrangements | PracticalSeries: Web Development

20.4 Example code for common arrangements

These are the Lightbox equivalent of the basic figures of section 15.

24.4.1 Single full width image

lightbox full width image html

<div class="fig-row">                    <!-- START OF FIGURE -->
    <figure class="fig-col fig1-1" id="js--f99-10">
<a href="01-pages/99-00-typicals/02-images/fig-99-10.svg" data-lightbox="fig-set" data-title="Figure 99.10 - Fairfax WTW control system">
<img src="01-pages/99-00-typicals/02-images/fig-99-10.svg" alt="Figure 99.10 - Fairfax WTW control system">
        </a>
        <figcaption>Figure 99.10 &emsp; control system</figcaption>
    </figure>
</div>                                   <!-- END OF FIGURE -->

Code 20.5 Lightbox full width image HTML

24.4.2 Two half width images

lightbox two half width images html

<div class="fig-row">                     <!-- START OF FIGURE -->
    <figure class="fig-col fig1-2" id="js--f99-11">
<a href="01-pages/99-00-typicals/02-images/fig-99-02.png" data-lightbox="fig-set" data-title="Figure 99.11 - &#x2153; width image">
<img src="01-pages/99-00-typicals/02-images/fig-99-02.png" alt="Figure 99.11 - Half width">
        </a>
        <figcaption>Figure 99.11 &emsp; Half width</figcaption> 
    </figure>
    <figure class="fig-col fig1-2" id="js--f99-12">
<a href="01-pages/99-00-typicals/02-images/fig-99-03.png" data-lightbox="fig-set" data-title="Figure 99.12 - &#x2154; width image">
<img src="01-pages/99-00-typicals/02-images/fig-99-03.png" alt="Figure 99.12 - Half width">
        </a>
        <figcaption>Figure 99.12 &emsp; Half width</figcaption>
    </figure>
</div>                                   <!-- END OF FIGURE -->

Code 20.6 Lightbox two half width images HTML

24.4.3 Three one-third width images

lightbox three one-third width images html

<div class="fig-row">                     <!-- START OF FIGURE -->
    <figure class="fig-col fig1-3" id="js--f99-13">
<a href="01-pages/99-00-typicals/02-images/fig-99-13.png" data-lightbox="fig-set" data-title="Figure 99.13 - short image">
<img src="01-pages/99-00-typicals/02-images/fig-99-13.png" alt="Figure 99.13 - short image">
        </a>
        <figcaption>Figure 99.13 &emsp; short image</figcaption>
    </figure>
    <figure class="fig-col fig1-3" id="js--f99-14">
<a href="01-pages/99-00-typicals/02-images/fig-99-14.png" data-lightbox="fig-set" data-title="Figure 99.14 - Tall image">
<img src="01-pages/99-00-typicals/02-images/fig-99-14.png" alt="Figure 99.14 - Tall image">
        </a>
        <figcaption>Figure 99.14 &emsp; Tall image</figcaption>
    </figure>
    <figure class="fig-col fig1-3" id="js--f99-15">
<a href="01-pages/99-00-typicals/02-images/fig-99-15.png" data-lightbox="fig-set" data-title="Figure 99.15 - short image">
<img src="01-pages/99-00-typicals/02-images/fig-99-15.png" alt="Figure 99.15 - short image">
        </a>
        <figcaption>Figure 99.15 &emsp; short image</figcaption>
    </figure>
</div>                                   <!-- END OF FIGURE -->

Code 20.7 Lightbox three one-third width images HTML

24.4.4 Two asymmetric images

lightbox two asymmetric images html

<div class="fig-row">                     <!-- START OF FIGURE -->
    <figure class="fig-col fig1-3" id="js--f99-16">
<a href="01-pages/99-00-typicals/02-images/fig-99-16.png" data-lightbox="fig-set" data-title="Figure 99.16 — 1/3 width image">
<img src="01-pages/99-00-typicals/02-images/fig-99-14.png" alt="Figure 99.16 - 1/3 width image">
        </a>
        <figcaption>Figure 99.16 &emsp; 1/3; width</figcaption>
    </figure>
    <figure class="fig-col fig2-3" id="js--f99-17">
<a href="01-pages/99-00-typicals/02-images/fig-99-17.png" data-lightbox="fig-set" data-title="Figure 99.17 — 2/3 width image">
<img src="01-pages/99-00-typicals/02-images/fig-99-17.png" alt="Figure 99.17 - 2/3 width">
        </a>
        <figcaption>Figure 99.17 &emsp; 2/3 width</figcaption>
    </figure>
</div>                                   <!-- END OF FIGURE -->

Code 20.8 Lightbox two asymmetric images HTML