Lightbox Effect

Navigator
49 21 7,482

As noted in the comment below by cgaudreau, this will not work on iOS devices.

In the web design world, you might come across a site that has photos/images where if you click on the image, a larger version of that appears front and center, and the rest of the website is grayed out behind it temporarily...until you close the image to return to the webpage.  This is commonly known as a "lightbox".  The following are some related discussion threads I've found around the topic here in the Community:

How to create image pop up in canvas

Make thumbnail image <img> show full size image when clicked

Most lightbox sites I've seen require a combination of HTML, CSS, and JavaScript (or other programming languages), but you can mimic this with only a few lines of HTML inside of Canvas.  Although the lightbox is not a current feature of Canvas, here are some very rough directions on how you can do this in Canvas.  Keep in mind my coding skills aren't stellar, so if you have suggestions or other ways to accomplish this, please feel free to post them below.  I've tested this in my own sandbox course in Canvas, and it works.

  1. Create a brand new content (wiki) page in your course.
  2. Insert your photo/image into the page.
  3. Grab the bottom-right corner of the image to resize the image so it is smaller ... making sure to keep the scale of the image relatively the same as the original (you should be able to hold the "Shift" key down while grabbing the corner to keep it scaled properly).
  4. Add a line or two of blank space after the image you've inserted.
  5. Switch over to the HTML view of your page, and paste in the following lines of code:

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

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

  7. 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 in Step #2.  Remove any of the "Bacon ipsum" text that isn't needed.  (NOTE: All the red text is completely customizable.)
  8. Save your page.  You will see your small image and then a button that says "Click to Learn More" (however, you could re-name this button to whatever you wanted).
    popup1.jpg
  9. Click on your button.  You will see the full-size image in a pop-up (lightbox) window within Canvas.  The pop-up (lightbox) 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.  (It sounds like you could also modify your global CSS file to tell the pop-up box (lightbox) to auto-fit instead of being restricted to a small view all the time.  (vrs07nl, do you have that bit of code you'd be willing to post below?)
    popup2.jpg
21 Comments
Community Member

chofer@morainepark.edu​, nice use of the "enhanceable_content dialog" class to achieve this effect - thanks so much for sharing!

So is the below the (more-or-less) "bare bones" structure of the code involved?

<img /> <!-- original, "thumbnail" image -->

     <div id="dialog_for_link1" class="enhanceable_content dialog"> <!-- the pop-up lightbox -->

          <img />

          <p>"caption" text</p>

     </div>

<a id="link1" class="Button Button" style="width: 20%;" title="rollover button description" href="#dialog_for_link1">Click to Learn More</a> <!-- the button -->

Navigator

That looks like a pretty good summary, G.Petruzella@mcla.edu​.

Community Member

chofer@morainepark.edu

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}
Community Member

The community is not allowing me to mark this blog post as helpful, but indeed it is.

Navigator

Right...but there is a link to "Like" it at the top (under the title of the blog).

Community Member

@Richard Olexa -

minor point(just making sure of the obvious), but are you logged in?  If you are not logged in, you can't like the post.

Navigator

I believe the issue is that I wrote this as a "blog" and not a "document".  As far as I can tell, blogs don't allow you to mark the entire document as "helpful", but documents do (for example, you can mark any Canvas Guide or any Release Notes as "Helpful").  You can still mark comments "helpful"...just not the overall blog post.

Surveyor

Fantastic chofer@morainepark.edu​! Thanks for sharing, it worked great and I know where I am going to use this in my course!

Community Member

This is great! Thanks for sharing!

Learner II

...and of course it doesn't work in the iOS app :smileyplain:

This is really great, chofer@morainepark.edu​. Playing with keeping the width consistency now. Perfect for an Art class I'm redesigning.

Community Member

This is fantabulous chofer@morainepark.edu! I will definitely add this to my things I must do list! I was in a design quandary with images requiring a zoom review and I wanted to find something outside of inserting another tool gadget from one of my favorite software companies that rhymes "particulate". Smiley Happy  This is great. Thank you for doing the heavy lifting of code genius for us.

Community Member

Being a novice to HTML speak, will using this allow me to just add a picture as a way of clarifying the meaning of the word?  I want to add this picture Picture of the inner planets in a Lightbox (popup window) for the students who made need it.  Any ideas?

Navigator

Hi 9927744@cherokeek12.net...

I *think* this is possible.  Using the directions I've provided above, when you get to step #7, add the image again as described, but also remove the smaller re-sized image that you added in step #2.  Once you save the page, it will still leave a button on the page that students can click (you can put whatever text you want on the button), and then the image would appear in the lightbox.  There may be better ways to do this, and I'd welcome any other feedback from Community members.

Community Member

I was able to get it to work, but not in the way I want it too.  Maybe I'm asking too much of Canvas; it's not the first time!

I'd like the kids to move their cursor over the words "Inner Planets" and see the picture come up.  Do you know if that's possible?

Navigator

9927744@cherokeek12.net...

I'm not sure, to be honest.  I know there is a "mouseover" effect that you can use, but that only displays pop-up text.  The code for that is:

<p><span title="Your mouseover text here"><strong>Your regular text here</strong></span></p>

Example:

Mouseover Text

Community Member

Thank you!  You have been extremely helpful!

Community Member

Chris, I wrote some VERY simple directions for people, like me, who are not used to writing HTML code, but want to use this cool effect.  Please let me know if you'd like to see it.  I have it in pdf format.

Navigator

Hi 9927744@cherokeek12.net...

Sure, if you would like to post it here, that's cool with me.  Also, cesbrandt recently posted this blog https://community.canvaslms.com/groups/canvas-developers/blog/2018/09/11/html-editor-syntax-highligh... which may make it a bit easier for people to work with HTML code.  It has helped me a lot already!

Community Member

293798_pastedImage_2.png

293799_pastedImage_3.png

Community Member

Thanks for the information. I am trying to accomplish this but the image is not getting any bigger.  I want the image to enlarge so the text on it can be read.  Any ideas on how to do that??

Thanks

Navigator

mbazluki@uwlax.edu...

After you've created the lightbox button and then click on it, is the image in the lightbox the same size as what is displayed on your page?  Meaning, are you seeing the image at it's original size?  It won't enlarge automatically just because you tried the lightbox effect.  In my example, the larger image of the penguins was the original size, and then I scaled it down inside of the RCE (step #3).

Hope this helps...

About the Author
I've worked at MPTC since January 2001 as Web Specialist in the Instructional Technology department. Basically, I work with our Curriculum department to put courses into Canvas for our faculty. I enjoy playing disc golf, watching movies, playing video games, playing board/card games (Carcassonne, Settlers of Catan, Monopoly, Ticket to Ride, 7 Wonders, Forbidden Island, Forbidden Desert, Betrayal at House on the Hill, Splendor, Above and Below, Munchkin, and Exploding Kittens), reading, and being with family and friends. I help volunteer with our Sr. High Youth program at my church and also help with the soundboard and running slides for our Sunday services. I am currently on my fourth Toyota Prius. The first (a silver 2004 2nd Gen) was victim to a flood that came through our area, and water got inside which ruined many of the electronics in it. My second (a magnetic gray metallic 2009 2nd Gen) was totaled in a rear-end collision. I totaled my 3rd Prius (a silver 2011) when I rear-ended someone by accident in town. I now have a 2019 Toyota Prius Limited...and it's awesome!