Click here to edit contents of this page.
Click here to toggle editing of individual sections of the page (if possible). Watch headings for an "edit" link when available.
Append content without editing the whole page source.
Check out how this page has evolved in the past.
If you want to discuss contents of this page - this is the easiest way to do it.
View and manage file attachments for this page.
A few useful tools to manage this Site.
See pages that link to and include this page.
Change the name (also URL address, possibly the category) of the page.
View wiki source for this page without editing.
View/set parent page (used for creating breadcrumbs and structured layout).
Notify administrators if there is objectionable content in this page.
Something does not work as expected? Find out what you can do.
General Wikidot.com documentation and help section.
Wikidot.com Terms of Service - what you can, what you should not etc.
Wikidot.com Privacy Policy.
As the thumbnails are quite small, maybe a bigger preview should popup when you hover over the thumbnail.
Good work though :-)
Yes, indeed. Took a little time but I found James' solution to doing this. Michal insists it is not possible. :-)
Portfolio
hehehe
You know how I mentioned that I was working on a better method of doing it with custom CSS?
Well, I came up with it just now:
Then on the image you want to enlarge on hover, just use the code:
So now you can use smaller images which show full size on hovering.
But there are so many themes on the themes website now that there's an awful lot of scrolling to be done. Perhaps you should widen the container-wrap to 100%, so that you can fit more themes without scrolling so much.
I've tried this, see http://themes.wikidot.com/sandbox:cover. (You can edit that page.)
Two problems:
Any idea on getting the image to pop out over the enclosing div?
Portfolio
I suppose then you'd have to go back to the original trick: demo
That works but don't you find the popups really annoying for navigation?
Can you think of a way to get the popup appearing at the top left corner, for example? I guess this would need some JavaScript.
Portfolio
I'd have to agree. Definitely a problem for navigation.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Well, there is a way, but it's a little bit “hackish” as it manipulates all user avatars too.
The position: fixed; CSS is incompatible with IE6, so instead the hover image is rendered as a usual hover-image does (which is, as you have put it, annoying).
Look, try the CSS on the sandbox category so you can demo it properly. You're feedback will be helpful on whether to move in that direction.
I guess the hack is ok since we can restrict that to a single category on the site.
I've tried the sandbox2 page but it seems to work the same as before.
Would the editor popup help trick be of any use here? I'm going to try that.
Portfolio
:-( I'm afraid that my 6-year old daughter probably has better CSS skills than me. There seem to be lots of ways of getting CSS-only pops, using tricks like hiding the large image off-page but I can't map these into something that works here.
Portfolio
I think it's one of those moments where you kinda wish you didn't ask :-D
Can't the gallery module help out. I know it's not really a hover pop up but would at least give people a larger image without changing pages.
Okay, now there's 3 options so far:
Option 1 is by far the simplest method, but the enlarged image doesn't float, and therefore expands the div-block it resides in.
Option 2 is great, because each image displays for 5 seconds and disappears automatically. It is bad because it also affects the an author's avatar.
Option 3 is great because it does pretty much what Option 2 does, except it doesn't affect the author's avatar. However, the images don't disappear after 5 seconds, they disappear instantaneously after you hover away from them. And it doesn't work in Safari for some odd reason, I've fixed this.
Option 4: use the method Pieter has linked to (yes, this CAN be done)
Option 3 is nicest, because it's snappy and works exactly as you'd expect. The disappearing thumbnail is a bit strange.
Nice work! I feel a stripe coming up…
Portfolio
Okay, I'll work more on option three then. The only problem with opt. 3 is that it's a little weird with IE6. I'm working on it…
Pieter,
It seems that there is a bug in IE6 that disallows one from placing content outside of a div block. The div block either automatically stretches, or hides the overflow.
So what should we do with IE ??? Make no hovering for full sized images? Or perhaps use Option 1 for IE6 only?
Microsoft really need to get themselves a real browser. Well, in the meantime… whatever is easiest. On Safari I noticed that the divs do not stretch (option 1 constrains the image inside the div).
Portfolio
Oh, thanks for pointing that out. Here's the new CSS code to make it do what it should: