won't work with my thumbnail gallery

Since 1.5 the attribute used to trigger lightbox is data-rel, not rel.

In the second example – the data-rel should be in the link, not the image:

<a href="image link" data-rel="lightbox"><img class="ngg_displayed_gallery mceItem" src="https://www.architecturalvisualisation3d.co.uk/nextgen-attach_to_post/preview/id--160" alt="" data-mce-placeholder="1" /></a>

Hi, thanks for getting back to me, but that doesn’t work either.

It’s worth noting that the lightbox worked from the very start on my blog.

Just not on the gallery page.

Also worth noting that it is a NGG gallery, not an image.

i dont see this plugin’s requisite files being included on your gallery page (only on ur blog page). Did u set this plugin up correctly to respond to galleries?

thanks for checking in.

well, I just installed it and checked a few options. Any idea what I should do to fix this?

Just re-checked your gallery and noticed the links <a> in the source are spread out across multi-lines. What i mean is for every gallery image’s <a> it actually takes up 8 lines just for its open tag. I’ll bet good money this plugin’s regex modifier expects single lined anchors. I will check for ya…

Update
Yup…i think i’m right. I think that is your problem. I could be wrong but the plugin author didn’t realize that the <a> tag may spread across multiple lines and so in your case on your gallery page it wont trigger. Curious, lets try a test. Locate, and open this file:

responsive-lightbox\includes\class-frontend.php

We are going to make a few simple changes. So before you do make a backup of this file. Once u are done these changes you want to put it on your website server.

So, we are going to make two changes, the first on line 82 and the 2nd on line 179. The new change is identical for line 82 and line 179.

Old Line:

preg_match_all( ‘/<a(.*?)href=(?:\’|”)([^<]*?).(bmp|gif|jpeg|jpg|png)(?:\’|”)(.*?)>/i’, $content, $links );

New Line:

preg_match_all( ‘/<a(.*?)href=(?:\’|”)([^<]*?).(bmp|gif|jpeg|jpg|png)(?:\’|”)(.*?)>/is’, $content, $links );

All i did was add the letter “s” (its a regex modifier which allows for the dot metacharacter to match new lines).

Let me know if this resolves your problem. If not then u can put it back to the original file and we can keep trying to figure it out.

Cheers
Kimberly

PS – i dont have the plugin installed so i am only going by code observations.

Thanks for taking the time. I did that and got this error:

Parse error: syntax error, unexpected ‘exit’ (T_EXIT) in /home/threecoa/public_html/archvis3d/wp-content/plugins/responsive-lightbox/includes/class-frontend.php on line 1

not sure if that’s because I opened it in notepad and saved it.

in any case, I don’t think getting into the guts of this plugin is worth while. Literally all I want is a lightbox that’s dark. The NGG one is white and I used to be able to make it dark but they make it harder and harder with every update to tweak it.

This should be much easier. So check it out here.

and I want to change the #fancybox-overlay (semi opaque background that sits behind an image once it’s in lightbox mode) from light grey to dark grey. It’s currently generated via javascript I think because I can’t override the CSS for the life of me.

Would be much appreciated if you could figure that out!

Sure..

Add the following to your theme’s style.css file:

.ngg-gallery-thumbnail img
{
background-color: dimgray !important;
border: 1px solid dimgray !important;
}
#fancybox-overlay
{
background-color: dimgray !important;
}

Change dimgray to whatever you like.

well, I’m out of ideas. I’ve just hardcoded both the css AND the js file to make the overlay #111 and it hasn’t changed a thing. Total mystery.

Did u include my rules shown above into your style.css file? No changes are done to a js file. I checked your gallery page and didn’t see anything changed in your style.css file. Let me know when u do and i will check the site.

all I need is the overlay. I have this in my style.css:

#fancybox-overlay
{
background-color: #111;
}

Ahh you forgot to include the !important suffix.

So it should look like this:

#fancybox-overlay
{
background-color: #111 !important;
}

Done, still no change.

Methinks we are defeated.

LOL! Not quite yet. It appears your server is caching your old style.css file at the moment. I can only load your new change via a query string. So it could take a few minutes (depends on your server) before we see the official change. For example when i do style.css i see only your original: “background-color: #111”. but when i do style.css?z=1 i see: “background-color:#111!important”. This means your server is serving (at the moment) your old style.css. This is expected.

Ahh i checked the headers…you are serving it via cloudflare and it says the style.css wont expire until 12:48am (est) tonight…so you will have to jump over to cloudflare and invalidate the file so it can refresh and serve the newer one.

I thought it might be Cloudflare. I’ve had to email my host support because I’ve just changed hosts and can’t change my settings yet. I’ll see what happens when they get back to me. Thanks for your help thus far!

Not a problem. Some time today the change will automatically take effect — when the cache server starts using your newer file. And u’ll see the overlay is now a dark background. Ahh just noticed u are in the UK..thought u were in North America..sorry about that.

Cheers
Kimberly