Image hover popup
This package provides an full-size image popup when hovering the mouse over its thumbnail.
Include files
Hover Img | By jnesselr | 23 Dec 2009 17:02 |
Hover Img Backend | By jnesselr | 23 Dec 2009 17:01 |
Instructions
To install this package in your site, create/edit these pages with the following content:
This page | Contains this line |
---|---|
any page! | [[include :css-competition:include:hover-img img=(URL Here)]] |
img
This is the URL for the image you want to be a popup.
width
This is the width of your picture. Default is 200 px.
Height
This is the height of your picture. Default is 100 px.
Example:
[[include :css-competition:include:hover-img
|img=http://css-competition.wdfiles.com/local--files/package:8/fire_seamless_background.jpg
|width=100 px;
|height=100 px;
]]
Which produces:
Comments: 5
page revision: 6, last edited: 23 Dec 2009 17:34
But maybe you need to pimp it up a bit… As you look at your example… it touches the border at the bottom… give it some margin… I would like to see it in a text-context… does it float… left or right? It can use a border I think
http://sandbox.wikidot.com/picturepopup
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
Yes, it does look good with a border. I would have done a border, but didn't, and still don't, have the time. Also, I didn't even see the button at the time I was editing it, so I did the files manually. I fixed the parent page.
Okay, so technically, this was just to play with css, since it's not a programming language in my arsenal right now, and I'd like to change that.
EDIT: Also, I just noticed an interesting side effect. Hover over your user icon, and you'll see what I mean.
Should be fixable by declaring a class for the hover image, and using that in the CSS to only affect that class…
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Hey graphmastur,
I was just trying your CSI. I'm wondering why you set the height of the full-sized image to 90%. The result is a disproportionate image. I'm up to 5 Competition CSIs on my test page!
-Ed
Community Admin
I originally had everything customizable, but I found out that the include statements didn't want to work with css. I don't know why. I had it working fairly well with a div class=hover, but some things just wouldn't work. I'll work ok it later since I have til the end of January now. (if I have time, that is.)