If you have the Custom Design upgrade, you can create various mouseover effects. Here’s a solution I worked out for zooming from a thumbnail to a larger view of the image. This solution will display the larger view as a centered overlay, with the rest of the page blackened out (a-la Lightbox):
The thumbnail can be captioned or not; the larger view can also be captioned or not (independently of the thumbnail).
For live examples see this demo post. [Sorry, upgrade on that blog has expired]
Drawback: unlike the true lightbox effect, there can be no ‘close’ button (it requires types of code we’re not allowed to use on wordpress.com); so, to return to the normal view of the page, you have to move the cursor outside the browser window.
Text editor
Insert the thumbnail the normal way, with or without a caption. Insert the same image again, as a full-size image, with or without a caption. (In both cases the “Link to” option should be set to None.) Then enclose the two image codes in divs this way:
</div>
CSS editor
If you’re only going to use full-size images without captions, paste this in the CSS editor:
If you’re also going to use full-size images with captions, add this as well:
If you wish to display the bottom note I’ve added (“hover outside browser window to close”), add this too:
Notes:
• You can decrease the decimal number in the rgba background rule, to increase the transparency.
• The #222222 above it is a fallback in case an outdated browser version doesn’t understand rgba.
• The table-cell display value that is used to center the overlay won’t work in IE7 or earlier.
It’s lovely, but in Chrome 28 I had a heck of a time getting back to the post. Clicking outside the photo didn’t do it, and then I realized I’d misread what you said. Once I clicked over to the scrollbar, I was able to return to the post. Not immediately intuitive. (Also, makes me wonder what WP.com is using on the “expired domain” overlay which does shut if you click outside the notice area.)
The problem isn’t the overlay per se, the problem is I’ve made the overlay cover the whole browser window (in order to center the image and blacken the rest). The “expired domain” overlay isn’t like this, is it?
Besides, we cannot use javascript but WP can. (Simple example: the “X” button on the gallery carousel.)
No, it isn’t, if I’ve understood you correctly. The current version of the expired domain overlay allows you to click anywhere outside the notification area and then it goes away. When Mike and I first started harping at the HE’s last year that it was impossible to get past the overlay, we thought maybe at one point we were delusional. They kept saying there’s an X in the corner of the screen, but neither of us saw the X (and there was no X).
Well, you know: if Matt says there’s an X and the rest of the world doesn’t see it, then clearly the rest of the world is delusional…
As for the counter-intuitiveness of my invention, the only thing I can do is add a note at the bottom:
http://panosdemos.wordpress.com/2013/05/26/mouseover-overlay-lightbox-style/
What do you think – better or worse this way?
You know me, I prefer straightforward, so better. :)
Thanks Jen. Then I’ll keep the note in the demo, and update the post to include the required CSS (maybe as a separate section, so that one can omit it if they don’t like the note).
I am so sorry to be posting this in the wrong thread, but I couldn’t find a link to your advice on the “word-wrap” issue in the title area of WordPress. That has driven me to bang my head into my keyboard more times than I can count. Thank you so much for your advice on forcing the page break between two long words-you have saved my future headlines…and forehead!! :)
Hi there – apologies for posting this here – comments have ben disabled for the topic re embedding flashplayer stuff on a WordPress blog. I’m trying to embed a photobook from Shutterfly in my WordPress blog, but every time I enter the code, nothing shows up. I tried using your shortcode, but I think I’m missing something. Can you assist? The embed code is here: http://textsnip.com/2uxlj7 Thanks in advance.
Oops. Apologies – I just saw your disclaimer that you’re no longer offering support. Okay – I’ll keep trying. Thanks, anyway.
Hi justpi, I set up a blog a short while ago to help victims of the Colorado flood in my town, Jamestown, CO. In a Help request I made on wordpress.com, timethief suggested we choose a different theme and pointed to you as someone who might be willing to make a theme suggestion. If you are willing to help would you mind taking a look at the help thread. You can communicate with me through that. Towards the end I listed the specific requirements and asked for a specific theme recommendation or just a few that we could select one from.
http://en.forums.wordpress.com/topic/urgent-colorado-flood-related-issue?replies=8#post-1447001
Thanks for any help you can give.
Steve
Good, I like this , it is really good I will try to for my [link removed – P.]
Hi Panos, You are, or I am, lost. My hard drive won’t mount and my backup won’t work (yet hoping?) You can delete this comment, but I cannot find you unless you contact me.
I’m not sure what you’d like me to do! Do you mean you lost my email address?
yes. lost your email addy and more.
but no mind
I found how to access my gmail with volunteers info.
no worry.
my computer died. lost a lot, but it may yet be recovered. Sorry to bother you. Please delete all of this. I am borrowing laptops and it’s not fun.
how do you delete welcome message all together?
because even when i type my message theres still a giant white space under it, like as if i typed above it not in it.
& if i try to put a image in it, its the same thing. image then same size white space under it. modularity lite theme
** sorry for posting this in here i just didnt know where to leave this question for you :)
how do you delete welcome message all together?
because even when i type my message theres still a giant white space under it, like as if i typed above it not in it.
& if i try to put a image in it, its the same thing. image then same size white space under it.
im logging on to my site,
dashboard
posts
new
add media
click from media library
publish
go to site
nothing is in the white space, but i do see my picture on my posts at latest post. i do have the slide show enabled. its just a white space