Viewing Enlarge Image on Hover or Click to Popup

Enlarge Image on Hover or Click to Popup



User: Christopher 10 years ago
Roddy, have you done any demos for either of these two features? What I'm looking for is a way to either click my thumbnail poster and have it enlarge on the page with an exit button (as well as border and shadow). Just like what you see on Apple Trailers. Mind you, they've darkened the rest of the page too. Here's a sample pic:



Or hover to enlarge. I found this link which offers code that I could probably make work. I'm not interested in doing a row of thumbs though, just one pic. Also, what would be your preference between these two methods? Hover on an iPhone works by clicking, right?

http://cssdemos.tupence.co.uk/image-popup.htm

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com

popup picture.jpg
User: Roddy 10 years ago
I do have a demo somewhere but I think it uses java script.

The one you linked to uses CSS. I will try to unravel it to get it to work for one image - maybe tomorrow.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 10 years ago
Is this kind of like what you have in mind...

http://ezmacwebdesign.com/Demo/hover-expand/

???

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Christopher 10 years ago
Yep, I think that's the ticket. You even saved me from having to type in my own website.

On my iphone 5 though, touch works like hover, bringing up the image. But when I touch it again to make it disappear, it takes me away on that little plane. I assume if I disable the link css, it will just unpop and disappear.

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Roddy 10 years ago
If you have more than one thumbnail on the page, clicking the next one will remove the first large image on iPhone.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Christopher 10 years ago
I guess putting an X in the left corner and doing a CLICK to popup is a different kettle of worms.

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Roddy 10 years ago
A pit full of snakes.

I suppose you want a demo of that now? It might actually be better that way.

Unfortunately it is now Friday night and, by law, everybody in Scotland has to go out and get blind, legless drunk or suffer the consequences of arrest, ridicule and shame.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Christopher 10 years ago
Well no one wants you to suffer the consequences of ridicule and shame! We need you well rested and not behind bars so that by dawn, you can answer all of our posts.

And yeah, I think others will make use of the hover popup code. But in my case, I better do a click to popup, and click to close.

Sweet dreams 8-)

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Roddy 10 years ago
What about using a modal?

http://www.ezmacwebdesign.com/Demo/modal/link.html

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Christopher 10 years ago
Hmm, that looks pretty good. Transition and everything. I might try that. Just not with the smurfs!

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Roddy 10 years ago
The Smurfs are very handsome - especially the Scottish one.

I added some more thumbs to the hover version as I had a feeling that some of the enlarged images would go out of the content area and, for once, I was right.

I have added classes to prevent the above and the code is still way simpler than using a modal. Try it out in iOS to see if it's useable...

http://www.ezmacwebdesign.com/Demo/hover-expand/

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 10 years ago
This is another modal which uses CSS transitions rather than java script - more inline with the future of web design!

http://www.ezmacwebdesign.com/Demo/css-modal/image.html

Note that these modals can have any content.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.