simpleLB

Very simple presentation widget for presenting photos on your website, which can be used super easily (it's what why I called it simple). It should work in all major browsers (Firefox, Edge, Chrome, Safari, Opera), but it needs JavaScript to be enabled!.

For usage is important only simpleLB folder, rest of files and folders are only additional with examples.

Usage

1. Add JQuery (if you didn't do it earlier, add this HTML tag to head part of page source code):

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. Link JavaScript files and CSS (add these three tags to head):

    <script src="simpleLB/settings.js"></script>
    <script src="simpleLB/lbscript.js"></script>
    <link rel="stylesheet" type="text/css" href="simpleLB/lbstyle.css">

3. Add simpleLB folder to your root website folder (or adjust src attribute in step 2).

4. If you want to present in lightbox, add class "lb" to it, for example:

    <img src="image/src.jpg" class="lb">

And that's basicaly everything.

Features

• You can add short description to each photo by data-caption attribute:

    <img src="image/src1.jpg" class="lb" data-caption="Lorem Ipsum Dolor Sit Amet">

• It is possible to show a photo in lightbox other the one is shown on webpage (can be usefull for thumbnails). Use data-orig attribute and specify the path to target image...

    <img src="thumbnails/src1.jpg" class="lb" data-orig="images/src1.jpg">

• You can divide your images into more galeries (presentations, sections...) by adding subclass name after "lb":

   
    <img src="image/src1.jpg" class="lb a">
    <img src="image/src2.jpg" class="lb a">
    <img src="image/src3.jpg" class="lb a">
    <img src="image/src4.jpg" class="lb b">
    <img src="image/src5.jpg" class="lb b">

Now, when user clicked on src2.jpg and he is going through the the photos by side arrows, he can't see src4.jpg and src5.jpg directly. He must end lightbox and then click on one of these two.

Be carefull, it can have negative side efect, e. g. if you use special class name for style specification. You can solve it by adding your special class name before "lb". Important is only first subclass just after "lb" class name.

This feature can't be easily disabled.

• You can easily modify plenty of lightbox features and properties (especialy visual aspects) by changing settings.js file.

• It's possible to manipulate with photo (keys R,L,+,- and mouse or menu in right top corner). User can rotate, zoom or translate photo to better view. This feature an be disabled in settings.js.

• To run automatic presentation of photos (if it's is allowed in settings.js). This presentation can be run by hitting Space key or in menu. In menu you can also set time for which will be every photo shown in ms (when current photo is updated manually by keys this time interval is restarted). Presentation starts with current photo and can be started only in one direction.

• If tranformations and presentation are disabled menu is hidden

Controls

• Something can be controled by keyboard (if it is allowed in settings.js):

Left/Right arrows - previous/next photo

Escape - hide lightbox/(stop auto presentation, if it is allowed)

Space - run/stop automatic presentation with selected interval (see menu for checking interval)

R/L - rotate to right/left (CW/CCW)

+/- (numeric) - zoom IN/OUT

See index.html for more information and examples...