The content in ACF appears to be missing when displayed in the fancybox

I have configured ACF to appear in a fancybox. The fields are being pulled in (as I can see the hardcoded header information), but nothing from the ACF appears. I have linked it to call an ID, which is then associated with the section that should be displayed when clicked.

My expectation is that clicking on the image will open the fancybox and show the ACF image and content. Instead, I only see the header fields with no ACF content.

I attempted removing the display none from the class.

Trying hard-coding a basic anchor tag linking to a paragraph seemed to work fine, but as soon as I include ACF information, it malfunctions.

Even when I removed all PHP and manually coded an image and content, it worked perfectly. It simply does not respond well to the PHP code calling my ACF.

<a href="#popup" data-fancybox>               
            <img class="image" src="<?php the_field('project_image', get_the_ID()); ?>" />
        </a>
<section id="popup">
            <img src="<?php the_field('project_image', get_the_ID()); ?>">
                    <h3>About</h3>
                    <p><?php echo $about_content;?></p>
                        <hr class="hr-left">
                        <h3>Features</h3>
                    <p><?php echo $features_content; ?></p>
                    <a class="btn secondary-btn" href="<?php echo $code_reference_url; ?>"><?php echo $button_text; ?></a>
</section>

Upon clicking the image, a fancybox should appear with the content from the "popup" division. However, currently, the lightbox opens but displays empty fields.

Answer №1

After some troubleshooting, I managed to figure out the issue at hand. It turned out that the necessary information was missing within the loop. The solution is provided below:

<?php while ($loop->have_posts()) : $loop->the_post();
                $about_content = get_field('about_content');
                $features_content = get_field('features_content');
                $button_text = get_field('button_text');
            ?>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Strategies for bypassing Jquery form validation within a single form element

I want to implement form validation for all form elements, but I need to exempt one if a specific checkbox is checked. HTML <form id="reg_form"> <div class="control-group"> <div class="control"& ...

The duration of user engagement on a website with an embedded iframe

I am working on measuring the time users spend on web pages, excluding the time they navigate away from the browser. While exploring open source libraries like Timejs, I noticed that these tools do not accurately track user time when they are watching vid ...

What steps can be followed to create functionality for having three pop-up boxes appear from just one?

I have implemented code that triggers pop-up boxes at the bottom of the screen when a user clicks on a name from a list displayed on the top right corner of the screen. <!doctype html> <html> <head> <title>Facebook Style Popu ...

When the icon is clicked using `ngClick`, we are triggering the `refresh` event, but unfortunately, it is not functioning as expected

Currently, I am utilizing Angular and jQuery float to create a canvas graph. The graph itself is composed of canvas elements. The issue at hand involves the desire to redraw the canvas upon clicking on a specific icon. The click event handler in question ...

Error in identifying child element using class name

I need help accessing the element with the class "hs-input" within this structure: <div class = "hbspt-form".......> <form ....class="hs-form stacked"> <div class = "hs_firstname field hs-form-field"...> <div class = ...

Remove Request (MongoDB, express, handlebars)

Struggling with implementing a delete request in my application. I have a database filled with reviews that I manipulate through my app. Currently, I'm attempting to create a function that will remove a document from the database and then redirect th ...

What is the reason behind receiving NaN as the outcome of a calculation involving three legitimate numbers?

Why am I getting a NaN error in this code snippet even though all the values are valid numbers? I'm feeling confused and frustrated xD. Can someone help me find my mistake here? private getAllData = (res: any) => { this.setState({ priceBinance ...

The Angular2 application successfully loads on the first attempt, but encounters an error when attempting hot-reloading, displaying the message "The selector 'app' does not correspond to any

SOLVED: The issue I encountered was related to my package.json. I discovered that it was an outdated version missing some of the necessary scripts and dependencies, unlike the one I referenced in my post. Oddly enough, I was still able to run the scripts a ...

Using AJAX to add an event listener and passing parameters to a separate function

Short and sweet - I've got a loop that creates a series of dynamic buttons, and when one of them is clicked, I need to pass its id attribute to another file to generate a new page on the fly. Here's the code snippet: for (var i in data.contacts ...

employing the d3.queue method to defer execution until receiving the AJAX response

Seeking examples of integrating AJAX, d3, and PHP to extract data from a database and create graphs. Any guidance would be appreciated. I am currently using d3 to generate a force chart based on database information retrieved through AJAX and PHP. I have ...

Ways to ensure that a function operates independently for each cloned div and not the original

I'm facing an issue where a jquery function needs to be executed when the drop-down is changed. However, the problem arises when I clone the div element and make changes in the drop-down of the newly cloned element, the effect takes place in the first ...

execute ajax within a standalone javascript function

I am just starting to learn about jquery and ajax, and I have a specific requirement to call ajax from a separate javascript function. The issue is that the JSP file is dynamically generated and the button IDs in the JSP file are also created using a for l ...

Unable to update due to outdated response call causing issues

I am currently in the process of updating outdated response calls and have encountered a peculiar issue where the response is not being properly ended. Typically, I would use : res.send(200, {message: 'Location Updated'}); However, this method ...

An array containing numerous "case" triggers

var message = "hello [[xxx]] bye [[ZZZ]]" var result, re = /\[\[(.*?)\]\]/g; while ((result = re.exec(message)) != null) { switch (result[1].toLowerCase()) { case "xxx": console.log("found xxx"); br ...

Utilizing async/await in React Redux for geolocation functionality

While attempting to retrieve the lng and lat by using geolocation with async and await, I encountered a situation where the promise was not awaited before it was passed to the reducer. Instead, another promise was returned. I had hoped that by using await ...

Is it possible to execute a function defined within an eval() function using setInterval()?

const evaluation = eval(document.getElementById("codearea").value); setInterval(evaluation, 10); I am seeking a way to access a function that is declared within the eval function, for example: setInterval(evaluation.examplefunc, 10) I attempted ...

The process of running npm build is not resulting in the creation of the bundle.js file

I've read through many Q&A threads where people are facing the same issue, but I still can't figure out what's wrong with my code. When I run 'sudo npm run build', no bundle.js file is being created.** This is my code: index ...

When utilizing Vuex state within a computed property to trigger the opening of a modal, any modifications are neglected, resulting in the

Within my codebase, I have implemented a dynamic method for adding modal states to the Vuex store and activating them throughout the application. Despite successfully changing the state, I encountered an issue where clicking a button that dispatches the to ...

directive behaves unexpectedly in bootstrap grid

I'm a new AngularJS user:). Having an issue with my directive that controls popovers for icons. It's functioning properly in one location but malfunctioning in another (blinking and causing the popup to shift down and cover the icon). HTML temp ...

My requests are failing because jQuery AJAX does not send hashtag symbols

There's a challenge I'm facing while working with Elixir Phoenix and React.JS. The Token I have includes hashtags, and when I send a request to verify it, the hash symbols and everything after them are not being sent, causing the request to fail. ...