Click images to enlarge on screen

(1)
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:

184208_2016-02-21+17.51.12-1 smaller.jpgSarasota bay as seen from the eastern coast of Bradenton beach

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.

39 Comments
Stef_retired
Instructure Alumni
Instructure Alumni

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
Instructure Alumni
Instructure Alumni

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
Community Contributor

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.

1024px-Periodic-table.jpg

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
Instructure Alumni
Instructure Alumni

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
Instructure Alumni
Instructure Alumni

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
Community Champion

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

olexar
Community Contributor

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

Handsome boxer breed dog named dozer

PS: Click the image to enlarge!

kmeeusen
Community Champion

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.

178739_pastedImage_0.jpg

Agent K.

kitcher
Community Novice

I, too, vote for a flying Dozer.

p_girard
Community Novice

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

e_ramsay
Community Novice

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

olexar
Community Contributor

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
Community Contributor

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

Jeff_F
Community Champion

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
Community Contributor

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
Community Contributor

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

kschneider25
Community Champion

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

cms_hickss
Community Contributor

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

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
Community Contributor

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