Click images to enlarge on screen

[olexar]

I'd like the ability to set images (or links to images) to enlarge in Canvas the way they do here in the community (maybe by setting the target to overlay?). Click the image for an example:

This could be useful for images in quizzes, like a periodic table.

🔎 This idea has been archived. While this idea isn't open for comments, it is an important part of Instructure’s idea conversations and development process. Contributions like this are valuable as Instructure prioritizes work on new or existing features.

[Stef_retired]

It would be nice to have this feature in Canvas. In the meantime, you can accomplish this, or something like it, with a button toggle:

<h4><span class="element_toggler btn btn-primary" role="button" aria-controls="instructions" aria-label="Toggler toggle list visibility" aria-expanded="false"> Click here for additional information.</span></h4>

<ul id="instructions" style="list-style: none; display: none;">

<li>

<h4><strong>Here is The Information You Want</strong></h4>

<p><a href="https://secure.flickr.com/photos/97523510@N00/4538543133"><img style="max-width: 500; max-height: 500;" title="Bike cookies" src="https://farm3.static.flickr.com/2710/4538543133_9849f5b2a3.jpg" alt="Bike cookies" width="242" height="182" /></a></p>

</li>

</ul>

<p>here is some more text...</p>

You could tweak this code to change the button and, of course, you can change the "Click here..." instruction to whatever works in context.

[Stef_retired]

By the way, olexar, credit for the above solution goes to awebster​. For more ideas, please refer to Image popup inside a quiz question​.

[olexar]

Thank you for this! I just tried it in my Sandbox course, and it doesn't really do what I'd like it to do. Using my periodic table example, often the information is written very small. Being able to have it open and overlay the screen would allow the students to see any detail they'd need, and then easily close it out.

I should also mention that I checked the sandbox page with the button on the Canvas (iOS) app, and like a few other codes I've tried, it didn't work. =(

[Stef_retired]

I'm glad you tested it, olexar, and took the extra step of checking out whether it would work in mobile (bummer that it doesn't). I knew the workaround wasn't either truly or entirely representative of your feature idea, but hoped it might be workable as an interim solution. I'd love to see this image overlay feature available, and will upvote it when it opens for voting on April 6.

[biray]

This idea has moved to the next stage and will be open for voting among the Canvas Community, from Wed. April 6, 2016 - Wed. July 6, 2016.

Check out this doc for additional details about how the voting process works!

[RobDitto]

Voted! Those interested in this idea may also want to see:

[olexar]

Now that we're open for voting, here's my nephew Dozer to ward off the " modifiedtitle="true" title="Panda-Cat...

PS: Click the image to enlarge!

[kmeeusen]

He's a handsome boy, but let's not prejudice him on Panda Cats. Very useful creatures, and rare I understand!

Okay, rare in real life, but frequently spotted by critter watchers in this virtual space. Below is a picture of one caught by an intrepid wildlife explorer in it's native habitat.

Agent K.

[kitcher]

I, too, vote for a flying Dozer.

[p_girard]

Yes please! I really need this for my online course.

[e_ramsay]

Great idea.  Hopefully if a feature were developed, the enlargement would appear more quickly than the example does on my computer.

[olexar]

It's a really large image - a few MB. Sorry about that. Check out my periodic table pic or the picture of my dog... Those more along the lines of a proper enlargement size.

[olexar]

Thirty-seven votes in six days... Great stuff! Hopefully we can keep it up. I should point out that the idea includes both images and links to images. Both open the same way here in the community.

[Jeff_F]

Now only if the preview image was smaller inline with the ability to enlarge to view the details of this elusive creature.  Ironically, when clicked this image displays smaller. 

[cms_hickss]

While I like this idea and I voted for it. I can see some problems with it during quizzes especially if, as with the example in the write up, it takes a few seconds for the image to load. This will eat up time for students on a timed quiz while they wait for the larger, detailed version of the image to load.

Also, image accessibility (description) will need to stay intact or on use of JAWS or another screenreader the ability to enlarge the image be ignored/replaced by the read description.

[olexar]

Hi Susan. Thanks for voting! I see the issue with timing; however, I'd think instructors would be sensitive to the issue and adjust accordingly. For example, having had a couple of folks mention how long it takes to load (similar to what I'd expect would happen in a class) I just edited the original idea using a reduced size of the image. Regarding accessibility, I'd hope the developers take that into consideration as well. The image in the original idea has an alt tag. I wonder if it's preserved. Thanks for your comment, and thanks again for voting!

[kschneider25]

This could be helpful in an Art History, Chemistry, or Photography class where you would need to see many images or groupings. 

[cms_hickss]

I only mention timing because some of our faculty, especially one in Art History, love 10 question quizzes with a 5 minute time limit and all the questions have images in them.

We have another faculty member who has a direction at the top of the quiz that says: "You have 40 seconds per question. Use your time wisely. Good luck!"

[Chris_Hofer]

Great idea!  Voted!  For those that are interested...in web design, this is called a "Lightbox".  Here's a link with more info: Lightbox (JavaScript) - Wikipedia, the free encyclopedia.

[olexar]

Hey Chris. I've been curious about that... Thanks for sharing!