Single Image Not Working

Try replacing rel="lightbox" with data-rel="lightbox"

That is how I have it right now after looking through the support topics. No luck though.

<div class="short-poster"><a href="https://motivedirect.net/images/posters/a_sinister_nature_poster.jpg" data-rel="lightbox"><img src="https://motivedirect.net/images/posters/a_sinister_nature_poster.jpg" alt="click to enlarge" title="click to enlarge"/></a></div>

Here is a link to a page on my site where it used to work. https://motivedirect.net/a-sinister-nature

It works on the YouTube video on that page, but that is using a different plugin. I deactivated it to see if maybe there was a conflict….didn’t matter though, still wouldn’t work even after clearing my browsers cache.

It works fine in blog posts though: https://motivedirect.net/junetopia-2015 Just doesn’t seem to work on Pages anymore.

I created a Test Page and added an image using “Add Media” from the Media Library while using the “Visual” editor and it works perfect, just like it always has. But if I try to write up HTML using the “Text” editor, it will not open the image in the lightbox. What the heck am I doing wrong?

Pls try to use the jquery version that comes with WP instead of this outdated one:

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=4.3

Then try again.

Regards,
Bartosz / dfactory

How do I go about doing that? I have never changed that before. Just using whatever came with everything.

Hi again! I checked your site and my first thought was the same as @dfactory that you are linking to a very old jQuery verion (latest is 1.11.x = 2015, yours is 1.7.2 = 2012) but upon further inspection i do find it interesting that your posts work fine with the same older jquery and so jquery is not the issue. I did a firebug inspection and see no errors on your page so RL isnt experiencing any problems there.

Btw, since you are indeed using the latest WP and it already comes with the latest jquery its possible you have a plugin that is overriding and including this older jquery (maybe u did this a long time ago and forgot about this plugin?) or you have:

wp_deregister_script('jquery');
wp_enqueue_script('jquery', "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js",array(),null);

in your functions.php. Check for it in that php file and remove them. This will allow WP to include the newer jquery.

Anyway, back to your problem. I am going to do some more hunting around and will get back to you.

Btw, I do find it interesting that when i modify your post’s data-rel attribute from lightbox-0 to lightbox the image RL pop up finally works properly.

OK, so I seem to have it working. This is what I did.

I went and looked for the jquery, which wasn’t in the functions.php. I found it in the library.php. I yanked it out and then checked the Page source and it was no longer using 1.7.2, and was now running 1.11.3 which I assume is the version that comes with WordPress.

After correcting that issue, I then checked the image….still did not work. So I looked at it with inspect element and seen that that the data-rel was using “lightbox-0” even though I had it as “lightbox”. So I edited it in inspect element back to “lightbox” like I have it on the page and it worked perfectly.

But once I refreshed, it went back to “lightbox-0”. So I went into the RL setting, changed the “Selector” from “lightbox” to “rl-lightbox” and updated the data-rel on the page and it worked, though it was now showing like this: data-rel=”rl-lightbox-0″. It was working though. So I looked at another one of my pages and I wasn’t even using rel or data-rel. I had it like this: lightbox=”great_self_exile” which was the name of the page and it is working just fine. So I added lightbox=”a_sinister_nature” and removed the data-rel and its working fine.

This is what my HTML looks like:

<div class="short-poster"><a href="https://motivedirect.net/images/posters/a_sinister_nature_poster.jpg" lightbox="a_sinister_nature"><img title="click to enlarge" src="https://motivedirect.net/images/posters/a_sinister_nature_poster.jpg" alt="click to enlarge" /></a></div>

Though it looks like this when you inspect element:

<a href="https://motivedirect.net/images/posters/a_sinister_nature_poster.jpg" lightbox="a_sinister_nature" data-rel="rl-lightbox-0" title=""><img title="click to enlarge" src="https://motivedirect.net/images/posters/a_sinister_nature_poster.jpg" alt="click to enlarge"></a>

I don’t know….its working just fine now…..I am sure I am still doing it wrong….but it is working.

Nice story ??

The rel attribute works because we’re doing a backward compatibility.

Hard to say about your other lightbox options – for me looks like a piece of code from your theme or other plugins is diong some work here.

Anyway, I’m glad it works – marked as resolved.