lightbox works only 6 hours, - javascript problem?
Permalink
I have an image in a content block and have linked it (with link-tool) to a lightbox. On the live site it works 6 hours like the js script cache. After 6 hours, the image shows in a blank new browser window.
On the dev site, where all caches are turned off it works all the time.
On another site (caches turned on) lightbox works, with the only difference, that the link to the image is triggered from a textlink.
All sites have the same environment: c5.8.5.2 with Cloneamental theme.
In Pagetheme.php, the settings:
$this->requireAsset('javascript', 'core/lightbox/launcher');
$this->requireAsset('css', 'core/lightbox');
$this->requireAsset('javascript', 'core/lightbox');
are uncommented. If turned it on, there is no difference. I remember turning it off, when i learned, that the lightbox is included in the core.
Does anybody know what i'm missing? - Many thanks in advance.
blink
On the dev site, where all caches are turned off it works all the time.
On another site (caches turned on) lightbox works, with the only difference, that the link to the image is triggered from a textlink.
All sites have the same environment: c5.8.5.2 with Cloneamental theme.
In Pagetheme.php, the settings:
$this->requireAsset('javascript', 'core/lightbox/launcher');
$this->requireAsset('css', 'core/lightbox');
$this->requireAsset('javascript', 'core/lightbox');
are uncommented. If turned it on, there is no difference. I remember turning it off, when i learned, that the lightbox is included in the core.
Does anybody know what i'm missing? - Many thanks in advance.
blink
As @ConcreteOwl notes, likely related to the page cache.
There are 2 possibilities
1) The lightbox assets are loading initially, but not after 6 hrs.
2) The lightbox assets are loading, but failing to catch the image link.
Try disabling the JS cache, then using the dev console to show JS network traffic. That should confirm if the lightbox (magnific) script and css are loading before/after the 6hrs.
Also look in the dev console and see if there are any script errors before/after the 6hrs.
If the assets are confirmed to still be loading, the kind of interference to expect is from other scripts perhaps loading and executing in a different sequence when the cache refreshes. Often I have found badly configured soft-scroll and back to top handlers to be particularly common candidates for interfering with other links.
Another thing that could be causing a difference between sites and relating to sequence of scripts is a lazy-load of the image.
There are 2 possibilities
1) The lightbox assets are loading initially, but not after 6 hrs.
2) The lightbox assets are loading, but failing to catch the image link.
Try disabling the JS cache, then using the dev console to show JS network traffic. That should confirm if the lightbox (magnific) script and css are loading before/after the 6hrs.
Also look in the dev console and see if there are any script errors before/after the 6hrs.
If the assets are confirmed to still be loading, the kind of interference to expect is from other scripts perhaps loading and executing in a different sequence when the cache refreshes. Often I have found badly configured soft-scroll and back to top handlers to be particularly common candidates for interfering with other links.
Another thing that could be causing a difference between sites and relating to sequence of scripts is a lazy-load of the image.
ConcreteOwl, JohntheFish,
Thank you for your expertise.
I checked the browser console and get this:
Unfortunately I'm not good in code forensics, specially not in js.
The site is for a pharmacy with an newly added page for testing/inoculation page. There is an external script link to a booking site which might be a problem. I will test that tomorrow.
If you see the problem and if its a small thing let me know.
Thank you in advance.
Thank you for your expertise.
I checked the browser console and get this:
<script> !function(a,b){"use strict";b("a[data-concrete5-link-lightbox=image]").each(function(){var a=b(this);a.magnificPopup({type:"image",removalDelay:500,callbacks:{beforeOpen:function(){this.st.image.markup=this.st.image.markup.replace("mfp-figure","mfp-figure mfp-with-anim"),this.st.mainClass="mfp-zoom-in"}},closeOnContentClick:!0,midClick:!0})}),b("a[data-concrete5-link-lightbox=iframe]").each(function(){var a=b(this),c=500,d=400;b(this).attr("data-concrete5-link-lightbox-width")&&b(this).attr("data-concrete5-link-lightbox-height")&&(c=b(this).attr("data-concrete5-link-lightbox-width"),d=b(this).attr("data-concrete5-link-lightbox-height")),a.magnificPopup({type:"iframe",callbacks:{beforeOpen:function(){this.st.iframe.markup=this.st.iframe.markup.replace("mfp-figure","mfp-figure mfp-with-anim"),this.st.mainClass="mfp-zoom-in";var a=b.magnificPopup.instance;b(a.contentContainer).css("maxWidth",c+"px").css("maxHeight",d+"px")}},iframe:{patterns:{website:{index:"",src:"%id%"}}},closeOnContentClick:!0,midClick:!0})})}(this,jQuery); </script>
Unfortunately I'm not good in code forensics, specially not in js.
The site is for a pharmacy with an newly added page for testing/inoculation page. There is an external script link to a booking site which might be a problem. I will test that tomorrow.
If you see the problem and if its a small thing let me know.
Thank you in advance.
That suggests the asset for magnific is not being loaded.
Thanks John for your answer.
I cannot find the cause why it wouldn't load the magnific asset.
I'm using concreteowl's fix, - not caching that particular block. That fixes it, but doesn't solve it. Our designer suggests, that there might be old pieces of code somewhere, as a reminescence of updating versions since 5.7. I cannot verify due to lack of knowledge.
I cannot find the cause why it wouldn't load the magnific asset.
I'm using concreteowl's fix, - not caching that particular block. That fixes it, but doesn't solve it. Our designer suggests, that there might be old pieces of code somewhere, as a reminescence of updating versions since 5.7. I cannot verify due to lack of knowledge.
We have the same problem. Lightbox won't work when block is cached. We tried on a clean install 8.5.5 with Elemental.
After six hours, when clicked, the image shows the chosen image in a new window, no lightbox. in the same window.
After six hours, when clicked, the image shows the chosen image in a new window, no lightbox. in the same window.
Instructions are on this page...
https://documentation.concrete5.org/developers/working-with-blocks/c...