sexyrealsexdolls.com

Little project: static html page for (small) pictures

No matter how great your camera might be, it is how you apply your skills that makes the difference between an OK shot and a great shot. Here you can talk technical, talk creative, share your techniques, lighting, and digital editing. This is where we can all help each other to take better photos.
If you post a photo here and are looking for a critique, you should be prepared for honest criticism even if it hurts. It will only help to make us better photographers.

Moderator: Swan

Post Reply
dollover
Former Member
Posts: 416
Joined: Thu Apr 03, 2014 3:15 pm

Little project: static html page for (small) pictures

Post 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>

User avatar
Obin
Doll Oracle
Doll Oracle
Posts: 8104
Joined: Wed Jun 27, 2007 12:00 am
Location: near Atlanta, GA.
Contact:

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

Post 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.
笑. It's good for you.

Presidential Commission on Obscenity and Pornography

Does she...or doesn't she? (A slogan used by Clairol)

My dolls

Reminder to self: Still more work to do on my albums.

First photo shoot of Sandra, a Sanhui 145 cm lady doll.
[thumb]http://dollforum.com/forum/download/file.php?id=196256&t=1[/thumb]


Fun photos of my JM 110cm, Angie.
http://dollforum.com/forum/viewtopic.php?f=196&t=74121


User avatar
poppy70
Doll Mentor
Doll Mentor
Posts: 1037
Joined: Thu Jan 29, 2015 4:18 pm
Location: southern Germany
Contact:

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

Post 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
Poppys girls
ImageImageImageImageImageImageImage
click on image to go to their thread

User avatar
Obin
Doll Oracle
Doll Oracle
Posts: 8104
Joined: Wed Jun 27, 2007 12:00 am
Location: near Atlanta, GA.
Contact:

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

Post 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. :)
笑. It's good for you.

Presidential Commission on Obscenity and Pornography

Does she...or doesn't she? (A slogan used by Clairol)

My dolls

Reminder to self: Still more work to do on my albums.

First photo shoot of Sandra, a Sanhui 145 cm lady doll.
[thumb]http://dollforum.com/forum/download/file.php?id=196256&t=1[/thumb]


Fun photos of my JM 110cm, Angie.
http://dollforum.com/forum/viewtopic.php?f=196&t=74121


dollover
Former Member
Posts: 416
Joined: Thu Apr 03, 2014 3:15 pm

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

Post 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.

Post Reply

INFORMATIONS