How to create image pop up in canvas

[vrs07nl]

Does anyone know how to get an image on a canvas page become a pop up so that full detail can be seen

e.g for this

I know there is at feature idea at https://community.canvaslms.com/ideas/5197 but i need a solution now if possible

[Chris_Hofer · Accepted solution]

Hi vrs07nl​...

I have a bit of a solution for you, but it's not pretty.  So, I'll start off by saying that if anyway has better solutions, please post them here so we can all learn together.  Here's what I did...

First, I created a new page in my sandbox course.  Insert your photo on the page where you want it, and then grab a corner of the image to shrink the size...hopefully keeping it to scale.  Put a line or two of blank space after the image.  Next, I pasted the following code in the HTML side of the page under where the code for the inserted image is:

<div id="dialog_for_link1" class="enhanceable_content dialog">Bacon ipsum dolor amet pancetta cow...</div>

<p><a id="link1" class="Button Button" style="width: 20%;" title="This is the button description when you roll your mouse over it." href="#dialog_for_link1">Click to Learn More</a></p>

When you click on the link to return to the "Rich Content Editor" view (leaving the HTML view for a bit), you'll see something like this:

Bacon ipsum dolor amet pancetta cow...

Click to Learn More <-- NOTE: this will be a button when you save the page.

Somewhere inside the "Bacon ipsum" text, click your mouse on where you'd like to insert the same image.  Add the image the same way you did above.  Remove any of the "Bacon ipsum" text that isn't needed.  (NOTE: All the red text is completely customizable.)  When you save your page, you'll see your small image and then a button that says "Click to Learn More" (I've changed the text of my button in this image.)

When you click on that button, you'll see the full-size image in a pop-up window within Canvas.  The pop-up box might be a bit small at first, but you can grab the bottom right corner to expand the size of the box to see the entire image.

Like I said, this is a pretty rough idea.  It's not exactly the "lightbox" idea that you are ultimately trying to accomplish (as when I was searching the Internet for ideas, most lightbox code required a combination of HTML, CSS, and JS), but it may work for you.

Hope this helps!!!

[Chris_Hofer · Accepted solution]

Hi vrs07nl​...

I have a bit of a solution for you, but it's not pretty.  So, I'll start off by saying that if anyway has better solutions, please post them here so we can all learn together.  Here's what I did...

First, I created a new page in my sandbox course.  Insert your photo on the page where you want it, and then grab a corner of the image to shrink the size...hopefully keeping it to scale.  Put a line or two of blank space after the image.  Next, I pasted the following code in the HTML side of the page under where the code for the inserted image is:

<div id="dialog_for_link1" class="enhanceable_content dialog">Bacon ipsum dolor amet pancetta cow...</div>

<p><a id="link1" class="Button Button" style="width: 20%;" title="This is the button description when you roll your mouse over it." href="#dialog_for_link1">Click to Learn More</a></p>

When you click on the link to return to the "Rich Content Editor" view (leaving the HTML view for a bit), you'll see something like this:

Bacon ipsum dolor amet pancetta cow...

Click to Learn More <-- NOTE: this will be a button when you save the page.

Somewhere inside the "Bacon ipsum" text, click your mouse on where you'd like to insert the same image.  Add the image the same way you did above.  Remove any of the "Bacon ipsum" text that isn't needed.  (NOTE: All the red text is completely customizable.)  When you save your page, you'll see your small image and then a button that says "Click to Learn More" (I've changed the text of my button in this image.)

When you click on that button, you'll see the full-size image in a pop-up window within Canvas.  The pop-up box might be a bit small at first, but you can grab the bottom right corner to expand the size of the box to see the entire image.

Like I said, this is a pretty rough idea.  It's not exactly the "lightbox" idea that you are ultimately trying to accomplish (as when I was searching the Internet for ideas, most lightbox code required a combination of HTML, CSS, and JS), but it may work for you.

Hope this helps!!!

[vrs07nl · Accepted solution]

Thanks Chris !

I will try it out later today

[vrs07nl]

Dear Chris

Thanks for your tip - it works for us.

In order to get the image to appear larger we updated our css file to set width to auto instead of 300px -- still have to drag to get full view but image is bigger

[lopezjamie]

Hi!

Thanks so much for this!

Question: I noticed in both these examples I have to click the "x" to close the pop-up window TWICE: two windows come u, one with the text information, and a second behind it with no info, but I have to click the "x" to close that window too.

