Page 1 of 1

Little project: static html page for (small) pictures

Posted: Thu Aug 10, 2017 3:47 pm
by dollover
Hi,

is this useful for you? Perhaps you know better way?

to share your pictures, but only small versions of them (index pics) by a static html page.
The benefit is the using of the web browser zoom functionality for the viewer and the smaller space, that you are able to send more than a view pics by mail or whatever.

I don't know if this exists in comfortable software, but I've not found.

I've created an "index pics" html for uploading/showing multiple pictures. Code is fixed designed for 360 x 320 pixel div's, because my camera software batch program can reduce pictures only to a smallest size where the longest edge of of the reduced picture will be 320 pixels. Huuuh hope someone understand this sentence :D

I've tested it in windows 10 using chrome browser. When I put 100 pics with 320x215 pixels inside the site is 1.5MByte.

The steps to use:
Step 1: At first copy the below html code to a file and make this file to an html (.htm or .html).
Step 2: Prepare source folder with the index pictures. As smaller the pictures as lesser the html site space.
Step 3: Then open this file. If all is ok, your standard browser opens an empty html with a button.
Step 4: Click button and select multiple pictures(small pictures maximum longest edge 320 pixels). The pictures will be shown directly.
Step 5: Append other pictures clicking again the button or save the html site if you're finished copying.
Step 6: Send send the saved html site to people you want show lot of pics.

Caution: The copied html site has the name of the folder name where the html site come from, as a comment on top. If not want, delete this comment.


As said above: This code is fixed designed for 360 x 320 pixel div which holds the 320(longest edge)pictures. Feel free to change the div.style.height and div.style.width statement for youre small picture dimension or to increased the functionality by adding input fields for the longest edge or whatever.

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style>
.cri {
position: absolute;
bottom: 0;

}
img {
    display: block;
    margin: auto;
    /*width: 100%;*/
}
</style>
<script>

function previewFiles() {
	var selectList, x, div, div2, image, height, width;
	  var preview = document.querySelector('#preview');
	  var files   = document.querySelector('input[type=file]').files;

	  function readAndPreview(file) {

	    // Make sure `file.name` matches our extensions criteria
	    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
	      var reader = new FileReader();

	      reader.addEventListener("load", function () {
	    	  
		    div = document.createElement("div");
		    div.style.position 		= "relative";
		    div.style.float 		= "left";
		    div.style.height 		= "360px";
		    div.style.width 		= "320px";
		    div.style.padding 		= "5px";
		    div.style.border 		= "1px solid rgba(80,80,80,1.0)";
		    div.style.marginTop 	= "0px";
		    div.style.marginLeft 	= "0px";
		    div.style.marginRight 	= "0px";
		    div.style.marginBottom 	= "0px";
		    div.style.background 	= "black";
		    div.style.textAlign		= "center";
		    div.style.valign		= "middle";
			image = new Image();
	        image.title = file.name;
	        image.src = this.result;
	        width = image.naturalWidth;
	        height = image.naturalHeight;
	        div.appendChild(image);
		    div2 = document.createElement("div");
		    div2.style.float 		= "bottom";
		    div2.style.width 		= "320px";
		    div2.style.width 		= "320px";
		    div2.style.textAlign	= "center";
		    div2.style.fontFamily 	= "Verdana, Geneva, sans-serif";
		    div2.style.color 		= "rgba(100, 100, 100, 1.0)";
		    div2.style.fontSize 	= "16pt";
		    div2.style.marginBottom 	= "6px";
		    div2.style.wordWrap="break-word";
		    div2.style.overflow		= "hidden";
		    div2.setAttribute("class", "cri");
		    x = file.name;
		    div2.innerHTML = x;
		    div.appendChild(div2);
	        preview.appendChild( div );
	      }, false);

	      reader.readAsDataURL(file);
	    }

	  }

	  if (files) {
	    [].forEach.call(files, readAndPreview);
	  }

	}
</script>
</head>
<body>
<!-- Create Index html for multiple pictures
If you have multiple pictures and want share with a self made html picture index page.  
Step 1: Prepare source folder with the index pictures. As smaller the pictures as lesser the html site space.
Step 2: Click button and select multiple pictures.
Step 3: Append other pictures clicking again the button or save the html site.
Step 4: Send the site to the receiver.
 Caution: The copied html site has the name of the last folder name copies come from as a comment on top. If not want, delete this comment.
 
 This code is fixed designed for 360 x 320 pixel div which holds the pictures. Feel free to increased the functionality by adding input fields for the longest edge or the dimension of the div's or whatever.   
 -->
 
<input id="browse" name="submitBnt" type="file" value="like"  onchange="previewFiles()" multiple>
<div style="alignTop:20px;" id="preview"></div>
</body>
</html>

Re: Little project: static html page for (small) pictures

Posted: Thu Aug 10, 2017 4:56 pm
by Obin
I used to fool around with html and style sheets. I've not had a chance to grow my skills and have regressed. Anyway, I'll check this later when I'm on my computer. Looks like fun.

It's interesting that explorer 6 would automatically adjust a frame to match the height of a photo, but other browsers I tried would not, so I found it was best to designate the height in the script as well as the width. That's just one of the last things I discovered during my fooling. I'd really like to get back to learning this stuff.

Re: Little project: static html page for (small) pictures

Posted: Thu Aug 10, 2017 5:04 pm
by poppy70
Hi there,

for some static images I use the tool igal2 which runs on a linux box. It creates thumbnails, a film strip like preview page in simple html and makes it really easy. I don't know if anything like that exists on Windows or Macs. Just in case you are interested: http://igal.trexler.at/

poppy

Re: Little project: static html page for (small) pictures

Posted: Thu Aug 10, 2017 5:08 pm
by Obin
Hey Poppy, that looks like fun.

I'll admit that I wish websites would tone down the complexities of their preview pages. I understand that some complexities are necessary for functionality but feel some authors overdo things. When I'm looking for dolls and information, fancy, superfluous stuff tends to annoy me.

That comment is out of nowhere. :)

Re: Little project: static html page for (small) pictures

Posted: Thu Aug 10, 2017 5:34 pm
by dollover
poppy70 wrote:Hi there,

for some static images I use the tool igal2 which runs on a linux box. It creates thumbnails, a film strip like preview page in simple html and makes it really easy. I don't know if anything like that exists on Windows or Macs. Just in case you are interested: http://igal.trexler.at/

poppy
Hi poppy70,

these filmstrips looks very nice. I've not thinked about a feature like this. I never used linux box, need to do closer look.
I'm sure someone can put away this "div2" which holds the picture name and add instead 2 divs with filmstrip layout around the "image"s.