Ajax navigation, partially working (and a fix)

Responsive Lightbox & Gallery has a wonderful feature: if your site use ajax navigation (like mine that is a webradio site and uses ajax navigation to enable music all hover the website even when the user navigate it) then you can attach an event after every ajax reload and still have all the feature of Responsive Lightbox & Gallery

but this mechanism doesn’t reload the inline stylesheet that is added to every page with a gallery. EG:

<style id="responsive-lightbox-basicgrid-gallery-inline-css" type="text/css">

			#rl-gallery-container-1 .rl-basicgrid-gallery .rl-gallery-item {
				width: calc(33.33% - 2px);
				margin: 1px;
			}
			@media all and (min-width: 1200px) {
				#rl-gallery-container-1 .rl-basicgrid-gallery .rl-gallery-item {
					width: calc(25% - 2px);
				}
			}
			@media all and (min-width: 992px) and (max-width: 1200px) {
				#rl-gallery-container-1 .rl-basicgrid-gallery .rl-gallery-item {
					width: calc(33.33% - 2px);
				}
			}
			@media all and (min-width: 768px) and (max-width: 992px) {
				#rl-gallery-container-1 .rl-basicgrid-gallery .rl-gallery-item {
					width: calc(50% - 2px);
				}
			}
			@media all and (max-width: 768px) {
				#rl-gallery-container-1 .rl-basicgrid-gallery .rl-gallery-item {
					width: calc(100% - 2px);
				}
			}
		
			#rl-gallery-container-1 .rl-basicgrid-gallery .rl-gallery-item {
				height: 300px;
			}
			#rl-gallery-container-1 .rl-basicgrid-gallery .rl-gallery-item img {
				height: 300px;
				object-fit: cover;
				max-width: 100%;
				min-width: 100%;
			}
</style>

This inline-style consider the configuration for each window sizes (4 column on large screen, 3 columns if less large…so on till 1 column for mobile) as set in the settings page of the plugin. As a workaround I’ve adde some javascript to my website. So, at every ajax reload of the page, I sent the event and also add the needed configuration.

function readdGalleryStyle() {
    const numberOfGallery = jQuery('.rl-gallery-container').length;
    if (numberOfGallery > 0 && jQuery('#responsive-lightbox-basicgrid-gallery-inline-css').length == 0) {
        const gutter = 2;
        var styles = ;
        
        for (var i = 1; i <= numberOfGallery; i++) {
            styles = style +#rl-gallery-container-${i} .rl-basicgrid-gallery .rl-gallery-item{width:calc(33.33% - ${gutter}px);margin:1px}@media all and (min-width: 1200px){#rl-gallery-container-${i} .rl-basicgrid-gallery .rl-gallery-item{width:calc(25% - ${gutter}px)}}@media all and (min-width: 992px) and (max-width: 1200px){#rl-gallery-container-${i} .rl-basicgrid-gallery .rl-gallery-item{width:calc(33.33% - ${gutter}px)}}@media all and (min-width: 768px) and (max-width: 992px){#rl-gallery-container-${i} .rl-basicgrid-gallery .rl-gallery-item{width:calc(50% - ${gutter}px)}}@media all and (max-width: 768px){#rl-gallery-container-${i} .rl-basicgrid-gallery .rl-gallery-item{width:calc(100% - ${gutter}px)}}#rl-gallery-container-${i} .rl-basicgrid-gallery .rl-gallery-item{height:300px}#rl-gallery-container-${i} .rl-basicgrid-gallery .rl-gallery-item img{height:300px;object-fit:cover;max-width:100%;min-width:100%}
        }
        var styleSheet = document.createElement("style")
        styleSheet.setAttribute("id", "responsive-lightbox-basicgrid-gallery-inline-css");
        styleSheet.setAttribute("type", "text/css");
        styleSheet.innerText = styles
        document.head.appendChild(styleSheet)
    }
}

This code do not use the configuration in the plugin (I just want a fast solution) and use only basicgrid-layout, but for my needs are enough. Hope this can help someone else, and this solution (or a better one)’ll be included in a next release

• This topic was modified 11 months, 1 week ago by Miro Barsa.