0

I want to create a thumbnail from an image uploaded from user on webpage. I want to create a image gallery where i can show all images preview as thumbnail and when user clicks he can see enlarged image.

Is it possible to do this so that page dont get heavy

Shantanu Gupta
  • 20,688
  • 54
  • 182
  • 286
  • I found a C# image resizing tutorial. I don't know C#. http://www.switchonthecode.com/tutorials/csharp-tutorial-image-editing-saving-cropping-and-resizing – msw Aug 01 '10 at 08:23

2 Answers2

0

You must set a class for image tags for thumbnail. such this :

.thumbnail {
box-shadow: 0 0 7px #fff;
cursor: pointer;
float: left;
height: 70px;
margin-bottom: 10px;
margin-top: -35px;
width: 70px;
border: 3px solid #ff``f;
border-radius: 3px;

}

and so for example : 

  <img id="Image1" class="thumbnail"  src="..." .../>

and all images resize with css. and for create enlarged image you must use jquery Modal. for Modal read this link : http://www.jacklmoore.com/colorbox/ you must create a jquery file. after click on each image you must call plugin with your src. such this jquery:

$('.thumbnail').on('click', function () {
var src = $(this).attr('src');
$(this).colorbox({ html: "<img src='" + src + "'                       style='width:1024px;height:728px'/>", width: "1024px", height: "728px", close: "", closeButton: true, scrolling: false, overlayClose: true, scalePhotos: true, escKey: true });

});

0

You should probably cache the thumbnail images, but to create them see:

What is the "best" way to create a thumbnail using ASP.NET?

Community
  • 1
  • 1
dalle
  • 18,057
  • 5
  • 57
  • 81