Any advice on why this is happening an dhow to get rid of it? Thanks!

[lopezjamie]

Has anyone been able to make this with an image as the initiator / link?

I've bene trying with the examples here and no joy. 

Thanks!

[kblack]

This is really cool  @Chris_Hofer ​!  You should post this in the Instructional Designers groups or perhaps elsewhere appropriate.

[vrs07nl]

The css code we used did ensure the image auto sized but unfortunately it also meant our users coudl not access the Ask the Tutor or Raise a ticket  tabs in the canvas help area. The pop ups only half appeared and it was not possible to enlarge by a grab or by refreshing page. So we had to remove the line of code ... so if anyone can find a way round this...

}

.ui-dialog{position:absolute;padding:.2em;width:auto !important;overflow:hidden}

[Robbie_Grant]

vrs07nl​,

Were you able to find an answer to your question? I am going to go ahead and mark this question as answered because there hasn't been any more activity in a while so I assume that you have the information that you need. If you still have a question about this or if you have information that you would like to share with the community, by all means, please do come back and leave a comment.

Robbie

[vrs07nl]

 @Robbie_Grant ​

We were able to get the image to open in the page like a document does but had to abandon the pop up element as the css prevented users using the help tab in canvas ... so partial solution -

[jcole3]

Has anyone figured out a way around the 300px width limit? I have been doing my best to figure out where that is set based off of my browser's inspector (see image). But so far I haven't been able to pin anything down - but I did get a few interesting results in our test instance while messing around. I am not using the method listed above, rather one that I found in the Canvas Hacks course:

<div id="dialog_for_Profile" class="enhanceable_content dialog">

    <img style="display: block; margin-left: auto; margin-right: auto;" src="https://belhaven.instructure.com/courses/10070/files/484855/download" alt="profile.png" width="700" height="693" data-api-endpoint="https://belhaven.instructure.com/api/v1/courses/10070/files/484855/download" data-api-returntype="File" /></div>

<p style="text-align: center;"><a id="link1" class="Button" href="#dialog_for_Profile">Example of Instructor Profile</a></p>

[dgillis]

Did anyone figure out how to get around the 300px limit for the popup window?

[tod_duncan]

I wanted a modification of this where my popups contained text and I wanted several of them. Partly this was a learning exercise for me in HTML. You can add multiple popups by duplicating the OPs syntax and then changing the link# for each iteration (e.g. link1, link2, link3) and instance of the link# syntax.

Here's what I ended up with to give me three popups sprung by the button: (copy and paste into HTML editor of any Canvas page)

