Lightbox Effect

[Chris_Hofer]

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

[G_Petruzella]

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

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

[vrs07nl]

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

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

[Chris_Hofer]

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

[Ron_Bowman]

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

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]

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

[kub26]

This is great! Thanks for sharing!

[cgaudreau]

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

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".   This is great. Thank you for doing the heavy lifting of code genius for us.

[9927744]

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  in a Lightbox (popup window) for the students who made need it.  Any ideas?

[Chris_Hofer]

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]

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]

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

[9927744]

Thank you!  You have been extremely helpful!

[9927744]

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]

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]

[mbazluki]

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]

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