As the thumbnails are quite small, maybe a bigger preview should popup when you hover over the thumbnail.
Good work though :-)
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. :-)
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:
img.hover-full:hover {width: 100%;}
Then on the image you want to enlarge on hover, just use the code:
[[image IMAGE_URL class="hover-full" width="SMALLER_THAN_ORIGINAL"]]
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?
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.
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.
a.avatar-hover img { position: fixed; left: 0; top: 0; } a.avatar-hover { background-image: none;}
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.
:-( 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.
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…
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).
On Safari I noticed that the divs do not stretch (option 1 constrains the image inside the div).
Oh, thanks for pointing that out. Here's the new CSS code to make it do what it should:
img.hover-full:hover {
width: auto;
position: relative;
}