You can embed a LightGallery album in an iframe into your web page via the jAlbum embedded template: select in jAlbum menu item Album / Embed Album and copy the code to your webpage, see this example page. ![]() This is not required if you embed a LightGallery gallery via an iframe into your web page. Notice that in this implementation the album code and the rest of the website code should be saved in the same html page. React component is part of the main lightGallery package on NPM. I used this code and procedure for my own home page You can also embed a LightGallery thumbnails page into your web page, see this example page. Follow the below steps to use lightGallery react component in your application. If required, edit in common.css the css code for the container, for example: Upload your web-page folder to your server with an FTP-program like FileZilla. To the place in the body section where you like to see the embedded light-box.Ĭopy just above the statement the code from the end of the album index file: ![]() Copy only the lines you see in your album index file. The last two type of statements may be different for your album or they may be absent. In the head section copy after your style-sheet statements these type of lines from the album index file: Edit the index.html file of your webpage: add code from the album index file, Make the album and move the sub-directories slides, thumbs and res and file slidePage.js to your webpage folder. Make a file 'page-header_embed.inc' the image directory with only only one line of code: This will remove most unused code from the album index page. Start making a minimal album in a sibling directory of your web-page: Check both check-marks 'Skip thumbnails pages' and 'Use LightGallery-placeholder' and un-check slide Page options ' Show location button' and 'Show Share window button'. If the index file of your website is large, the method described above might not be very practical and you can better edit your original index page of your web-page manually. Use an FTP-program like FileZilla, to up-load the sub-directories slides, thumbs and res and files slidePage.js and index.html. If the you like to embed a light-box in the root of your website you should not use jAlbum to upload the index page of your web-root, because it will start uploading all the files in your web-root. It is obliged to insert in the html code LightGallery container Īt the place you like to see the album with the images. The extra required html code is in include file 'page-header_embed.inc' in the image directory: The extra required css code is entered in the css textbox on the LightGallery 'Web page' settings tab: No JSON data is used and no iframe is used as a container for a the album, it is all done in the excellent lightGallery library. Use double click to zoom/unzoom the image. The middle button is used to start/stop the slide show and the right button can be used maximize the lightbox. I found a workaround to that, I'll post it below since this was the only post about the topic I found and it can help someone in the future.Click on the Thumbnails button in the tool-bar in the upper right corner to show/hide the caption and the thumbnails below the slide image. if the gallery was opend while the page was still moving (smoothing), after closing, it jumped to the point where smoothing would end. What did work was setting smooth() to 0 in onBeforeOpen and setting it back to a desired value in Lightgallerys onBeforeClose hook. ScrollSmoother.paused(true) in Lightgallerys onBeforeOpen hook didn't help, it paused on position 0. This occurred only when opening Lightgallery for the first time (still not acceptable ). Before closing Lightgallery, the page jumped to the top and then scrolled back to the gallery container. ![]() I had sort of a similar problem in Nuxt3 with Lightgallery and ScrollSmoother. See the Pen PoBqpeO by akapowl ( on CodePenĪlso, if you update the lightGallery version you are using to at least version 2.5.0, apparently an option comes available that lets you prevent the resetting of the scroll-position altogether which would likely make the blocking of the scroll unneccessary to begin with. Here is a link to the events available with lightgallery: You will need to find the event working best for you, to toggle ScrollSmoother.paused() at the right time, if you want to disable the scroll while the gallery is open. I can see the issue described, but as Rodrigo mentioned, you will definitely need to update your GSAP version first and yes, it looks like it is a problem because you can scroll while the gallery is open, and when it closes it will move back to the position it was before opening (or something along those lines).
0 Comments
Leave a Reply. |