Ability to show a transparent css-formed infobox over the pix [Unsupported Hack]

[protox]

As I saw on the Tarique Sani's website, he put a small infobox [which is compatible whith Firefox, sounds kewl!]
I'd like to have something like this for my community ..

Any ideas ? You're welcome !

[Tranz]

@those who know better: Could this be used to replace the tag that is incompatible with Firefox when it comes to line breaks?

[Rodinou]

Yes ... a small dhtml script I have posted (and Rat King has realized the mod) ... compatible with IE / FF / OP

add only transparency CSS inside your CSS file which control the dhtml popup and let's go.

[Tarique Sani]

This was indeed my solution for better Tooltips in FF - It is a CSS only solution (yes - no javascript) It does not work too well in IE but then I do not care much about IE  BUT on the other hand it needed some changes in theme.php

[protox]

This was indeed my solution for better Tooltips in FF - It is a CSS only solution (yes - no javascript) It does not work too well in IE but then I do not care much about IE  BUT on the other hand it needed some changes in theme.php

Great, what kind of changes ? 

[Tarique Sani]

OK here it goes

In file functions.inc.php there is a function called display_thumbnail find the line which starts with

Code Select Expand


$thumb_list[$i]['image'] = "<img src=
and replace it with

Code Select Expand


$thumb_list[$i]['image'] = "<img src=\"" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$row['filename']}\" /><span>".nl2br($pic_title)."</span>";

and in the css file put

Code Select Expand


span.link {
position: relative;
}

span.link a span {
display: none;
}

span[class=link] a:hover span {
display: block;
position: absolute;
margin-top: -100px;
margin-left: -10px;
width: 185px;
padding: 5px;
z-index: 1000;
color: #000;
background: #f9f9f9;
border: 1px solid #CC9933;
text-align: left ;
opacity: 0.85;
}


finally in theme.php search for  $template_thumbnail_view and wrap the

Code Select Expand


<a href="{LINK_TGT}">{THUMB}<br /></a>

with

Code Select Expand


<span class="link" ><a href="{LINK_TGT}">{THUMB}<br /></a></span>


Lastly - the above hack and changes are totally unsupported from me - that is if it works great - else - look some place else

[protox]

okok.. thx for this nice code anyway
EDIT : the code is working good as you can see on my community but I'd like to display only the title and the author.. is that possible ? ( this question is not for you Tarique )

[Joachim Müller]

@Tarique: although I understand that this hack goes unsupported, could this thread be moved from feature requests to the mods board (with a big bold warning like *unsupported hack* or so), and what coppermine version(s) will it work with (all I guess).

[Rodinou]

@ Tarique : your code is too complex' for IE (which doesn't support CSS2 : or you use CSS2 with span[class=link]

So ... if you have time >
http://www.brunildo.org/test/CPop.html

Works very well under IE / FF / Opera. And in my opinion, it's better to use this CSS popup (I'm agree of not using JS when you can do with CSS), than a very weird ALT tag.

[Tarique Sani]

@Gaugau - moved

@Rodinou - looks promising

[fotogenius]

DOES ANYONE KNOW HOW TO ADD THE THUMBNAIL IN THE CSS BOX AS WELL??

THANKS

[Joachim Müller]

Don't shout at us (writing in all-uppercase is being considered as "shouting"). You can't accomplish this using CSS only. However, the mod DHTML tooltip mod (display enlarged images as tooltip) may be what you're looking for.

[fotogenius]

Thanks, Sorry for that! Left Caps-Lock on :'(