AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Lightgallery thumbnail plugin11/9/2023 escKey: true: Whether lightGallery should be closed when user presses "Esc".loop: false: Allows to go to the other end of the gallery at first/last img.hideControlOnEnd: false: If true, prev/next button will be hidden on first/last image.controls: true: Whether to display prev/next buttons.index: false: Allows to set which image/video should load when using dynamicEl.selector: null: Custom selector property insted of just child.showAfterLoad: true: Show Content once it is fully loaded.if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded. ex:// you clicked on 4th image and if preload = 1 then 3rd slide and 5th slide will be loaded in the background after the 4th slide is fully loaded. will exicute only after the current slide is fully loaded. ariaLabelledby & ariaDescribedby: For Accessibility.useLeft: false: Force lightgallery to use css left property instead of transform.If 0 is passed via hideBarsDelay, lightGallery will not hide the toolbar and controls. hideBarsDelay: 6000: Delay for hiding gallery controls in ms. ![]() backdropDuration: 150: Backdrop transtion duration.startClass: 'lg-start-zoom': Starting animation class for the gallery.addClass: '': Add custom class for gallery.height & width: Height and width of the gallery.speed: 1000: Transition duration (in ms).easing: 'linear': Value for CSS "transition-timing-function" prop.mode: 'lg-slide': Type of transition between images: 'lg-slide', 'lg-fade', 'lg-zoom-in', 'lg-zoom-in-big', 'lg-zoom-out', 'lg-zoom-out-big', 'lg-zoom-out-in', 'lg-zoom-in-out', 'lg-soft-zoom', 'lg-scale-up', 'lg-slide-circular', 'lg-slide-circular-vertical', 'lg-slide-vertical', 'lg-slide-vertical-growth', 'lg-slide-skew-only', 'lg-slide-skew-only-rev', 'lg-slide-skew-only-y', 'lg-slide-skew-only-y-rev', 'lg-slide-skew', 'lg-slide-skew-rev', 'lg-slide-skew-cross', 'lg-slide-skew-cross-rev', 'lg-slide-skew-ver', 'lg-slide-skew-ver-rev', 'lg-slide-skew-ver-cross', 'lg-slide-skew-ver-cross-rev', 'lg-lollipop', 'lg-lollipop-rev', 'lg-rotate', 'lg-rotate-rev', 'lg-tube'.The plugin comes with lots of options/callbacks to customize your lightbox gallery. Initialize the gallery lightbox with default settings.ĥ. data-pinterest-text: Description for Pinterest postĤ.By default, current browser URL will be taken. Specify only if you want to provide separate share URL for the specific slide. data-pinterest-share-url: Pinterest share URL.data-googleplus-share-url: GooglePlus share URL.data- twitter-share-url: Twitter share URL.data-facebook-share-url: Facebook share URL.used in zoom plugin to see the actual size of the image when you doubleclick on the image. data-width: Actual size of the image in px.Pass false if you want to hide the download button. data-download-url: Download url for your image/video.data-iframe: Set true is you want to open your url in an iframe.data-responsive: List of images and viewport's max width separated by comma.Ex: img/1-375.jpg 375, img/1-480.jpg 480, img/1-757.jpg 757.data-poster: Poster image for your video.data-html: id or class name of an object(div) which contain your html.data-sub-html-url: url of the file which contain your sub html.data-sub-html: id or class name of an object(div) which contain your sub html.href: the large version of your image/video.data-src: the large version of your image/video.Create an image/video gallery with Html5 data-* attributes. Or load the core JavaScript and optional extensions of your choice in the document.Ģ. ![]() Load the latest version of jQuery library together with jQuery lightGallery plugin's CSS and javascript in the document.Ģ. Arrows, thumbnails and keyboard navigation.Supports youtube & vimeo videos, not just images. ![]() The Vanilla JavaScript Version is available here. Light Gallery is a lightweight, elegant, responsive, mobile-friendly jQuery JavaScript plugin for displaying an image/ video gallery in a fullscreen lightbox with CSS3 transition effects.
0 Comments
Read More
Leave a Reply. |