Components > Media > Lightbox Gallery problems.

I am having troubles with Lightbox Gallery. 1. When I replace a Col > Link > Image with another image from Design > Images by using OPTIONS Image Options > "From Library" then select the image and open it and it changes in the Overview.

The double click lightbox does not include those images just replaced.

I have looked at the code and it looks the same, why isn't this working?<br /> Is there a better way of doing this?

=== Also this guy never got his Lightbox question answered for some reason. https://bootstrapstudio.io/forums/topic/lightbox-handles-not-showing-when-site-is-published/

Do I have to change some javascript somewhere? Where is that found? Somewhere at the top or in a file?

Well, the bottom question was partially answered. The website example is at the bottom of this http://spring-resonance-9636.bss.design/

Check to make sure that your JS files are in the correct order. You can reorder them by right clicking over the JavaScript title in the right lower side of the app and choose the reorder selection on that menu. Then you will get a dialog box with all the JS files listed. See if rearranging them helps. This is the same procedure for reordering the CSS too when needed.

OK in Lower Right DESIGN > Javascript (Right Click) > Pick "Include Order" and there is a new menu which has various Java scripts listed. These have to be in the same order as the BSS website (in the order they are actually used?)

bootstrap.min.js jquery.min.js https://cdnjs.cloudfire.com/ajax/live/lightbox2/2.8.2/ etc https://cdnjs.cloudfire.com/ajax/live/Swiper3.3.1/ etc Simple.slider.js

Now when I move simple.slider.js up to below jquery.min.js because that is the order for the first Carousel, it just stays at the bottom of the list, even when the website is saved.

Now I moved https://cdnjs.cloudfire.com/ajax/live/Swiper3.3.1/ etc to be this way: bootstrap.min.js jquery.min.js Simple.slider.js https://cdnjs.cloudfire.com/ajax/live/Swiper3.3.1/ etc https://cdnjs.cloudfire.com/ajax/live/lightbox2/2.8.2/ etc

and it works now! The spacing between the images seems to be working! Thank you!

Whoops I spoke to soon.

  1. The TAB "Photos" Lightbox still has photos without spaces between. --I think I have to redo this code again, and bring in Lightbox carefully into the tab. I had striped it out of the container I think.

  2. The test Lightbox at the bottom has the proper spaces, but when I double click when using a preview/published website, to get the popup "Lightbox" the orginal photos are still there. Perhaps there is CSS or Javascript that needs to be changed to get this working.

Silly me. Under OVERVIEW <row> Photos, <row>, <column>, <link>, <image> Just look at <Link> it has a link to the original photos in lightbox! In the OPTIONS upper right corner I have to copy the <image> filenames into the parent <link>:

<column>
    <link> < --- to here
         <image> <---copy file name

1 Like

hehe sounds like you're working it out pretty good. keep up the good work!

There are still two things that aren't working well. 1. Sometimes my photos jump a position and leave big white space. I am going to check sizes of the originals and as a photo that is sized with resolution just off may be causing this problem. 2. The Lightbox in the "Photos" Tab does not have good spacing, the test run below does have good spacing. When I moved the first lightbox under the tab I took it out of its container, maybe I lost something doing that? I'll check.

Thanks Jo, Just trying to record for others and for reference later too.

Today I made some progress on these problems. I'll try to summarize. The images would not stay together, there would be an open space where an image should have been. I knew this was due to some alignment problem, or thought so, so I checked the photo sizes and made sure they were exactly 1024x768 and not off by one pixel. Then I used gimp and jpg compressed them to 65% which gets them down to below 200kb and some down to close to 100 kb. Then I reloaded then into BSS and into the Lightbox Gallery. This helped a lot with the white spaces because about 6 of my images were not even close to 1024x768 and those caused gaps.

Now there were a couple problematic white spaces still, even though all the photos were the same resolution. I tried moving images from the overview and checking the browser to see what would happen. I deleted the two images around the white gaps, well actually the <Column> <Link> <Image> from OVERVIEW. The recreating them from OVERVIEW by right click and Duplicate. Then inserting the correct image from the "images" (lower Right) This worked sometimes and sometimes not, with the white space still showing up when I tested a responsive screen.

Then I realized I had just copied <column> <link> <images> from different places and had not been consistent. I should only used OVERVIEW to "duplicat" to create more slides. So starting with the last image that worked without a white space, I simple went to that <Column> <Link> <Image> in OVERVIEW to the parent <columin> and Right clicked and picked "Duplicate". Then moved down to the new <column>, Right clicked and picked "Duplicate" and so on. Then I went back and used those duplciates to recreate all the slides below. Then I deleted the all the old slide images & columns below and it seems to work now.

So that's how I fixed blank/,missing slides and white spaces.

Now I have to go back and paste in the correct image file name so that the double click lightbox gallery works right. Not hard to do but it will take awhile. Also I need to move this Gallery up under a TAB "Photos" and delete what I have there now because the spacing is all screwed up.<br /> I think I am going to put this lighbox into a <Row> <Column> set of parents.

So that's what I learned today.. Nigght.

PS: I also have to shrink all those 1024x768 photographs down to 330x248 to make a smaller site responsive carousel for the mobile phone, so it won't be slow downloading photos. This should be a satisfying thing to do tomorrow.