├── .gitignore ├── .eslintrc.js ├── gulpfile.js ├── package.json ├── LICENSE ├── README.md ├── html-magnifier.js └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | es2020: true, 6 | commonjs: true, 7 | }, 8 | extends: [ 9 | 'eslint:recommended', 10 | ], 11 | globals: { 12 | }, 13 | parserOptions: { 14 | ecmaVersion: '2020', 15 | sourceType: 'module', 16 | }, 17 | rules: { 18 | indent: ['error', 2], 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const eslint = require('gulp-eslint'); 3 | 4 | const configs = { 5 | eslint: { 6 | src: [ 7 | '*.js', 8 | ] 9 | } 10 | }; 11 | 12 | gulp.task('eslint', function() { 13 | return gulp.src(configs.eslint.src) 14 | .pipe(eslint({quiet: true})) 15 | .pipe(eslint.format()) 16 | .pipe(eslint.failAfterError()); 17 | }); 18 | 19 | gulp.task('build', 20 | gulp.series('eslint')); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": { 3 | "name": "Jager Mesh" 4 | }, 5 | "bugs": { 6 | "url": "https://github.com/jagermesh/html-magnifier/issues" 7 | }, 8 | "deprecated": false, 9 | "description": "Content Magnifier", 10 | "homepage": "https://github.com/jagermesh/html-magnifier#readme", 11 | "keywords": [ 12 | "magnifier", 13 | "content magnifier", 14 | "html magnifier" 15 | ], 16 | "license": "MIT", 17 | "main": "magnifier.js", 18 | "name": "html-magnifier", 19 | "repository": { 20 | "type": "git", 21 | "url": "git+ssh://git@github.com/jagermesh/html-magnifier.git" 22 | }, 23 | "devDependencies": { 24 | "gulp": "^4.0.2", 25 | "gulp-eslint": "^6.0.0", 26 | "eslint": "^8.7.0" 27 | }, 28 | "scripts": { 29 | "build": "npm install && gulp build", 30 | "update": "npm update && gulp build", 31 | "test": "echo \"OK\"" 32 | }, 33 | "version": "2.0.3" 34 | } 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Sergiy Lavryk 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript content magnifier. 2 | 3 | Simple, lightweight pure JavaScript component that adds a magnifying glass functionality to any web page content. 4 | 5 | ## Demo 6 | 7 | https://jagermesh.github.io/html-magnifier/ 8 | 9 | ## Usage: 10 | 11 | 1) Include the script: 12 | 13 | ~~~ 14 | 15 | ~~~ 16 | 17 | 2) Create magnifier instance 18 | 19 | ~~~ 20 | var magnifier = new HTMLMagnifier(); 21 | ~~~ 22 | 23 | 3) Show when needed 24 | 25 | ~~~ 26 | magnifier.show(); 27 | ~~~ 28 | 29 | 4) Hide when not needed 30 | 31 | ~~~ 32 | magnifier.hide(); 33 | ~~~ 34 | 35 | That's all. 36 | 37 | There are also some settings which you can pass to constructor 38 | 39 | ~~~ 40 | { 41 | zoom: 2 42 | shape: square | circle 43 | width: 200 44 | height: 200 45 | } 46 | ~~~ 47 | 48 | Or set aftewards 49 | 50 | ~~~ 51 | magnifier.setZoom(2); 52 | magnifier.setShape('circle'); 53 | magnifier.setWidth(300); 54 | magnifier.setHeight(300); 55 | ~~~ 56 | 57 | There are also couple events which you may find usefull 58 | 59 | 1) You may want to remove some elements from magnfication: 60 | 61 | ~~~ 62 | magnifier.on('prepareContent', function(magnifierContent) { 63 | $('.some-selector', magnifierContent).remove(); 64 | }); 65 | ~~~ 66 | 67 | 2) In some cases you may want to sync scroll positions for scollable areas: 68 | 69 | ~~~ 70 | magnifier.on('syncScrollBars', function(magnifierContent) { 71 | $('div.scrollable-area', magnifierContent).scrollTop($('div.scrollable-area').scrollTop()); 72 | }); 73 | ~~~ 74 | 75 | 76 | Have fun. Send PR if you find any glitches or want to make improvements. 77 | 78 | :) 79 | -------------------------------------------------------------------------------- /html-magnifier.js: -------------------------------------------------------------------------------- 1 | (function(window) { 2 | 3 | function HTMLMagnifier(options) { 4 | const _this = this; 5 | 6 | _this.options = Object.assign({ zoom: 2, shape: 'square', width: 200, height: 200 }, options); 7 | 8 | const magnifierTemplate = ``; 12 | 13 | const MutationObserver = window.MutationObserver || window.WebKitMutationObserver; 14 | 15 | let magnifier, magnifierContent; 16 | let observerObj; 17 | let syncTimeout; 18 | let isVisible = false; 19 | let magnifierBody; 20 | let events = {}; 21 | 22 | function setPosition(element, left, top) { 23 | element.style.left = `${left}px`; 24 | element.style.top = `${top}px`; 25 | } 26 | 27 | function setDimensions(element, width, height) { 28 | element.style.width = `${width}px`; 29 | element.style.height = `${height}px`; 30 | } 31 | 32 | function setupMagnifier() { 33 | switch(_this.options.shape) { 34 | case 'square': 35 | setDimensions(magnifier, _this.options.width, _this.options.height); 36 | break; 37 | case 'circle': 38 | setDimensions(magnifier, _this.options.width, _this.options.height); 39 | magnifier.style.borderRadius = '50%'; 40 | break; 41 | } 42 | magnifierContent.style.WebkitTransform = 43 | magnifierContent.style.MozTransform = 44 | magnifierContent.style.OTransform = 45 | magnifierContent.style.MsTransform = 46 | magnifierContent.style.transform = `scale(${_this.options.zoom})`; 47 | } 48 | 49 | function isDescendant(parent, child) { 50 | let node = child; 51 | while (node != null) { 52 | if (node == parent) { 53 | return true; 54 | } 55 | node = node.parentNode; 56 | } 57 | return false; 58 | } 59 | 60 | function syncContent() { 61 | if (isVisible) { 62 | prepareContent(); 63 | syncViewport(); 64 | syncScrollBars(); 65 | } 66 | } 67 | 68 | function syncContentQueued() { 69 | if (isVisible) { 70 | window.clearTimeout(syncTimeout); 71 | syncTimeout = window.setTimeout(syncContent, 100); 72 | } 73 | } 74 | 75 | function domChanged() { 76 | if (isVisible) { 77 | syncContentQueued(); 78 | } 79 | } 80 | 81 | function unBindDOMObserver() { 82 | if (observerObj) { 83 | observerObj.disconnect(); 84 | observerObj = null; 85 | } 86 | if (document.removeEventListener) { 87 | document.removeEventListener('DOMNodeInserted', domChanged, false); 88 | document.removeEventListener('DOMNodeRemoved', domChanged, false); 89 | } 90 | } 91 | 92 | function bindDOMObserver() { 93 | if (MutationObserver) { 94 | observerObj = new MutationObserver(function(mutations) { 95 | for(let i = 0; i < mutations.length; i++) { 96 | if (!isDescendant(magnifier, mutations[i].target)) { 97 | try { 98 | triggerEvent('checkMutation', mutations[i]); 99 | domChanged(); 100 | break; 101 | } catch (error) { 102 | // 103 | } 104 | } 105 | } 106 | }); 107 | observerObj.observe(document, { 108 | childList: true, 109 | subtree: true, 110 | attributes: true, 111 | attributeFilter: [ 112 | 'class', 113 | 'width', 114 | 'height', 115 | 'style' 116 | ], 117 | attributeOldValue: true 118 | }); 119 | } else 120 | if (document.addEventListener) { 121 | document.addEventListener('DOMNodeInserted', domChanged, false); 122 | document.addEventListener('DOMNodeRemoved', domChanged, false); 123 | } 124 | } 125 | 126 | function triggerEvent(event, data) { 127 | const handlers = events[event]; 128 | if (handlers) { 129 | for(let i = 0; i < handlers.length; i++) { 130 | handlers[i].call(_this, data); 131 | } 132 | } 133 | } 134 | 135 | function syncViewport() { 136 | const x1 = magnifier.offsetLeft; 137 | const y1 = magnifier.offsetTop; 138 | const x2 = document.body.scrollLeft; 139 | const y2 = document.body.scrollTop; 140 | const left = -x1 * _this.options.zoom - x2 * _this.options.zoom; 141 | const top = -y1 * _this.options.zoom - y2 * _this.options.zoom; 142 | setPosition(magnifierContent, left, top); 143 | triggerEvent('viewPortChanged', magnifierBody); 144 | } 145 | 146 | function removeSelectors(container, selector) { 147 | const elements = container.querySelectorAll(selector); 148 | if (elements.length > 0) { 149 | for(let i = 0; i < elements.length; i++) { 150 | elements[i].parentNode.removeChild(elements[i]); 151 | } 152 | } 153 | } 154 | 155 | function prepareContent() { 156 | magnifierContent.innerHTML = ''; 157 | const bodyOriginal = document.body; 158 | const bodyCopy = bodyOriginal.cloneNode(true); 159 | const color = bodyOriginal.style.backgroundColor; 160 | if (color) { 161 | magnifier.css('background-color', color); 162 | } 163 | bodyCopy.style.cursor = 'auto'; 164 | bodyCopy.style.paddingTop = '0px'; 165 | bodyCopy.setAttribute('unselectable', 'on'); 166 | const canvasOriginal = bodyOriginal.querySelectorAll('canvas'); 167 | const canvasCopy = bodyCopy.querySelectorAll('canvas'); 168 | if (canvasOriginal.length > 0) { 169 | if (canvasOriginal.length === canvasCopy.length) { 170 | for(let i = 0; i < canvasOriginal.length; i++) { 171 | let ctx = canvasCopy[i].getContext('2d'); 172 | try { 173 | ctx.drawImage(canvasOriginal[i], 0, 0); 174 | } catch (error) { 175 | // 176 | } 177 | } 178 | } 179 | } 180 | removeSelectors(bodyCopy, 'script'); 181 | removeSelectors(bodyCopy, 'audio'); 182 | removeSelectors(bodyCopy, 'video'); 183 | removeSelectors(bodyCopy, '.magnifier'); 184 | triggerEvent('prepareContent', bodyCopy); 185 | magnifierContent.appendChild(bodyCopy); 186 | const width = document.body.clientWidth; 187 | const height = document.body.clientHeight; 188 | setDimensions(magnifierContent, width, height); 189 | magnifierBody = magnifierContent.querySelector('body'); 190 | triggerEvent('contentUpdated', magnifierBody); 191 | } 192 | 193 | function initScrollBars() { 194 | triggerEvent('initScrollBars', magnifierBody); 195 | } 196 | 197 | function syncScroll(ctrl) { 198 | const selectors = []; 199 | if (ctrl.getAttribute) { 200 | if (ctrl.getAttribute('id')) { 201 | selectors.push('#' + ctrl.getAttribute('id')); 202 | } 203 | if (ctrl.className) { 204 | selectors.push('.' + ctrl.className.split(' ').join('.')); 205 | } 206 | for(let i = 0; i < selectors.length; i++) { 207 | let t = magnifierBody.querySelectorAll(selectors[i]); 208 | if (t.length == 1) { 209 | t[0].scrollTop = ctrl.scrollTop; 210 | t[0].scrollLeft = ctrl.scrollLeft; 211 | return true; 212 | } 213 | } 214 | } else 215 | if (ctrl == document) { 216 | syncViewport(); 217 | } 218 | return false; 219 | } 220 | 221 | function syncScrollBars(e) { 222 | if (isVisible) { 223 | if (e && e.target) { 224 | syncScroll(e.target); 225 | } else { 226 | let scrolled = []; 227 | let elements = document.querySelectorAll('div'); 228 | for(let i = 0; i < elements.length; i++) { 229 | if (elements[i].scrollTop > 0) { 230 | scrolled.push(elements[i]); 231 | } 232 | } 233 | for(let i = 0; i < scrolled.length; i++) { 234 | if (!isDescendant(magnifier, scrolled[i])) { 235 | syncScroll(scrolled[i]); 236 | } 237 | } 238 | } 239 | triggerEvent('syncScrollBars', magnifierBody); 240 | } 241 | } 242 | 243 | function makeDraggable(ctrl, options) { 244 | 245 | const _this = this; 246 | 247 | let dragObject = null; 248 | let dragHandler = null; 249 | 250 | options = options || {}; 251 | options.exclude = [ 'INPUT', 'TEXTAREA', 'SELECT', 'A', 'BUTTON' ]; 252 | 253 | if (options.handler) { 254 | dragHandler = ctrl.querySelector(options.handler); 255 | } else { 256 | dragHandler = ctrl; 257 | } 258 | 259 | function setPosition(element, left, top) { 260 | element.style.left = `${left}px`; 261 | element.style.top = `${top}px`; 262 | } 263 | 264 | let pos_y, pos_x, ofs_x, ofs_y; 265 | 266 | ctrl.style.cursor = 'move'; 267 | 268 | function downHandler(e) { 269 | const target = e.target || e.srcElement; 270 | const parent = target.parentNode; 271 | 272 | if (target && (options.exclude.indexOf(target.tagName.toUpperCase()) == -1)) { 273 | if (!parent || (options.exclude.indexOf(parent.tagName.toUpperCase()) == -1)) { // img in a 274 | dragObject = ctrl; 275 | 276 | const pageX = e.pageX || e.touches[0].pageX; 277 | const pageY = e.pageY || e.touches[0].pageY; 278 | 279 | ofs_x = dragObject.getBoundingClientRect().left - dragObject.offsetLeft; 280 | ofs_y = dragObject.getBoundingClientRect().top - dragObject.offsetTop; 281 | 282 | pos_x = pageX - (dragObject.getBoundingClientRect().left + document.body.scrollLeft); 283 | pos_y = pageY - (dragObject.getBoundingClientRect().top + document.body.scrollTop); 284 | 285 | e.preventDefault(); 286 | } 287 | } 288 | } 289 | 290 | function moveHandler(e) { 291 | if (dragObject !== null) { 292 | const pageX = e.pageX || e.touches[0].pageX; 293 | const pageY = e.pageY || e.touches[0].pageY; 294 | const left = pageX - pos_x - ofs_x - document.body.scrollLeft; 295 | const top = pageY - pos_y - ofs_y - document.body.scrollTop; 296 | 297 | setPosition(dragObject, left, top); 298 | if (options.ondrag) { 299 | options.ondrag.call(e); 300 | } 301 | } 302 | } 303 | 304 | function upHandler() { 305 | if (dragObject !== null) { 306 | dragObject = null; 307 | } 308 | } 309 | 310 | dragHandler.addEventListener('mousedown', function(e) { 311 | downHandler(e); 312 | }); 313 | 314 | window.addEventListener('mousemove', function(e) { 315 | moveHandler(e); 316 | }); 317 | 318 | window.addEventListener('mouseup', function(e) { 319 | upHandler(e); 320 | }); 321 | 322 | dragHandler.addEventListener('touchstart', function(e) { 323 | downHandler(e); 324 | }); 325 | 326 | window.addEventListener('touchmove', function(e) { 327 | moveHandler(e); 328 | }); 329 | 330 | window.addEventListener('touchend', function(e) { 331 | upHandler(e); 332 | }); 333 | 334 | return _this; 335 | 336 | } 337 | 338 | function init() { 339 | const div = document.createElement('div'); 340 | div.innerHTML = magnifierTemplate; 341 | magnifier = div.querySelector('.magnifier'); 342 | document.body.appendChild(magnifier); 343 | magnifierContent = magnifier.querySelector('.magnifier-content'); 344 | if (window.addEventListener) { 345 | window.addEventListener('resize', syncContent, false); 346 | window.addEventListener('scroll', syncScrollBars, true); 347 | } 348 | makeDraggable(magnifier, { ondrag: syncViewport }); 349 | } 350 | 351 | _this.setZoom = function(value) { 352 | _this.options.zoom = value; 353 | setupMagnifier(); 354 | }; 355 | 356 | _this.setShape = function(shape, width, height) { 357 | _this.options.shape = shape; 358 | if (width) { 359 | _this.options.width = width; 360 | } 361 | if (height) { 362 | _this.options.height = height; 363 | } 364 | setupMagnifier(); 365 | }; 366 | 367 | _this.setWidth = function(value) { 368 | _this.options.width = value; 369 | setupMagnifier(); 370 | }; 371 | 372 | _this.setHeight = function(value) { 373 | _this.options.height = value; 374 | setupMagnifier(); 375 | }; 376 | 377 | _this.getZoom = function() { 378 | return _this.options.zoom; 379 | }; 380 | 381 | _this.getShape = function() { 382 | return _this.options.shape; 383 | }; 384 | 385 | _this.getWidth = function() { 386 | return _this.options.width; 387 | }; 388 | 389 | _this.getHeight = function() { 390 | return _this.options.height; 391 | }; 392 | 393 | _this.isVisible = function() { 394 | return isVisible; 395 | }; 396 | 397 | _this.on = function(event, callback) { 398 | events[event] = events[event] || []; 399 | events[event].push(callback); 400 | }; 401 | 402 | _this.syncScrollBars = function() { 403 | syncScrollBars(); 404 | }; 405 | 406 | _this.syncContent = function() { 407 | syncContentQueued(); 408 | }; 409 | 410 | _this.hide = function() { 411 | unBindDOMObserver(); 412 | magnifierContent.innerHTML = ''; 413 | magnifier.style.display = 'none'; 414 | isVisible = false; 415 | }; 416 | 417 | _this.show = function(event) { 418 | let left, top; 419 | if (event) { 420 | left = event.pageX - 20; 421 | top = event.pageY - 20; 422 | } else { 423 | left = 200; 424 | top = 200; 425 | } 426 | setupMagnifier(); 427 | prepareContent(); 428 | setPosition(magnifier, left, top); 429 | magnifier.style.display = ''; 430 | syncViewport(); 431 | syncScrollBars(); 432 | initScrollBars(); 433 | bindDOMObserver(); 434 | isVisible = true; 435 | }; 436 | 437 | init(); 438 | 439 | return _this; 440 | 441 | } 442 | 443 | if (typeof module !== 'undefined' && module.exports) module.exports = HTMLMagnifier; else window.HTMLMagnifier = HTMLMagnifier; 444 | 445 | })(window); 446 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 |

Content magnifier demo

11 | 12 |
13 |
14 |
15 |

The Pythagorean equation, x2 + y2 = z2, has an infinite number of positive integer solutions for x, y, and z; these solutions are known as Pythagorean triples. Around 1637, Fermat wrote in the margin of a book that the more general equation an + bn = cn had no solutions in positive integers, if n is an integer greater than 2. Although he claimed to have a general proof of his conjecture, Fermat left no details of his proof, and no proof by him has ever been found. His claim was discovered some 30 years later, after his death. This claim, which came to be known as Fermat's Last Theorem, stood unsolved in mathematics for the following three and a half centuries. 16 | The claim eventually became one of the most notable unsolved problems of mathematics. Attempts to prove it prompted substantial development in number theory, and over time Fermat's Last Theorem gained prominence as an unsolved problem in mathematics.

17 | 18 |

The Pythagorean equation, x2 + y2 = z2, has an infinite number of positive integer solutions for x, y, and z; these solutions are known as Pythagorean triples. Around 1637, Fermat wrote in the margin of a book that the more general equation an + bn = cn had no solutions in positive integers, if n is an integer greater than 2. Although he claimed to have a general proof of his conjecture, Fermat left no details of his proof, and no proof by him has ever been found. His claim was discovered some 30 years later, after his death. This claim, which came to be known as Fermat's Last Theorem, stood unsolved in mathematics for the following three and a half centuries. 19 | 20 | The claim eventually became one of the most notable unsolved problems of mathematics. Attempts to prove it prompted substantial development in number theory, and over time Fermat's Last Theorem gained prominence as an unsolved problem in mathematics.

21 | 22 |

The Pythagorean equation, x2 + y2 = z2, has an infinite number of positive integer solutions for x, y, and z; these solutions are known as Pythagorean triples. Around 1637, Fermat wrote in the margin of a book that the more general equation an + bn = cn had no solutions in positive integers, if n is an integer greater than 2. Although he claimed to have a general proof of his conjecture, Fermat left no details of his proof, and no proof by him has ever been found. His claim was discovered some 30 years later, after his death. This claim, which came to be known as Fermat's Last Theorem, stood unsolved in mathematics for the following three and a half centuries. 23 | 24 | The claim eventually became one of the most notable unsolved problems of mathematics. Attempts to prove it prompted substantial development in number theory, and over time Fermat's Last Theorem gained prominence as an unsolved problem in mathematics.

25 |
26 | 27 | 28 |
29 |

The Pythagorean equation, x2 + y2 = z2, has an infinite number of positive integer solutions for x, y, and z; these solutions are known as Pythagorean triples. Around 1637, Fermat wrote in the margin of a book that the more general equation an + bn = cn had no solutions in positive integers, if n is an integer greater than 2. Although he claimed to have a general proof of his conjecture, Fermat left no details of his proof, and no proof by him has ever been found. His claim was discovered some 30 years later, after his death. This claim, which came to be known as Fermat's Last Theorem, stood unsolved in mathematics for the following three and a half centuries. 30 | The claim eventually became one of the most notable unsolved problems of mathematics. Attempts to prove it prompted substantial development in number theory, and over time Fermat's Last Theorem gained prominence as an unsolved problem in mathematics.

31 | 32 |

The Pythagorean equation, x2 + y2 = z2, has an infinite number of positive integer solutions for x, y, and z; these solutions are known as Pythagorean triples. Around 1637, Fermat wrote in the margin of a book that the more general equation an + bn = cn had no solutions in positive integers, if n is an integer greater than 2. Although he claimed to have a general proof of his conjecture, Fermat left no details of his proof, and no proof by him has ever been found. His claim was discovered some 30 years later, after his death. This claim, which came to be known as Fermat's Last Theorem, stood unsolved in mathematics for the following three and a half centuries. 33 | 34 | The claim eventually became one of the most notable unsolved problems of mathematics. Attempts to prove it prompted substantial development in number theory, and over time Fermat's Last Theorem gained prominence as an unsolved problem in mathematics.

35 | 36 |

The Pythagorean equation, x2 + y2 = z2, has an infinite number of positive integer solutions for x, y, and z; these solutions are known as Pythagorean triples. Around 1637, Fermat wrote in the margin of a book that the more general equation an + bn = cn had no solutions in positive integers, if n is an integer greater than 2. Although he claimed to have a general proof of his conjecture, Fermat left no details of his proof, and no proof by him has ever been found. His claim was discovered some 30 years later, after his death. This claim, which came to be known as Fermat's Last Theorem, stood unsolved in mathematics for the following three and a half centuries. 37 | 38 | The claim eventually became one of the most notable unsolved problems of mathematics. Attempts to prove it prompted substantial development in number theory, and over time Fermat's Last Theorem gained prominence as an unsolved problem in mathematics.

39 |
40 |
41 |
42 | 43 |
44 |
45 |
46 |
47 |
48 |

The Pythagorean equation, x2 + y2 = z2, has an infinite number of positive integer solutions for x, y, and z; these solutions are known as Pythagorean triples. Around 1637, Fermat wrote in the margin of a book that the more general equation an + bn = cn had no solutions in positive integers, if n is an integer greater than 2. Although he claimed to have a general proof of his conjecture, Fermat left no details of his proof, and no proof by him has ever been found. His claim was discovered some 30 years later, after his death. This claim, which came to be known as Fermat's Last Theorem, stood unsolved in mathematics for the following three and a half centuries. 49 | 50 | The claim eventually became one of the most notable unsolved problems of mathematics. Attempts to prove it prompted substantial development in number theory, and over time Fermat's Last Theorem gained prominence as an unsolved problem in mathematics.

51 | 52 |

The Pythagorean equation, x2 + y2 = z2, has an infinite number of positive integer solutions for x, y, and z; these solutions are known as Pythagorean triples. Around 1637, Fermat wrote in the margin of a book that the more general equation an + bn = cn had no solutions in positive integers, if n is an integer greater than 2. Although he claimed to have a general proof of his conjecture, Fermat left no details of his proof, and no proof by him has ever been found. His claim was discovered some 30 years later, after his death. This claim, which came to be known as Fermat's Last Theorem, stood unsolved in mathematics for the following three and a half centuries. 53 | 54 | The claim eventually became one of the most notable unsolved problems of mathematics. Attempts to prove it prompted substantial development in number theory, and over time Fermat's Last Theorem gained prominence as an unsolved problem in mathematics.

55 | 56 |

The Pythagorean equation, x2 + y2 = z2, has an infinite number of positive integer solutions for x, y, and z; these solutions are known as Pythagorean triples. Around 1637, Fermat wrote in the margin of a book that the more general equation an + bn = cn had no solutions in positive integers, if n is an integer greater than 2. Although he claimed to have a general proof of his conjecture, Fermat left no details of his proof, and no proof by him has ever been found. His claim was discovered some 30 years later, after his death. This claim, which came to be known as Fermat's Last Theorem, stood unsolved in mathematics for the following three and a half centuries. 57 | 58 | The claim eventually became one of the most notable unsolved problems of mathematics. Attempts to prove it prompted substantial development in number theory, and over time Fermat's Last Theorem gained prominence as an unsolved problem in mathematics.

59 | 60 |

The Pythagorean equation, x2 + y2 = z2, has an infinite number of positive integer solutions for x, y, and z; these solutions are known as Pythagorean triples. Around 1637, Fermat wrote in the margin of a book that the more general equation an + bn = cn had no solutions in positive integers, if n is an integer greater than 2. Although he claimed to have a general proof of his conjecture, Fermat left no details of his proof, and no proof by him has ever been found. His claim was discovered some 30 years later, after his death. This claim, which came to be known as Fermat's Last Theorem, stood unsolved in mathematics for the following three and a half centuries. 61 | 62 | The claim eventually became one of the most notable unsolved problems of mathematics. Attempts to prove it prompted substantial development in number theory, and over time Fermat's Last Theorem gained prominence as an unsolved problem in mathematics.

63 | 64 |

The Pythagorean equation, x2 + y2 = z2, has an infinite number of positive integer solutions for x, y, and z; these solutions are known as Pythagorean triples. Around 1637, Fermat wrote in the margin of a book that the more general equation an + bn = cn had no solutions in positive integers, if n is an integer greater than 2. Although he claimed to have a general proof of his conjecture, Fermat left no details of his proof, and no proof by him has ever been found. His claim was discovered some 30 years later, after his death. This claim, which came to be known as Fermat's Last Theorem, stood unsolved in mathematics for the following three and a half centuries. 65 | 66 | The claim eventually became one of the most notable unsolved problems of mathematics. Attempts to prove it prompted substantial development in number theory, and over time Fermat's Last Theorem gained prominence as an unsolved problem in mathematics.

67 | 68 |

The Pythagorean equation, x2 + y2 = z2, has an infinite number of positive integer solutions for x, y, and z; these solutions are known as Pythagorean triples. Around 1637, Fermat wrote in the margin of a book that the more general equation an + bn = cn had no solutions in positive integers, if n is an integer greater than 2. Although he claimed to have a general proof of his conjecture, Fermat left no details of his proof, and no proof by him has ever been found. His claim was discovered some 30 years later, after his death. This claim, which came to be known as Fermat's Last Theorem, stood unsolved in mathematics for the following three and a half centuries. 69 | 70 | The claim eventually became one of the most notable unsolved problems of mathematics. Attempts to prove it prompted substantial development in number theory, and over time Fermat's Last Theorem gained prominence as an unsolved problem in mathematics.

71 | 72 |

The Pythagorean equation, x2 + y2 = z2, has an infinite number of positive integer solutions for x, y, and z; these solutions are known as Pythagorean triples. Around 1637, Fermat wrote in the margin of a book that the more general equation an + bn = cn had no solutions in positive integers, if n is an integer greater than 2. Although he claimed to have a general proof of his conjecture, Fermat left no details of his proof, and no proof by him has ever been found. His claim was discovered some 30 years later, after his death. This claim, which came to be known as Fermat's Last Theorem, stood unsolved in mathematics for the following three and a half centuries. 73 | 74 | The claim eventually became one of the most notable unsolved problems of mathematics. Attempts to prove it prompted substantial development in number theory, and over time Fermat's Last Theorem gained prominence as an unsolved problem in mathematics.

75 | 76 |

The Pythagorean equation, x2 + y2 = z2, has an infinite number of positive integer solutions for x, y, and z; these solutions are known as Pythagorean triples. Around 1637, Fermat wrote in the margin of a book that the more general equation an + bn = cn had no solutions in positive integers, if n is an integer greater than 2. Although he claimed to have a general proof of his conjecture, Fermat left no details of his proof, and no proof by him has ever been found. His claim was discovered some 30 years later, after his death. This claim, which came to be known as Fermat's Last Theorem, stood unsolved in mathematics for the following three and a half centuries. 77 | 78 | The claim eventually became one of the most notable unsolved problems of mathematics. Attempts to prove it prompted substantial development in number theory, and over time Fermat's Last Theorem gained prominence as an unsolved problem in mathematics.

79 | 80 |

The Pythagorean equation, x2 + y2 = z2, has an infinite number of positive integer solutions for x, y, and z; these solutions are known as Pythagorean triples. Around 1637, Fermat wrote in the margin of a book that the more general equation an + bn = cn had no solutions in positive integers, if n is an integer greater than 2. Although he claimed to have a general proof of his conjecture, Fermat left no details of his proof, and no proof by him has ever been found. His claim was discovered some 30 years later, after his death. This claim, which came to be known as Fermat's Last Theorem, stood unsolved in mathematics for the following three and a half centuries. 81 | 82 | The claim eventually became one of the most notable unsolved problems of mathematics. Attempts to prove it prompted substantial development in number theory, and over time Fermat's Last Theorem gained prominence as an unsolved problem in mathematics.

83 | 84 |

The Pythagorean equation, x2 + y2 = z2, has an infinite number of positive integer solutions for x, y, and z; these solutions are known as Pythagorean triples. Around 1637, Fermat wrote in the margin of a book that the more general equation an + bn = cn had no solutions in positive integers, if n is an integer greater than 2. Although he claimed to have a general proof of his conjecture, Fermat left no details of his proof, and no proof by him has ever been found. His claim was discovered some 30 years later, after his death. This claim, which came to be known as Fermat's Last Theorem, stood unsolved in mathematics for the following three and a half centuries. 85 | 86 | The claim eventually became one of the most notable unsolved problems of mathematics. Attempts to prove it prompted substantial development in number theory, and over time Fermat's Last Theorem gained prominence as an unsolved problem in mathematics.

87 | 88 |

The Pythagorean equation, x2 + y2 = z2, has an infinite number of positive integer solutions for x, y, and z; these solutions are known as Pythagorean triples. Around 1637, Fermat wrote in the margin of a book that the more general equation an + bn = cn had no solutions in positive integers, if n is an integer greater than 2. Although he claimed to have a general proof of his conjecture, Fermat left no details of his proof, and no proof by him has ever been found. His claim was discovered some 30 years later, after his death. This claim, which came to be known as Fermat's Last Theorem, stood unsolved in mathematics for the following three and a half centuries. 89 | 90 | The claim eventually became one of the most notable unsolved problems of mathematics. Attempts to prove it prompted substantial development in number theory, and over time Fermat's Last Theorem gained prominence as an unsolved problem in mathematics.

91 | 92 |

The Pythagorean equation, x2 + y2 = z2, has an infinite number of positive integer solutions for x, y, and z; these solutions are known as Pythagorean triples. Around 1637, Fermat wrote in the margin of a book that the more general equation an + bn = cn had no solutions in positive integers, if n is an integer greater than 2. Although he claimed to have a general proof of his conjecture, Fermat left no details of his proof, and no proof by him has ever been found. His claim was discovered some 30 years later, after his death. This claim, which came to be known as Fermat's Last Theorem, stood unsolved in mathematics for the following three and a half centuries. 93 | 94 | The claim eventually became one of the most notable unsolved problems of mathematics. Attempts to prove it prompted substantial development in number theory, and over time Fermat's Last Theorem gained prominence as an unsolved problem in mathematics.

95 |
96 |
97 |
98 |
99 | 100 | 101 | 106 | 107 | 108 | --------------------------------------------------------------------------------