Image button to open as a popup for definition

[mitchellc]

This information may already be available but so far, I have not been able to find it. I am attempting to upload an image, make it a button, and when the student clicks on it, I want it to open a pop-up with a definition based on the image. So far, I have uploaded the image and added the text that I want to open in the pop-up, but I can't get the image to remain static and open to show the definition. I have manipulated the code and this is what I have so far:

<div id="dialog_for_link1" class="enhanceable_content dialog">A single parent family is defined as one adult and one or more children</div>
<p><img src="https://lisdtx.instructure.com/courses/161822/files/12587133/preview" alt=" " width="250" height="167" data-api-endpoint="https://lisdtx.instructure.com/api/v1/courses/161822/files/12587133" data-api-returntype="File" /></p>

I am not a trained coder but am learning as I go. I would appreciate any help in resolving this issue.

[chofer · Accepted solution]

Good evening, @mitchellc ...

Are you trying to create some kind of "lightbox" effect in your course?  You may have already seen this, but in case you haven't, I wrote a blog post back in 2016 that gives directions on how to accomplish something like this, and you might be able to do something similar for your needs: Lightbox Effect.  If you have any questions about my blog post, you can post your comments there, and I'll do my best to help answer.  Hope this will help you a bit!  Take care...

[mitchellc]

Thank you for your response. I have actually been using information from your Lightbox Effect post to try to manipulate the code. One difference is that I don't want to have a "click to see full image" button because I want my image to act as the button, and when students click on it, the dialog/popup will contain the definition only. I just am having trouble figuring out what code to add/change to make the image act as the button without creating an additional link for the popup. I have been able to add the text and the image, but I just can't seem to make my image behave in a way that the definition will open as a popup/dialog.

[kmeeusen]

Hi @mitchellc 

Here is the code snippet I use for tool tips......

Code Snippet

<img title="GIF of panda playing a banjo - ROCK ON Dude!" src="$IMS-CC-FILEBASE$/Banjo%20panda.gif" alt="Banjo panda.gif" data-api-endpoint="https://resources.instructure.com/api/v1$IMS-CC-FILEBASE$/Banjo%20panda.gif?canvas_download=1" data-api-returntype="File" /></p>

How to Do This

1. Add your image like normal. How do I embed images from Flickr Creative Commons? (Links to an external site.) or How do I embed images from Canvas into the Rich Content Editor? (Links to an external site.)

2. Change to HTML editor. How do I edit content in the HTML view in the Rich Content Editor? (Links to an external site.)

3. Add title="Text you want to display in the tooltip" somewhere in the image tag (Yellow highlighted text in snippet above).