cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

How to create image pop up in canvas

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

week 8.png

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

Tags (1)
17 Replies
Highlighted
Community Coach
Community Coach

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.)

popup1.jpg

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.

popup2.jpg

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!!!

Highlighted

Thanks Chris !

I will try it out later today

Highlighted

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

Highlighted

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!

Tags (1)
Highlighted

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!

Tags (1)
Highlighted
Community Advocate
Community Advocate

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

Highlighted
Community Member

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}
Highlighted
Community Coach
Community Coach

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

Highlighted

rogrant@nmsu.edu

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 -