<p>In a think-pair-share (TPS) during class you receive a prompt or a question, think about it for a short while, write down your response, and then discuss your and your neighbors response. Doing this alone involves a modification of the approach.</p>
<p>It is still key to make sure that you force yourself to write something down. Otherwise, when you go onto the last step, you can easily convince yourself you 'got it', when really, you just had some kind of vague familiarity with the topic or idea.</p>
<p>Below are three prompts. Think about the first for about 30 seconds, write something down (get pen and paper and write!), and then click on the button to reveal the expert answer. You're not done quite yet. Critically compare your response to the one provided. Ask what you are missing, how your articulation is different than what was provided, and how you can improve your answer. The most important part of this is your reflection on your answer compared to the given answer and not memorizing the given answer (although being able to put it in your own words is very important).</p>
<p>When you've done the first, go onto the second and the third.</p>
<ul>
<li><span style="font-size: 18pt;"><strong>What is evolution?</strong></span></li>
</ul>
<div id="dialog_for_link1" class="enhanceable_content dialog">Evolution is when allele frequencies change in a population over time</div>
<p><a id="link1" class="Button Button" style="width: 20%;" title="Clicking will reveal a modeled answer by the instructor." href="#dialog_for_link1">Click for the answer</a></p>
<ul>
<li><span style="font-size: 18pt;"><strong>What is natural selection?</strong></span></li>
</ul>
<div id="dialog_for_link2" class="enhanceable_content dialog">Natural selection is when organisms that are better adapted to their environment, relative to other organisms in the population, survive and reproduce more offspring than other organisms in the population.</div>
<p><a id="link2" class="Button Button" style="width: 20%;" title="Clicking will reveal a modeled answer by the instructor" href="#dialog_for_link2">Click for the answer</a></p>
<ul>
<li><span style="font-size: 18pt;"><strong>What criteria are required for natural selection to occur?</strong></span></li>
</ul>
<div id="dialog_for_link3" class="enhanceable_content dialog">1: There is reproduction in the population; 2: There is variation in traits in a population that results in some organisms being better adapted to the environment than other organisms; 3: Alleles that determine the traits in the population are inherited (e.g. passed from generation to generation); and, 4: Organisms better adapted to the environment are more likely to reproduce and produce offspring (e.g. there is differential reproductive success. It is also reasonable to state that the resources in the community cannot support an infinitely large population (e.g. there's not enough to go around if the population grows beyond a certain size, such that population growth is limited by resources).</div>
<p><a id="link3" class="Button Button" style="width: 20%;" title="Clicking will reveal a modeled answer by the instructor" href="#dialog_for_link3">Click for the answer</a></p>

[vrs07nl]

this is really useful - thanks for sharing

[arnold_cassie]

Ok I need people who know more than me. I am trying to put my images in a table and then have them do the lightbox pop up. I finally have everything where it looks right, but when I click on the "click to enlarge" button for testing. It opens all three images, instead of just the one example. Can someone tell me what I am doing wrong/need to change?

Thanks,

Here is my code:

<table style="height: 248px; width: 2.5216%; border-collapse: collapse; float: left;" border="0">
<tbody>
<tr style="height: 24px;">
<td style="height: 24px; text-align: center;">Example 1</td>
<td style="width: 33.3333%; text-align: center; height: 24px;">Example 2</td>
<td style="width: 33.3333%; text-align: center; height: 24px;">Example 3</td>
</tr>
<tr style="height: 200px;">
<td style="text-align: center; height: 200px;"><img src="https://blvs.instructure.com/courses/809/files/256645/download?wrap=1" alt="Example 1" width="150" height="200" data-api-endpoint="https://blvs.instructure.com/api/v1/courses/809/files/256645" data-api-returntype="File" /></td>
<td style="width: 33.3333%; text-align: center; height: 200px;"><img src="https://blvs.instructure.com/courses/809/files/256646/download?wrap=1" alt="Example 2" width="150" height="200" data-api-endpoint="https://blvs.instructure.com/api/v1/courses/809/files/256646" data-api-returntype="File" /></td>
<td style="width: 33.3333%; text-align: center; height: 200px;"><img src="https://blvs.instructure.com/courses/809/files/256647/download?wrap=1" alt="Example 3" width="150" height="200" data-api-endpoint="https://blvs.instructure.com/api/v1/courses/809/files/256647" data-api-returntype="File" /></td>
</tr>
<tr>
<td style="width: 33.3333%; text-align: center;">
<div id="dialog_for_link1" class="enhanceable_content dialog"><img src="https://blvs.instructure.com/courses/809/files/256670/download?wrap=1" alt="" data-decorative="true" data-api-endpoint="https://blvs.instructure.com/api/v1/courses/809/files/256670" data-api-returntype="File" /></div>
<div><a id="link1" class="Button Button" style="width: 50%;" title="Example 1" href="#dialog_for_link1">Click to Enlarge</a></div>
</td>
<td style="width: 33.3333%; text-align: center;">
<div id="dialog_for_link1" class="enhanceable_content dialog"><img src="https://blvs.instructure.com/courses/809/files/256671/download?wrap=1" alt="" data-decorative="true" data-api-endpoint="https://blvs.instructure.com/api/v1/courses/809/files/256671" data-api-returntype="File" /></div>
<div><a id="link1" class="Button Button" style="width: 50%;" title="Example 1" href="#dialog_for_link1">Click to Enlarge</a></div>
</td>
<td style="width: 33.3333%; text-align: center;">
<div id="dialog_for_link1" class="enhanceable_content dialog"><img src="https://blvs.instructure.com/courses/809/files/256672/download?wrap=1" alt="" data-decorative="true" data-api-endpoint="https://blvs.instructure.com/api/v1/courses/809/files/256672" data-api-returntype="File" /></div>
<div><a id="link1" class="Button Button" style="width: 50%;" title="Example 1" href="#dialog_for_link1">Click to Enlarge</a></div>
</td>
</tr>
</tbody>
</table>
<p><br /><br /></p>
<p> </p>
<p> </p>

[Chris_Hofer]

Hi  @arnold_cassie  Thank You for posting your code.  This is a pretty simple fix.  Here's the modified code and and explanation of what was wrong in your code:

<table style="height: 248px; width: 2.5216%; border-collapse: collapse; float: left;" border="0">
<tbody>
<tr style="height: 24px;">
<td style="height: 24px; text-align: center;">Example 1</td>
<td style="width: 33.3333%; text-align: center; height: 24px;">Example 2</td>
<td style="width: 33.3333%; text-align: center; height: 24px;">Example 3</td>
</tr>
<tr style="height: 200px;">
<td style="text-align: center; height: 200px;"><img src="https://blvs.instructure.com/courses/809/files/256645/download?wrap=1" alt="Example 1" width="150" height="200" data-api-endpoint="https://blvs.instructure.com/api/v1/courses/809/files/256645" data-api-returntype="File" /></td>
<td style="width: 33.3333%; text-align: center; height: 200px;"><img src="https://blvs.instructure.com/courses/809/files/256646/download?wrap=1" alt="Example 2" width="150" height="200" data-api-endpoint="https://blvs.instructure.com/api/v1/courses/809/files/256646" data-api-returntype="File" /></td>
<td style="width: 33.3333%; text-align: center; height: 200px;"><img src="https://blvs.instructure.com/courses/809/files/256647/download?wrap=1" alt="Example 3" width="150" height="200" data-api-endpoint="https://blvs.instructure.com/api/v1/courses/809/files/256647" data-api-returntype="File" /></td>
</tr>
<tr>
<td style="width: 33.3333%; text-align: center;">
<div id="dialog_for_link1" class="enhanceable_content dialog"><img src="https://blvs.instructure.com/courses/809/files/256670/download?wrap=1" alt="" data-decorative="true" data-api-endpoint="https://blvs.instructure.com/api/v1/courses/809/files/256670" data-api-returntype="File" /></div>
<div><a id="link1" class="Button Button" style="width: 50%;" title="Example 1" href="#dialog_for_link1">Click to Enlarge</a></div>
</td>
<td style="width: 33.3333%; text-align: center;">
<div id="dialog_for_link2" class="enhanceable_content dialog"><img src="https://blvs.instructure.com/courses/809/files/256671/download?wrap=1" alt="" data-decorative="true" data-api-endpoint="https://blvs.instructure.com/api/v1/courses/809/files/256671" data-api-returntype="File" /></div>
<div><a id="link2" class="Button Button" style="width: 50%;" title="Example 2" href="#dialog_for_link2">Click to Enlarge</a></div>
</td>
<td style="width: 33.3333%; text-align: center;">
<div id="dialog_for_link3" class="enhanceable_content dialog"><img src="https://blvs.instructure.com/courses/809/files/256672/download?wrap=1" alt="" data-decorative="true" data-api-endpoint="https://blvs.instructure.com/api/v1/courses/809/files/256672" data-api-returntype="File" /></div>
<div><a id="link3" class="Button Button" style="width: 50%;" title="Example 3" href="#dialog_for_link3">Click to Enlarge</a></div>
</td>
</tr>
</tbody>
</table>
<p><br /><br /></p>
<p> </p>
<p> </p>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Check out lines 15 and 16.  In those lines, you are referring to the content for "link1".  In your code, you had "link1" code also in lines 19, 20, 23, and 24.  In my code, I changed lines 19 and 20 to reference "link2".  In lines 23 and 24, I changed them to reference "link3".  So, in lines 19 an 20, you'll be changing three things...and in lines 23 and 24, you'll be changing three things, too.  You might also want to change the "Example 1" text in these lines to "Example 2" and "Example 3".

I hope this helps, Cassie.

[arnold_cassie]

Chris,

Thanks so much! Such a silly thing but since I don't really know how to code I probably would have never caught it!

Cassie

[GideonWilliams]

This is SUCH a superb thread with lots of people willingly sharing their ideas and support - love it! Just what Canvas should be about.

So I've magpied a number of ideas from the conversation to help with our Library canvas page - thanks so much!

Was wondering if it was possible to have a title in this part of the pop-up marked ?

Also, need to find a way to get rid of the annoying icon by the hyperlink. I can do it for image but not text...

Thanks to everyone who has contributed...

[GideonWilliams]

Thanks to  @webmaster ‌ and those colleagues at Removing small external link icon for the suggestion for removing the External link icon

Just needed to add in the !important feature to the CSS script to get it to work for me:

.ui-icon-extlink {
display:none !important;
}

Also managed to add in a title to the pop-up window which might interest you  @arnold_cassie ‌

Just needed to add in title="Add title" to the code eg

<div id="dialog_for_link1" class="enhanceable_content dialog" title="Issues Online">