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