Hello
I want to display all images from a particular folder on a web page, such that web page shows thumbnails of images and after clicking on thumbnail, image should get open in new window.
For this I want a script so that i can run for loop for total no. of images.
Hi,
Here are mainly two ways to do this:
1. create thumbnail in same or another folder and load them first and later when licked show its corresponding image, you can create name of thumbnail and image in synchronization like image01.jpg and th_image01.jpg
this method need maintenance but is quite optimized in performance.
2. you can write(or get from net) a class to create thumbnail of image on the fly and load the thumbnails for thumbnail page and then show respective image. This method will effect your performance as image processing is quite a task.
Hi......
Suppose that you have 3 images like 01.jpg,02.jpg,03.jpg and thumbnils like
01_th.jpg,02_th.jpg,03.jpg_th and all 6 images are in a folder named 'Image'.
Now you are displaying all three thumbnils on Default.aspx
<a href="javascript:void(0);" style="text-decoration:none;"
onclick="javascript:OpenNewwindow('01.jpg');">
<img height="50" width="50" alt='' src="Image/01_th.jpg" /></a>javascipt
====================================================================================
var PositionX = 100;
var PositionY = 100;
// Set these value approximately 20 pixels greater than the
// size of the largest image to be used (needed for Netscape)
var defaultWidth = 500;
var defaultHeight = 500;
// Set autoclose true to have the window close automatically
// Set autoclose false to allow multiple popup windows
var AutoClose = true;
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(300,300);');
writeln('width=300-(document.body.clientWidth-document.images[0].width);');
writeln('height=300-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');
writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="George" alt="'+imageTitle+'" src='+imageURL+' style="display:block"></body></html>');
close();
}}FOR THUMBNAIL IMAGE YOU CAN READ BELOW LINK:
http://www.codeproject.com/KB/aspnet/Thumbnail_Images.aspx
Hi,
You can achieve that functionality using different ways like css,javascript and asp.net.Using asp.net you can achieve that functionality by having a datalist to display your images and a pop up extender to diaplay your image.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.