Need Ajax/Javascript popup off of ACF field WordPress
- SOLVED
I have a section of code that is working fine. It is looping in information from Advanced Custom Fields on other pages. I'll say it another way so this make sense:
Have a custom post type for products. Each product has an image and description. The code below is for an ACF repeater field on a NEW page, that allows someone to select multiple products, and it then pulls the product image and links the image to the products page.
<?php
//Loops through the repeater
while (have_rows('favorite_oils')) {
the_row();
//fetches the post object field. Assumes this is a single value, if they can select more than one you have to do a foreach loop here like the one in the example above
$oil_object = get_sub_field('select_oil');
if($oil_object){
//Fetch the image field from the oils post
$image = get_field('main_image_link', $oil_object->ID);
}
//Echo out the image with the medium size. Change this as you like!
echo ' <div class="team-oils-small"><img src="' . $image . '" /></div>';
}
?>
Now, instead of linking to the product's page (the custom post type) when clicked, I want to pull another ACF field entitled 'description' from the custom post type, and show that in a nice ajax type popup on the existing page that will not be blocked by browsers.
Hopefully that makes sense.
Answers (4)
Arnav Joy answers:
so you want to open image in lightbox ??
Kyler Boudreau comments:
a light box is fine. I already have a light box plugin installed on the site, so would rather not install another. email me if you'd like to take a look at it. thanks!
Reigel Gallarde answers:
I'm not sure, but my suggestion is to keep your product page link.
Then on your loop just make a div containing your description.
Just hide the div of the description with css then use something like fancybox to display the description as popup.
That should be an onclick of the product page link.
less hassle..
Hai Bui answers:
Try this:
Install "Easy fancybox" plugin, you can add Fancybox manually, but installing this plugin is easier.
<?php
//Loops through the repeater
while (have_rows('favorite_oils')) {
the_row();
//fetches the post object field. Assumes this is a single value, if they can select more than one you have to do a foreach loop here like the one in the example above
$oil_object = get_sub_field('select_oil');
if($oil_object){
//Fetch the image field from the oils post
$image = get_field('main_image_link', $oil_object->ID);
}
//Echo out the image with the medium size. Change this as you like!
echo '<div class="team-oils-small"><a class="fancybox-inline" href="#product-description-' . $oil_object->ID . '"><img src="' . $image . '" /></a></div>';
echo '
<div style="display:none" class="fancybox-hidden">
<div id="product-description-' . $oil_object->ID . '">
<!-- add the product description here -->
</div>
</div>
';
}
?>
dimadin answers:
One of the reasons I like Bootstrap is because common elements that are used on the web are already included in it, for examples modals or popovers that you need (http://getbootstrap.com/javascript/) so no need for external libraries.
In case you are using it, you can use these with combination of what Hai Bui proposed.