active
Base
<p>Single</p>
<div class="o-gallery" data-o-component="o-gallery" data-o-gallery-captionminheight="30" data-o-gallery-captionmaxheight="50">
<h1 class="o-gallery__title">Gallery title</h1>
<ol class="o-gallery__items">
<li class="o-gallery__item" aria-selected="true">
<div class="o-gallery__item__content"><img alt="" src="http://im.ft-static.com/content/images/c6bb1407-b0fc-4cc6-8f9f-af838349595e.img"></div>
<div class="o-gallery__item__caption">Ukrainian soldiers guard a gate of an infantry base in Privolnoye, Ukraine</div>
</li>
<li class="o-gallery__item">
<div class="o-gallery__item__content"><img alt="" src="http://im.ft-static.com/content/images/ed8abc52-eb10-4cd2-91ae-ba0ddc88863e.img"></div>
<div class="o-gallery__item__caption">A Russian flag flies behind armed personnel on top of a Russian army vehicle outside a Ukrainian border guard post in Balaclava</div>
</li>
<li class="o-gallery__item">
<div class="o-gallery__item__content"><img alt="" src="http://im.ft-static.com/content/images/05c4639c-9023-4239-b8c1-63ade8e0e230.img"></div>
<div class="o-gallery__item__caption">A Russian convoy heads towards Simferopol, the regional capital of Ukraines Crimea region</div>
</li>
<li class="o-gallery__item">
<div class="o-gallery__item__content"><img alt="" src="http://im.ft-static.com/content/images/6470af55-ea40-46dc-be82-e409c85600fe.img"></div>
<div class="o-gallery__item__caption">Ukrainians hold placards as they gather near the US consulate in Kiev</div>
</li>
<li class="o-gallery__item">
<div class="o-gallery__item__content"><img alt="" src="http://im.ft-static.com/content/images/049c7ee7-a4de-48cb-b1a5-0ec80fee4f37.img"></div>
<div class="o-gallery__item__caption">President Barack Obama talks on the phone in the Oval Office with Russia’s President Vladimir Putin about the situation in Ukraine</div>
</li>
<li class="o-gallery__item">
<div class="o-gallery__item__content"><img alt="" src="http://im.ft-static.com/content/images/5d5bc53b-6ad7-42eb-bca2-ed90038b6d71.img"></div>
<div class="o-gallery__item__caption">The UN Security Council meets to discuss the situation in Ukraine</div>
</li>
<li class="o-gallery__item">
<div class="o-gallery__item__content"><img alt="" src="http://im.ft-static.com/content/images/5f2697c4-9536-4ed2-adc3-3e927da67059.img"></div>
<div class="o-gallery__item__caption">Vitaly Churkin, Russian ambassador to the UN, waits for the security council meeting on the situation in Ukraine to start</div>
</li>
</ol>
</div>
<p>Multiple</p>
<div class="o-gallery demo__multi" data-o-component="o-gallery" data-o-gallery-multipleitemsperpage="true">
<ol class="o-gallery__items">
<li class="o-gallery__item" aria-selected="true">
<div class="o-gallery__item__content"><img src="http://im.ft-static.com/content/images/bf78da6c-8e79-493a-8af6-11db6ee66666.img"></div>
</li>
<li class="o-gallery__item">
<div class="o-gallery__item__content"><img src="http://im.ft-static.com/content/images/5cc3255f-a5aa-402a-9304-a2dded21ae74.img"></div>
</li>
<li class="o-gallery__item">
<div class="o-gallery__item__content"><img src="http://im.ft-static.com/content/images/66c8be19-8448-46b9-8eb7-1cb322af1192.img"></div>
</li>
<li class="o-gallery__item">
<div class="o-gallery__item__content"><img src="http://im.ft-static.com/content/images/a32c6bb6-73cd-4f44-ab45-7cfb4a37650e.img"></div>
</li>
<li class="o-gallery__item">
<div class="o-gallery__item__content"><img src="http://im.ft-static.com/content/images/eefd0b95-5600-4d52-ab08-56b3ae538778.img"></div>
</li>
<li class="o-gallery__item">
<div class="o-gallery__item__content"><img src="http://im.ft-static.com/content/images/d7bca44e-d443-42f6-9c26-bf9a3a2cf3d8.img"></div>
</li>
<li class="o-gallery__item">
<div class="o-gallery__item__content"><img src="http://im.ft-static.com/content/images/007f9ce2-4e8b-46a2-9301-2ef88636c974.img"></div>
</li>
</ol>
</div>| Bower Dependencies | |
|---|---|
| o-colors | ^4.0.0 |
| ftscroller | https://github.com/ftlabs/ftscroller.git#^0.6.0 |
| ftdomdelegate | ^2.0.0 |
| o-viewport | >=0.1.1 <4.0.0 |
| o-hoverable | >=0.1.1 <4 |
| o-icons | ^4.1.0 <6 |
GitHub Repository
Quickstart
Build Service
Add the following to your
<script> and <link> tags.
o-gallery@^3.0.5
For more information see the Origami build service.
Manual Build Process
Run the following command in the root directory of your project, to add this dependency to your bower.json file:
bower install --save "o-gallery"@"^3.0.5"
For more information see the Origami build process.