lightGallery | A customizable, modular, responsive, lightbox gallery plugin | Widget library
kandi X-RAY | lightGallery Summary
kandi X-RAY | lightGallery Summary
A customizable, modular, responsive, lightbox gallery plugin. No dependencies.\ Available for React.js, Angular, Vue.js, and typescript.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- Build a production build
- Listen for video playback .
- Constructs the client environment environment .
- Initialize a new light plugin .
- Read project config .
- Get the additional paths from the baseUrl .
- Get the thumbnail image URL
- Creates an instance of light zoom settings .
- returns a generator
- Initialize the custom animation .
lightGallery Key Features
lightGallery Examples and Code Snippets
Lines of Code : 42License : Strong Copyleft (CC BY-SA 4.0)
Copy# Some other previous code
environment.plugins.append('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
)
module.exports = environment
require("@rails/ujs").start()
require("turblightGallery(document.getElementById('lightgallery'));
$("#magic_start").on("click", () => {
$("#lightgallery a:first-child > img").trigger("click");
});
CLICK TO OPEN
const settings = {
gallery:true,
item:1,
loop:false,
thumbItem:4,
slideMargin:0,
enableDrag: true,
currentPagerPosition:'left',
onSliderLoad: function(el) {
el.ligprojects as $crp_project): ?> cover); $coverInfo = CRPHelper::decode2Obj($coverInfo); $meta = CRPHelper::getAttachementMeta($coverInfo->
Lines of Code : 35License : Strong Copyleft (CC BY-SA 4.0)CopyCommunity Discussions
Trending Discussions on lightGallery
QUESTION
I am trying to display the single image in the slider, but whenever the user will click on this then it's open a popup in data-src="multiple-images-here" where I am running the slider. But the main issue is with the single image display in for loop. It displays all the available images in the loop. Please suggest me the best solution for this.
Here is my index.blade.php file where I am trying to display the slider using this code.
ANSWER
Answered 2022-Mar-08 at 10:52You can pass ->first() function to get only 1 images, It will show you only the first item from your data in database.
QUESTION
I have a page that show lots of photos which can be opened with lightgallery.js
I've already made some custom HTML caption which works fine. But now I want to add a label to the image itself. How can I do that?
I will show an example of what my photos page looks like:
When you open an image this is what it looks like:
The left part is a custom HTML caption which I linked with this attribute: data-sub-html.
Example code of my looped code:
...ANSWER
Answered 2022-Feb-09 at 01:36According to the lightgallery docs, you can use the event lgAfterOpen to execute code once the gallery is opened. However, lightgallery makes this slightly difficult as you can't access the image clicked on from this event, but you can access it from the event lgBeforeOpen. With this in mind, I'd accomplish this by doing two things.
Firstly, add the size as a data attribute of each image:
QUESTION
I have a problem with using Bootstrap plus Masonry for my layout. Trying it out on my computer, it works perfectly, but when I upload it to GitHub pages or Godaddy hosting, it sometimes gets destroyed like the image I shared. I bought Lightgallery and tried it instead of Fancybox to make the photo gallery, just in case something there was making a problem, but it's the same.
The problem being Masonry or bootstrap, I can't get rid of bootstrap but could use an alternative to Masonry. My client just needs the Pinterest-like layout.
It's very frustrating because it works perfectly until it is live. I tried a lot of things but nothing has worked. Thank you for any idea you could give me, and sorry for my bad English.
Github link: https://m-ribero.github.io/mubles-ballena/galeria.html
edit: Very important detail, it often gets fixed after reloading or resizing the page, but for the first time someone enters there, then it doesn't motivate people to invest more time in the site if it looks that bad.
...ANSWER
Answered 2021-Oct-16 at 11:49The problem is with Masonry and not Fancybox (or any other lightbox alternative). Looks like it incorrectly calculates height for the container. Since it works after assets have been cached, I guess that your masonry script does all calculations before your CSS is loaded. Therefore top/bottom padding is not taken into account for calculations.
QUESTION
I have js code like this:
...ANSWER
Answered 2021-Oct-07 at 20:35You can use a for loop:
QUESTION
I have a row of images that I would like to turn into a slider using slick slider.
Each image opens as a lightgallery popup when clicked on it with some custom HTML as caption. The problem is slick slider treats this caption also as a seperate slide.
My html:
...ANSWER
Answered 2021-Sep-03 at 16:28Why don't you simply wrap each item? Because slick gets initiated by adding the parent class and all children are seen as individual slides/items.
QUESTION
I am trying to create a mixed slider of images and HTML5 videos using lightgallery.js.
Images are shown in slider while video does not play. It gives this error:
Oops..fail to load content
Below are the CSS and JS files included in my project.
Anyone please suggest me whether I am missing any JS or CSS files or the way of creating a slideshow is not correct.
JS part:
...ANSWER
Answered 2021-Aug-11 at 08:51I assume, the different nesting depths might cause the problem.
If you check the official Mixed Contents docs, the code should looks like this:
HTML structure:
QUESTION
I'm working on a project in craft cms and I want to make a gallery block that is added as an entry in craft. After doing some research I was trying to do it with dynamic mode of lightgallery plugin. The problem is that in dynamic mode, both sources and thumbnails for the gallery are defined in javascript, as an ex.
...ANSWER
Answered 2021-Jul-14 at 10:25You will need to pass the list of images to JavaScript in order to access it in your lightbox initialization function. There are multiple ways to do that. For example, you could use the {% js %} tag to add some JavaScript code to your page that contains the encoded data. Or use the json_encode filter to add the data to your HTML element as a data attribute and use JSON.parse in your JavaScript code to parse the encoded JSON-string.
Here's a good article on passing data from Twig to JavaScript.
QUESTION
This library has an example to build a gallery based on element ID:
...ANSWER
Answered 2021-Jun-13 at 13:29Just creating IDs on the way:
QUESTION
I have problems with URL Processing in Laravel mix.
here is my app.css
...ANSWER
Answered 2021-Feb-19 at 20:52First, in webpack.mix.js, do you need the SASS line? Because it's causing issues.
QUESTION
I am currently working on a webpage and tried implementing LightGallery. Although the image galleries work totally fine for me the videos won't seem to play. When I check the console the following error message is displayed upon loading the site:
...ANSWER
Answered 2021-Apr-30 at 07:12Here's a working JSFiddle. Here's what I did, working through the installation page I referenced yesterday:
Starting in the "Include CSS and Javascript files" section, they say to include
lightgallery.css, though they don't give a link for it. I searched and found a CDN link, and added that ;Copied and added the 'jsdelivr collection' link for the Lightgallery JS;
Copied the JS they show to initiate the plugin;
Copied the relevant part of your HTML snippet - just the
lightgallerydiv, with some minor updates:- Neither
video-poster1.jpgnorimg/thumb1.jpgexist here of course, so I replaced them with placeholder images; - I get "Video unavailable" for that video, so I randomly picked another;
- Neither
This works fine - the placeholder thumbnail is shown, when I click it the video opens against a black background, and plays if I click play. Here's the code:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install lightGallery
NPM - NPM is a package manager for the JavaScript programming language. You can install lightgallery using the following command npm install lightgallery
YARN - Yarn is another popular package manager for the JavaScript programming language. If you prefer you can use Yarn instead of NPM yarn add lightgallery
Bower - You can find lightGallery on Bower package manager as well bower install lightgallery --save
GitHub - You can also directly download lightgallery from GitHub
CDN - If you prefer to use a CDN, you can load files via jsdelivr, cdnjs or unpkg
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
