Help with a script

I need a script to zoom in on old document without making them fuzzy. I have a lot of these documents on my genealogy website but a lot of them are unreadable. The documents are mainly from government archives which I download from family search. They have excellent +/- buttons and the zooming is very clear. You can see one here. https://www.familysearch.org/ark:/61903/3:1:3Q93-C9YJ-79BN-L?i=1235&cc=1307826
If anyone can give me this script iwill be really grateful as I have tried so many that don’t work

If it is the image that is low quality there isn’t much that can be done…

The images are mostly like the one on the link I gave. What I want is the script that they have for zooming in and out. Obviously I can’t put up over a thousand documents in a large size as it would at least have to fit on the screen but still would need zooming. Look at the document in the link I gave and use the +/- to read it. This is the code I need.

Why not just look at the script they use and see if you can come up with your own version of it to fit your needs.

What have you tried? Do you have your code on GitHub so we can take a look and guide you to a solution of your own?

We are primarily hear to teach users to code and not just write code for users.

FYI - I can not view the link you referenced without an account on FamilySearch.

I am not a programmer. I am 78 years old and self taught. I have tried various scripts but they do not work like the one on Family search. It is a free genealogy site and anyone can sign up. Here is my own genealogy website at an example of what I wish to zoom.Click on the little camera
http://www.robinsancestry.com/individual.html#25 As i have said, I have not been able to find a script that works like the one on Family search

Are the downloads the same resolution (600 × 485 pixels) as the image on your site? If so, there’s not much you can do. Scaling up low-resolution images can’t make them higher resolution. There are AI-based approaches that might help, but I doubt they’d yield very good results given the stylized script and highly variable stroke width of the writing.

If you can obtain higher resolution images, scaling is no problem at all. If you use an image host like Cloudinary, you can serve any size of image you like, but only downscaling will have good results.

Example upscaled (blurry)

Example downscaled (clear)

The database part of my website is generated by a program I use. The images are attached to the database and are downscaled by them because a lot of other people use their servers. The actual document that I attached is this.


4504 x 3646. I guess I will have to find a way to bypass their downsize script. They have 3. Thumbnail, medium and normal which is the largest and no larger than 600 x 600. That is ok for photos but not documents. If I open this document in windows photo viewer, I can zoom in and it is very clear. I don’t know what resolution to use for the documents as there are so many and at the actual resolution would chew up my space. I just want visitors to be able to read them. The script you have on here to view the document is good also but would like to be able to move the document around rather than scroll bars.

Yeah, this partly depends on the scale of this project. If it’s mainly used by you and a few family members, you could probably get by just fine with a Cloudinary free account, uploading all the images, then referencing them in your HTML something like this:

<a target="_blank" href="https://res.cloudinary.com/lionelrowe/image/upload/h_1500/v1543314553/banner_image_zp39gk.jpg">
  <img src="https://res.cloudinary.com/lionelrowe/image/upload/h_300/v1543314553/banner_image_zp39gk.jpg" alt="scanned document">
</a>

Note the h_1500 vs. h_300 (substitute for your ideal pixel values).

Rendered looks like this (click to view enlarged in new tab):

scanned document

The website is for genealogists that are researching some of the seven thousand plus ancestors that I have. What I am going to do is make a table of my direct lines only with links to the birth and marriage documents. This is still over 1500 documents as I have researched back to my 7th Great grand parents and there are 512 of them. I can do this and use the brower’s magnifier as is it used in your image but it only magnifies once and I would like it to magnify little by little and be able to move the page around. I don’t know what percentage that little magnifier in the above image is but I would like it to increase little by little with each click. As you can see in the above image, when magnified, you can’t move it to see the right hand side.Think this might be a lost cause unless Family search will tell me their excellent code, which I doubt.

On the stand-alone image view (the view you get from clicking a link to a .jpg or .png file), you can use Ctrl + +/- or Ctrl + mouse-wheel scrolling for that. Scrollbars for horizontal/vertical scrolling appear when the image is larger than the screen, or you can use arrow keys if you prefer the keyboard. All in-built browser functionality, no need for scripts. :smile:

Yes i can do that but visitors might not know how. I have played around with this all day and come up with the following code but this means I will have to make a page for each image.
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Click here to move</title>

<style>
#mydiv {
position: absolute;
z-index: 9;
background-color: #f1f1f1
text-align: center;
border: 1px solid #d3d3d3;
}

#mydivheader {
padding: 500px;
cursor: move;
z-index: 10;
background-color: #f3ffff;
color: #000;
}
</style>
</head>

<body>

<span style="cursor:move"></span><br>

<div id="mydiv">
<div id="images/grandma_jack.jpg"></div>

`<img border="0" src="images/LymanDrulletteBirth.jpg" width="800" `

height="1093"style="cursor:move">
<script>
//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}

function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}

function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}

function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>

</html>