[Resolved] Link Backend Image Field to button on frontend

[Author]

Posts

[DanielS9588]

I am trying to: Add a field to a product that will be shown on the frontend via a button

I visited this URL: hidden link

I expected to see: The selected image for product to appear in a lightbox.

Instead, I got: No image appearing

Attached are images of what I have setup. I just

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Daniel,

Thank you for contacting our support forum.

So what you are trying to achieve is to add the image to the product on the frontend and then users can click on this image?

What should happen when users click on this image?

Please let me know.
Thanks,
Shane

[DanielS9588]

Shane,
I trying to achieve the opposite. I want the Admin to add an image via field on the back-end (Add/Edit Product).
Then the Visitor can click on the button "NUTRITION" and the nutrition label will appear in a lightbox format.

In the images I had attached. You will see in image "02-add image to product" is where the Admin will add the Nutrition label image to the product.

In image "03-Button that is linked to image on front end" that button will be linked to the nutrition label image that the admin applied to the product.

Image "04-code for template" is what I had at the time of submitting this ticket.

I've since then been hacking at it and I've attached another showing what I've done. Still unsuccessful.

If you go to
hidden link
You can scroll to - PRE-SLICED BLACK FOREST BONELESS SEASONED HAM (3rd item down).
Click on the nutrition button and see that it gives an error, but in the address bar you'll see that it is trying to link to the image.

I hope this helps.
Thank you.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Daniel,

What you can do is to utilize a bootstrap modal.

<a class="btn btn-primary" data-toggle="modal" data-target="#[wpv-post-id]">Activate Modal</a></div>
  </div>

<!-- Modal -->
<div class="modal fade" id="[wpv-post-id]" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">My Title</h4>
      </div>
      <div class="modal-body">
---------------------------
Content goes here
---------------------------
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>

      </div>
    </div>
  </div>
</div>

What you need to do is add this to the view or page that is displaying the button.

I could help with the setup of this if you like. The private fields will be enabled for your next response.

Thanks,
Shane

[DanielS9588]

Shane,

I apologize. The code you provided did the trick and all is in perfect working order. I thought I was responding to another support ticket.

Thanks again for the insight and help,