Lightbox Effect

Chris_Hofer
Community Coach
Community Coach
21
13853

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:

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

 @Chris_Hofer ​, 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 -->

Chris_Hofer
Community Coach
Community Coach
Author

That looks like a pretty good summary,  @G_Petruzella ​.

vrs07nl
Community Contributor

 @Chris_Hofer ​

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

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

Chris_Hofer
Community Coach
Community Coach
Author

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

Ron_Bowman
Community Champion

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

Chris_Hofer
Community Coach
Community Coach
Author

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.

DaleDrees
Community Champion

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

kub26
Community Novice

This is great! Thanks for sharing!

cgaudreau
Community Contributor

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

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

eliams
Community Contributor

This is fantabulous  @Chris_Hofer ! 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.

9927744
Community Champion

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?

Chris_Hofer
Community Coach
Community Coach
Author

Hi  @9927744 ...

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.

9927744
Community Champion

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?

Chris_Hofer
Community Coach
Community Coach
Author

 @9927744 ...

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

9927744
Community Champion

Thank you!  You have been extremely helpful!

9927744
Community Champion

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.

Chris_Hofer
Community Coach
Community Coach
Author

Hi  @9927744 ...

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!

9927744
Community Champion

293798_pastedImage_2.png

293799_pastedImage_3.png

mbazluki
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

Chris_Hofer
Community Coach
Community Coach
Author

 @mbazluki ...

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