CODEWITHSUNDEEP
javascriptjqueryhtmlcss
FlyingCat
FlyingCat

Reputation: 14250

How to do scale to fit in my case?

I am trying to create a feature that when a user clicks an image, a div will pop and animate from the size of the image to fit the entire browser window.

It will be something like

 -----------------
|                 |
|      img1       |
|          img2   |
 -----------------

After click ima2

 -----------------
|                 |
| image2 contents |
|                 |
 -----------------

when img2 is clicked, the div that has contents will pop and animate to fit the entire browser viewable screen. I am thinking using css transform to do this but I am not sure how to start and how to lock the image contents position. Can anyone give me some hints? Thanks a lot!

Upvotes: 1

Views: 67

Answers (3)

Meg
Meg

Reputation: 1472

I've used the Nivo Lightbox in the past, and it's quite simple to set up. It basically is just a popup on your page that shows an image, gallery, or even video overtop of the content (with an overlay).
http://dev7studios.com/plugins/nivo-lightbox/

I know this is just one of the many other lightboxes out there, but this one worked great for me.

Upvotes: 0

kthornbloom
kthornbloom

Reputation: 3720

If you want to zoom images on your page, I have recently built a script that handles this pretty well:

https://github.com/kthornbloom/Smoothzoom

Upvotes: 0

TimSPQR
TimSPQR

Reputation: 2984

Do you mean something like this FIDDLE?

JS

var $dialogpopup = $( ".hiddenimagediv" ).dialog({
                  autoOpen: false,
                  height: 'auto',
                  width: 'auto',
                  position: {my: "top middle",
                             at: "top middle",
                             of: ".imagediv"},
                  title:"Your Picture"});

$('.imagediv').click(function(){
                               $dialogpopup.dialog('open');
                               });

You can remove the upper bar, play with the formatting, etc.

Upvotes: 2

Related Questions