Use this component to create a pop-up lightbox of images that can be opened from a link or button (or any other clickable component) on the page. Two styles are available: "Wide" and "Compact".
Settings used for this example:
Component Inspector
Media Folder | travels-and-landscapes |
Lightbox Type | Wide |
Attach-to | #gallery-button |
Page HTML
<button id="gallery-button" class="btn btn-primary">Click me!</button>
Explanation: We set the "Attach-to" property in the component inspector to the ID of the button element that we want to trigger the gallery from. The script will then add an "on-click" event handler to this button that opens the gallery when it is clicked. We also select the folder of images that we wish to display and set the lightbox type to "Wide". The button that we added to the page is shown in the Page HTML box above.
// Options that can be set from the OctoberCMS component inspector:
gallery_theme: "lightbox" //This is included automatically for all "Popup Lightbox" galleries
lightbox_type: "wide", //compact / wide - please use the OctoberCMS component inspector to set this option!
Settings used for this example:
Component Inspector
Media Folder | travels-and-landscapes |
Lightbox Type | Compact |
Attach-to | #gallery-button-2 |
Script options | lightbox_show_numbers: false,lightbox_slider_image_border_width: 20 |
Page HTML
<button id="gallery-button-2" class="btn btn-primary">Click me!</button>
Explanation: We set the "Attach-to" property in the component inspector to the ID of the button element that we want to trigger the gallery from. The script will then add an "on-click" event handler to this button that opens the gallery when it is clicked. We also select the folder of images that we wish to display and set the lightbox type to "Compact". We also add some script options to hide the image numbers and change the image border from the default of 10 to a wider 20 pixels. The button that we added to the page is shown in the Page HTML box above.
// Options that can be set from the OctoberCMS component inspector:
gallery_theme: "lightbox" //This is included automatically for all "Popup Lightbox" galleries
lightbox_type: "compact", //compact / wide - please use the OctoberCMS component inspector to set this option!
All Available Component Inspector Options for Popup Lightbox Galleries
Code | OctoberCMS Component Inspector Property | Description |
---|---|---|
alias | Alias | Standard OctoberCMS stuff, you refer to the component in your page via this unique identifier, the default is “embeddedGallery” but you can change it to anything you want (don’t use spaces or special characters though!) |
mediaFolder | Media Folder | Select the folder that you uploaded the images to in the OctoberCMS Media manager. Only folders under the “Base Media Folder” set on the November Gallery settings page are valid. |
maxItems | Max Images | The maximum number of images to display |
sortBy | Order by | Order to display the gallery items in; note: Image Title, Description, and Sort Order only work for images uploaded using the Galleries page! Options are: (1) title / Image Title (2) description / Image Description (3) sortOrder / Image Order in Gallery (4) width / Image Width (5) height / Image Height (6) orientation / Image Orientation (7) fileName / Filename (8) fileSize / File Size (9) uploaded / Date/Time Uploaded; and all options are also available in reverse order (append DESC onto the option code). |
attachTo | Attach to | JQuery selector for the element(s) that the user can click on to open the lightbox; for example: #gallery-button |
additionalLightboxOptions | Script options | Additional JS options that you want passed onto the UniteGallery script, for example: theme_panel_position: 'bottom' |
Script options applicable to all "Popup Lightbox" galleries...
//lightbox options: lightbox_hide_arrows_onvideoplay: true, //hide the arrows when video start playing and show when stop lightbox_arrows_position: "sides", //sides, inside: position of the arrows, used on compact type lightbox_arrows_offset: 10, //The horizontal offset of the arrows lightbox_arrows_inside_offset: 10, //The offset from the image border if the arrows placed inside lightbox_arrows_inside_alwayson: false, //Show the arrows on mouseover, or always on. lightbox_overlay_color:null, //the color of the overlay. if null - will take from css lightbox_overlay_opacity:1, //the opacity of the overlay. for compact type - 0.6 lightbox_top_panel_opacity: null, //the opacity of the top panel lightbox_close_on_emptyspace:true, //close the lightbox on empty space lightbox_show_numbers: true, //show numbers on the right side lightbox_numbers_size: null, //the size of the numbers string lightbox_numbers_color: null, //the color of the numbers lightbox_numbers_padding_top:null, //the top padding of the numbers (used in compact mode) lightbox_numbers_padding_right:null, //the right padding of the numbers (used in compact mode) lightbox_slider_image_border: true, //enable border around the image (for compact type only) lightbox_slider_image_border_width: 10, //image border width lightbox_slider_image_border_color: "#ffffff", //image border color lightbox_slider_image_border_radius: 0, //image border radius lightbox_slider_image_shadow: true, //enable border shadow the image lightbox_slider_control_swipe:true, //true,false - enable swiping control lightbox_slider_control_zoom:true, //true, false - enable zooming control //lightbox text panel: lightbox_show_textpanel: true, //show the text panel lightbox_textpanel_width: 550, //the width of the text panel. wide type only lightbox_textpanel_enable_title: true, //enable the title text lightbox_textpanel_enable_description: false, //enable the description text lightbox_textpanel_padding_top:5, //textpanel padding top lightbox_textpanel_padding_bottom:5, //textpanel padding bottom lightbox_textpanel_padding_right: 11, //cut some space for text from right lightbox_textpanel_padding_left: 11, //cut some space for text from left lightbox_textpanel_title_color:null, //textpanel title color. if null - take from css lightbox_textpanel_title_font_family:null, //textpanel title font family. if null - take from css lightbox_textpanel_title_text_align:null, //textpanel title text align. if null - take from css lightbox_textpanel_title_font_size:null, //textpanel title font size. if null - take from css lightbox_textpanel_title_bold:null, //textpanel title bold. if null - take from css lightbox_textpanel_css_title:{}, //textpanel additional css of the title lightbox_textpanel_desc_color:null, //textpanel description font family. if null - take from css lightbox_textpanel_desc_font_family:null, //textpanel description font family. if null - take from css lightbox_textpanel_desc_text_align:null, //textpanel description text align. if null - take from css lightbox_textpanel_desc_font_size:null, //textpanel description font size. if null - take from css lightbox_textpanel_desc_bold:null, //textpanel description bold. if null - take from css lightbox_textpanel_css_description:{}, //textpanel additional css of the description
You can read more and see a lot of examples at the UniteGallery website!