How does this work?

It’s lightbox. Add some image links to your posts and you’ll see.

I did. I added two photos, one embedded in the body of the page text and one added through a custom field. Clicking on either of them does nothing.

It will not work for custom fierld unless you add rel=”lightbox” to image links.

Question do you mean by body of page text. The editor? Then it should work. Make sure it’s image link, not image, not attachment link.

For the images in the page text, I simply used the standard “Add Media” link in the editor, but the “Link to” field was defaulting to “Custom URL” and I never noticed…that’s on me. It works if it’s got the proper image link.

For the custom field (which shows up in a sidebar), I have this in the template file:

<a href="#" class="dummy" rel="lightbox"><?php $image = get_field('sidebar_image'); ...

This is because “lightbox” is the default selector. The code works fine to display the image on the page; but clicking on it doesn’t display the image in a lightbox. I get the overlay and the close icon, so SOMETHING is working, but the image never shows. In Safari I get a spinner that never stops; in Chrome and Firefox, no image and no spinner.

This, by the way, is on a page, not a post. Does that make a difference?

Okay, some progress.

If I leave the anchor tag in its present generic state

<a href="#" ...

it won’t return anything at all, since it can’t tell the javascript what image to look for.

If I use the same snippet of code that sends the proper source location to the image tag, and configure the template file’s anchor tag like so:

<a href="<?php echo $image['url']; ?>" ...

it doesn’t work; doing so returns this in the page source:

<a href="" class="dummy" rel="lightbox"> <img src="https://the/proper/path.jpg" alt="" />

I don’t know why it sends the right path to the image tag and sends nothing to the anchor tag.

If I simply paste the actual image path into the template file, it works fine. So the problem is configuring the anchor tag to have the proper path to the image.

You wrote above that using custom fields will work only if you add the rel attribute. I’ve done that; the problem is the path. How do other users get around this problem when they’re using images loaded via a custom field?

hi
i have the same problem, it doesn’t work for me too, pligin is install and active, u can check it on my site. https://www.mashin-baz.com/magazine/%D8%B3%D9%88%D8%A8%D8%A7%D8%B1%D9%88-%D8%A8%DB%8C-%D8%A7%D8%B1-%D8%B2%D8%AF-subaru-brz or https://www.mashin-baz.com/news/%DA%86%D8%B1%D8%A7%D8%BA-%D8%B3%D8%A8%D8%B2-bmw-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AA%D9%88%D9%84%DB%8C%D8%AF-x2

I figured it out. The php code was copied from another usage where the anchor tag was irrelevant — it works fine, but not for this purpose. The anchor tag is outside the php, so the anchor tag was trying to call a variable that wasn’t defined yet (I guess…not being a programmer, I’m not sure if the terms are correct). Simply move it inside the php, and it works.

From this:

<a href="<?php echo $image['url']; ?>" class="dummy" rel="lightbox">
<?php $image = get_field('sidebar_image'); if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?></a>

..to this:

<?php $image = get_field('sidebar_image'); if( !empty($image) ): ?>
<a href="<?php echo $image['url']; ?>" class="dummy" rel="lightbox">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</a><?php endif; ?>