Add title to Thumbnail Image popup?

This forum is for all Flare issues not related to any of the other categories.
Post Reply
JasonSTI
Sr. Propeller Head
Posts: 110
Joined: Mon Jan 07, 2008 11:34 am

Add title to Thumbnail Image popup?

Post by JasonSTI »

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!
cruitbuck
Propeller Head
Posts: 60
Joined: Wed May 06, 2009 8:19 am
Location: dallas
Contact:

Re: Add title to Thumbnail Image popup?

Post by cruitbuck »

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.
Buck the Tech Writer
===keep thinking===
Love :flare:
JasonSTI
Sr. Propeller Head
Posts: 110
Joined: Mon Jan 07, 2008 11:34 am

Re: Add title to Thumbnail Image popup?

Post by JasonSTI »

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.
whunter
Sr. Propeller Head
Posts: 429
Joined: Thu Mar 12, 2009 4:49 pm
Location: Portland, OR

Re: Add title to Thumbnail Image popup?

Post by whunter »

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.
lcarver
Propeller Head
Posts: 17
Joined: Mon May 21, 2018 8:20 am

Re: Add title to Thumbnail Image popup?

Post by lcarver »

I'm looking for something like this as well! I second whunter's question, if you're willing to share the styles you created :)
rogersm
Propeller Head
Posts: 97
Joined: Fri Nov 07, 2014 4:29 am

Re: Add title to Thumbnail Image popup?

Post by rogersm »

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;
}
lcarver
Propeller Head
Posts: 17
Joined: Mon May 21, 2018 8:20 am

Re: Add title to Thumbnail Image popup?

Post by lcarver »

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.

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

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;
}
Post Reply