Any lightbox other than colourbox not working

There does seem to be some sort of a plugin conflict, though it is impossible for me to say what that is.

Basically when you look at Google’s URLs, they don’t have the file extension on them. Now, most lightboxes handle this situation by passing an explicit parameter to the script saying, “Treat this file as an image”, or “Treat this as a video”. Photonic has this already coded in. E.g. in every thumbnail you will see that there is a parameter that says data-featherlight-type="image".

However, the only way this will not work is if you have another script that hijacks the “click” behavior for links.

Is there any way you can turn off caching / minification for this particular page? Currently your scripts are all bundled as one, so I have no way to determine which of your scripts might be causing a conflict.

I’m using smush and merge+minify+refresh – but why would colorbox still work in this case ??I’ll try disabling all plugins, rebuild one by one. It might be some js in my theme itself??

• This reply was modified 5 years, 9 months ago by andyro.
• This reply was modified 5 years, 9 months ago by andyro.

Colorbox probably has internal handling to treat everything as an image unless a type is explicitly defined for it.

Bingo. Either Smush or Merge+Minify+Refresh was the culprit. Can I send you some BTC? Last $100 I had is worth only $50CDN now lol

• This reply was modified 5 years, 9 months ago by andyro.

PS – I super appreciate you taking a look at this on a Friday night – really love fixing stuff while I’m in the headspace to do battle with my site!!

??

Just leave a review if you are happy – that will do!

Perfect – no problem.Thank-you.

ooh – one more quick question while you’re here – I LOVE the effect of the Mosaic gallery – but it seems so much slower to load, is there anything I can do to goose it a bit? I’ve changed the same page to that gallery style now… (review posted btw).

Sure – there is a setting called “Tile size” that shows up when you are creating a gallery. You will see it on the screen right after where you pick your layout. By default the mosaic layout uses the full-sized image, but understandably this will slow you down if you have many big images.

If you set a tile size of say 400px, an image of that maximum dimension will be used to render the mosaic layout. So a smaller image will be fetched from Google and this will save you considerable bandwidth.

Note that the mosaic layout works using JavaScript and is computationally intensive – so even with optimization it might be slower than the random justified grid, which is in turn slower than the masonry layout.

Awesome. I want to zip it now. No more questions. But I just can’t help myself. Is there a way to use a different loadbar – your apple-style snake-eating tale has a white div/box behind it – any way to choose a snazzier one? I know, fussy, fussy. But it’s an architecture site – I’m trying to make everything better all the time ?? Will try the tile size, great tip.

Not sure if I followed the question. Photonic’s spinner is something that looks fairly vanilla and is more like a spinning wheel (https://aquoid.com/news/wp-content/plugins/photonic/include/images/loading.gif) rather than a snake-eating-its-tail.

Is that what you are talking about? If you want to customize that you can’t “choose” through options, but you can define one using custom styles under WP customizer (Appearance → Customize → Additional CSS). The div class is .photonic-loading, which sets a file called loading.gif as its background. If you assign a different background via the custom styles, that will take effect.

Let me know if you need help with the CSS, but I get the sense that you are referring to a different loading icon.

Nice – sorry my description was bad – spinning gif yes. Maybe it’s easier to simply replace the .gif with say: https://loading.io/spinner/dual-ring/ (that features transparency so no white background) – I know it would get wiped when your pugin updates…. so if you don’t mind sharing the css and I can post another loading gif somewhere to call… but it’s late, I’m cashing out, thanks for all your help!

https://andythomson.ca/wp-includes/images/loading.gif (just a test, this one is ugly but it”s a placeholder)

Source in CSS:

<div class=”lds-css ng-scope”><div style=”width:100%;height:100%” class=”lds-dual-ring”><div></div></div><style type=”text/css”>@keyframes lds-dual-ring {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes lds-dual-ring {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.lds-dual-ring {
position: relative;
}
.lds-dual-ring div {
position: absolute;
width: 80px;
height: 80px;
top: 60px;
left: 60px;
border-radius: 50%;
border: 12px solid #000;
border-color: #cd2325 transparent #cd2325 transparent;
-webkit-animation: lds-dual-ring 1s linear infinite;
animation: lds-dual-ring 1s linear infinite;
}
.lds-dual-ring {
width: 200px !important;
height: 200px !important;
-webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}
</style></div>

Is there a way to call ^ that?