|
Copied To Clipboard!
<!DOCTYPE html>
<html>
<head>
<title>highQuery Image Thumbnail Group 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 Group 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:90%;}
*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;
}
.ggs {
position:absolute;
z-index:100; background-color: rgba(255,255,255,0.8);
box-shadow:0 0 7px rgba(0,0,0,0.5); cursor: pointer;
-moz-box-shadow:0 0 7px rgba(0,0,0,0.5);
-webkit-box-shadow:0 0 7px rgba(0,0,0,0.5);
font-family:Arial, Helvetica, sans-serif;
font-size:11px; font-weight: bold;
padding:2px 6px;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border:1px solid #fff;
opacity:0.5;
color:#000; text-decoration: none;
}
.ggs.active {
opacity:1;
}
.fullimage img {
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
}
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 Group Function</h3>
<div class="row">
<div class="half1">
<div height="50" data-roll="thumbnail-group"><img src="images/slider-bg1.jpg"><img src="images/slider-bg2.jpg"><img src="images/slider-bg3.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>
|