highQuery-Image-Thumbnail - Add a nice thumbnail image popup to full size using highQuery functionality. This framework works with: Internet Explorer (Windows 8) and many more, Opera, Chrome, Firefox, Safari, Mac OS X, Linux, iOS and Android.
Compatible Modern Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser
Example: View Code Demo
Get All Files: Download .zip File
<!DOCTYPE html> <html> <head> <title>highQuery Image Thumbnail Function | Web and mobile framework</title> <script src="javascript/jQuery.js" type="text/javascript"></script> <script src="javascript/ui.js" type="text/javascript"></script> <script src="javascript/core.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="css/jui.css"> <style> /* Begin highQuery Image Thumbnail Function */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == */ /* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ *{margin:0; padding:0;} .row {clear:both; margin-bottom:20px; border-bottom:1px solid #EEE; padding-bottom:20px;} .half1 {display:inline-block; vertical-align:top; width:39.444%;} *html .half1{display:inline;} .thumb { padding:5px; border:1px solid #ddd; background-color:#fff; display:inline-block; vertical-align:top; cursor:pointer; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; margin:3px; } .thumb img { border:none; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; } .thumb.hover { box-shadow:0 0 25px rgba(0,0,0,0.5); -moz-box-shadow:0 0 25px rgba(0,0,0,0.5); -webkit-box-shadow:0 0 25px rgba(0,0,0,0.5); border-color:#999; } *html .thumb { display:inline; } .fullimage { border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; box-shadow:0 0 37px #000; -moz-box-shadow:0 0 37px #000; -webkit-box-shadow:0 0 37px #000; background-color:#000; cursor:pointer; position:fixed; left:50%; top:50%; z-index:99; } h3 {width:auto; color:#2A94FE;font-weight:normal;margin-bottom:20px;margin-top:20px;padding:10px 10px; background-color:#EEE;font-family:Arial, Helvetica, sans-serif;font-size:19px;} p {font-family:Arial, Helvetica, sans-serif;font-size:12px; line-height:1.3em;padding:5px 10px;} #content {margin:100px 25px 0 15px;} </style> </head> <body> <h3>Image Thumbnail Function</h3> <div class="row"> <div class="half1"> <div height="60" data-roll="thumbnail"><img src="images/image_one.jpg"></div> <div height="120" data-roll="thumbnail"><img src="images/image_two.jpg"></div> </div> </div> <p>Click on any thumbnail image above to see it enlarge... click on the enlarged picture to close the image view.</p> <div id="content"> <h3 style="background-color:#ccc;margin-bottom:1px;color:#000;">highQuery | Web and Mobile Framework</h3> <h3 style="margin-top:0;">Information</h3> <p>This framework works with: Internet Explorer (Windows 8) and many more, Opera, Chrome, Firefox, Safari, Mac OS X, Linux, iOS and Android. highQuery is open source - you can use and change for free - no license required. highQuery is based on jQuery, HTML5 and CSS3. jQuery and jQuery Ui are required. The framework can detect flash, browser-names, device-names and os-names. It's easy to use!</p> </div> </body> </html>