0

I have a portfolio with small thumbnails that each open in a lightbox. I'm trying to display the thumbnails as enlarged images. Note, I'm calling the same image for both large version and thumbnail so i need to figure out a way to use css and/or javascript to size thumbnail so they are all the same size, but zoomed in very close.

Here's a sample of the full size image when blown up in a lightbox: http://grab.by/Ax74 Here's the current thumbnail: http://grab.by/Ax7a Here's what I want the thumbnail to look like (or zoomed in somewhat similar to this): http://grab.by/Ax7k

Thanks in advance for the help.

frshjb373
  • 627
  • 9
  • 27

1 Answers1

0

You could use css background-image in combination with css background-size Check this working Fiddle

e.g.

CSS

#div1 {
    background-image: url("url/path");
    background-size: 200px 200px;
}

EDIT:

Well its pretty hard not using CSS Backgrounds... for more information check this and also this question

nevertheless here is another Fiddle. I hope it suits your needs...

.thumbnail {
    width: 64px;
    height: 64px;
    background-size: 200px 200px;
    background-position: center; //shows only center of full width image
}



.full {
    width: 609px;
    height: 447px;
    cursor: pointer;
    background-size: 100% 100%;
    background-position: initial;
}

and also a lil bit javascript

function fullImage() {
    $("#thumbnail").toggleClass("full");
}
Community
  • 1
  • 1
citubi
  • 64
  • 3
  • I see that definitely works to crop, but I'm looking to zoom on image and preferably not use as a background image either. Let me know if you have any other ideas. Thank you for the help! – frshjb373 Sep 21 '14 at 14:56
  • What do you mean whit zooming? Do you mean clicking on it so it displays larger? – citubi Sep 21 '14 at 18:57
  • No, just want to display a larger selection area so it looks zoomed in. Check out those screenshots I provided. – frshjb373 Sep 22 '14 at 15:12
  • Check my question. I added another fiddle. – citubi Sep 22 '14 at 21:20