Professional Community
Network of Professional
Become a members of a professional network and share your knowledge...
Professional Courses
e-Learning Courses Available
Professional Courses from our member associations...
Professional Centre
Conferencing and Meetings
The centre providing meeting rooms and conference facilities where professionals…
Professional Library
Access Documents
Download and upload professional material to increase you knowledge on various topics...
Professional Directory
PROFESSIONAL ASSOCIATIONS & INDIVIDUALS
Access our database here with a membership of over 50,000...

The Association of Professional Societies in East Africa (APSEA) is a Joint Forum and an umbrella body of professionals associations established in 1961

Create a fancy lightbox for images and videos utilizing the Modal component.

Usage

To apply this component, add the data-uk-lightbox attribute to an anchor linking to the image you wish to display. If a title attribute exists it will be displayed as a caption for the lightbox.

Example

Open lightbox

Markup

<a href="my-image.jpg" data-uk-lightbox title="">...</a>

Groups

You can link multiple images to the same lightbox and switch between them from within the lightbox, thus creating a gallery. Just add the {group:'my-group'} option to the data attribute of each item using the same name on all items that you want to group. Make sure to include the CSS from the Slidenav component, so you can navigate between the items.

Example

Markup

<a href="" data-uk-lightbox="{group:'my-group'}">...</a>

Different content sources

A lightbox is not restricted to images. Other media, like videos, can be displayed inside a lightbox and it will automatically generate the correct output by evaluating your path.

Example

Image MP4 Vimeo YouTube Iframe


Content types

If no filename extension is defined in the image path, just add the data-lightbox-type="image" attribute. This works for videos as well. The iframe content type will be automatically detected for urls ending in .html or .php. To force the iframe, add the data-lightbox-type="iframe" attribute.


JavaScript options

Option Possible value Default Description
group string false Group name to group elements as a gallery to show
allowfullscreen boolean true Whether embedded videos can toggle fullscreen or not (adds the allowfullscreen attribute to Iframes)
duration integer 400 Animation duration between gallery item change
keyboard boolean true Allow keyboard navigation

Init element manually

var lightbox = UIkit.lightbox(element, { /* options */ });

Create dynamic lightbox

var lightbox = UIkit.lightbox.create([
    {'source': 'http://url/to/video.mp4', 'type':'video'},
    {'source': 'http://url/to/image.jpg', 'type':'image'}
]);

lightbox.show();

Events

Name Parameter Description
showitem.uk.lightbox event, data On lightbox show
Don't have an account yet? Register Now!

Sign in to your account