We are using Thumbnail Images so that when a user clicks on the image it pops up to a larger size. This helps make our topics readable, while still providing access to HD images.
However, we got some feedback that it was not intuitive to click the image to dismiss it; standard web application protocol would be to click outside of the image and it would dismiss. They thought just adding mouseover text to the image of "Click to dismiss" would be enough. However, I can't seem to find a way to do this. The popup, MCPopupContainer, is not generated until the image is clicked on, and it does not inherit any of the properties that we apply to the Thumbnail Image itself. I can't even seem to catch this using javascript, as it is not generated when the page is loaded.
Anyone have an ideas of how to apply a title to the popup div?
Thanks!
Add title to Thumbnail Image popup?
Re: Add title to Thumbnail Image popup?
Are you using the thumbnail CSS provided by Flare?
OR
Are you creating a thumbnail and putting it in a <div> with a popup link of some sort?
First, Flare provides auto thumbnail popups for either click or mouseover/hover.
See Image Properties: Thumbnail tab. There are several options.
Perhaps you can experiment with http://help.madcapsoftware.com/flare201 ... 20commands.
I use auto-numbering for several styles, not just auto-numbering.
OR
Are you creating a thumbnail and putting it in a <div> with a popup link of some sort?
First, Flare provides auto thumbnail popups for either click or mouseover/hover.
See Image Properties: Thumbnail tab. There are several options.
Perhaps you can experiment with http://help.madcapsoftware.com/flare201 ... 20commands.
I use auto-numbering for several styles, not just auto-numbering.
Buck the Tech Writer
===keep thinking===
Love
===keep thinking===
Love
Re: Add title to Thumbnail Image popup?
We are using Flare's thumbnail CSS, and have the Image Properties set to Popup. Since the resulting image is so large, we didn't want to use Mouseover.
I've tried using both the Screen Tip and Alternate Text options in the Image Properties, but both only seem to apply to the thumbnail, not the expanded image. I don't see how autonumbering would help in this situation.
For now, I've added a new CSS :after section to display a floating "close box" on the image frame, so users can click there (or anywhere else on the image). Its clunky, but it works.
I've tried using both the Screen Tip and Alternate Text options in the Image Properties, but both only seem to apply to the thumbnail, not the expanded image. I don't see how autonumbering would help in this situation.
For now, I've added a new CSS :after section to display a floating "close box" on the image frame, so users can click there (or anywhere else on the image). Its clunky, but it works.
Re: Add title to Thumbnail Image popup?
JasonSTI, would you be willing to share the :after style you are using in your stylesheet for this? I'm looking for the same sort of thing, and it would save me a lot of trial and error.
Re: Add title to Thumbnail Image popup?
I'm looking for something like this as well! I second whunter's question, if you're willing to share the styles you created
Re: Add title to Thumbnail Image popup?
I think I saw something about this somewhere in these forums before. Not sure if it helps, but based on what I saw before, we use the following CSS:
Code: Select all
.MCPopupContainer::after
{
position: absolute;
top: -8px;
right: -8px;
width: 40px;
height: 40px;
display: block;
content: "";
background: url('LOCATION OF YOUR IMAGE') no-repeat 50% 50% / 28px 28px;
text-align: center;
}
Re: Add title to Thumbnail Image popup?
Perfect!! I just adjusted the size and position to my needs. Thank you so much!
Here are my resulting styles, if it's helpful for anybody else. This creates an overlay block that's 100% of the width of the expanded thumbnail and 20% of the height (positioned at the top). My "close" graphic is positioned at 50% of the width (centered) and 5% from the top of the popup.
I also adjusted the top padding on MCPopupContainer to make a little more room, since my graphic will say "Click to Close" and I want it positioned in the white space.
Here are my resulting styles, if it's helpful for anybody else. This creates an overlay block that's 100% of the width of the expanded thumbnail and 20% of the height (positioned at the top). My "close" graphic is positioned at 50% of the width (centered) and 5% from the top of the popup.
Code: Select all
.MCPopupContainer::after
{
position: absolute;
top: 0px;
right: 0px;
height: 20%;
width: 100%;
display: block;
content: "";
background: url('../closethumb.png') no-repeat 50% 5% / 120px 80px;
text-align: center;
}
Code: Select all
.MCPopupContainer
{
background-color: #FFFFFF;
border: solid 1px #000000;
padding-top: 30px;
padding-bottom: 8px;
padding-right: 10px;
padding-left: 10px;
position: absolute;
cursor: pointer;
-moz-border-radius: 5px;
border-radius: 5px;
z-index: 999;
}