Saving Annotorius annotation data from Image Slider to mySQL via php - javascript
I need help getting anotation values from Annotorius Library. I have a ton of code (too much to post) for annotating images in a slider. Now I need to grab the annotation data (position, size and comment) to post to my server (php and mySQL).
Could anyone post some sample code that I can learn from?
If I'm not misunderstanding. the data you looking for is:
- position: x, y
- size: width, height
- comment: the annotation text
try this:
var datapost = new Array();
//loop all annotation
anno.getAnnotations().forEach(function(element){
var details = '==============================================================\n';
details += '\n image : ' + element.src;
details += '\n comment : ' + element.text;
var geometry = element.shapes[0].geometry;
var imgObj = new Image();
imgObj.src = element.src;
//get position and size by pixel
var position_x = Math.round(imgObj.width * geometry.x);
var position_y = Math.round(imgObj.height * geometry.y);
var size_width = Math.round(imgObj.width * geometry.width);
var size_height = Math.round(imgObj.height * geometry.height);
details += '\n position_x : ' + position_x;
details += '\n position_y : ' + position_y;
details += '\n width : ' + size_width;
details += '\n height : ' + size_height;
console.log(details);
//add data to post
datapost.push({
'image' : element.src,
'position_x' : position_x,
'position_y' : position_y,
'width' : size_width,
'height' : size_height,
'comment' : element.text
});
});
//post data to the server here
console.log(datapost);
After a lot of R&D , I can not get my answer . Now i have use jssor slider of jquery and https://annotorious.github.io/index.html library. Complete code is shown below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link type="text/css" rel="stylesheet" href="http://annotorious.github.com/latest/annotorious.css" />
<script type="text/javascript" src="js/annotorious.min.js"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/jssor.slider-21.1.6.mini.js" type="text/javascript"></script>
</head>
<body style="padding:0px; margin:0px; background-color:#fff;font-family:helvetica, arial, verdana, sans-serif">
<style>
/* jssor slider arrow navigator skin 05 css */
/*
.jssora05l (normal)
.jssora05r (normal)
.jssora05l:hover (normal mouseover)
.jssora05r:hover (normal mouseover)
.jssora05l.jssora05ldn (mousedown)
.jssora05r.jssora05rdn (mousedown)
.jssora05l.jssora05lds (disabled)
.jssora05r.jssora05rds (disabled)
*/
.jssora05l, .jssora05r {
display: block;
position: absolute;
/* size of arrow element */
width: 40px;
height: 40px;
cursor: pointer;
background: url('img/a17.png') no-repeat;
overflow: hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05l.jssora05ldn { background-position: -250px -40px; }
.jssora05r.jssora05rdn { background-position: -310px -40px; }
.jssora05l.jssora05lds { background-position: -10px -40px; opacity: .3; pointer-events: none; }
.jssora05r.jssora05rds { background-position: -70px -40px; opacity: .3; pointer-events: none; }
/* jssor slider thumbnail navigator skin 01 css *//*.jssort01-99-66 .p (normal).jssort01-99-66 .p:hover (normal mouseover).jssort01-99-66 .p.pav (active).jssort01-99-66 .p.pdn (mousedown)*/.jssort01-99-66 .p { position: absolute; top: 0; left: 0; width: 99px; height: 66px;}.jssort01-99-66 .t { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;}.jssort01-99-66 .w { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}.jssort01-99-66 .c { position: absolute; top: 0px; left: 0px; width: 95px; height: 62px; border: #000 2px solid; box-sizing: content-box; background: url('img/t01.png') -800px -800px no-repeat; _background: none;}.jssort01-99-66 .pav .c { top: 2px; _top: 0px; left: 2px; _left: 0px; width: 95px; height: 62px; border: #000 0px solid; _border: #fff 2px solid; background-position: 50% 50%;}.jssort01-99-66 .p:hover .c { top: 0px; left: 0px; width: 97px; height: 64px; border: #fff 1px solid; background-position: 50% 50%;}.jssort01-99-66 .p.pdn .c { background-position: 50% 50%; width: 95px; height: 62px; border: #000 2px solid;}* html .jssort01-99-66 .c, * html .jssort01-99-66 .pdn .c, * html .jssort01-99-66 .pav .c { /* ie quirks mode adjust */ width /**/: 99px; height /**/: 66px;}
</style>
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 960px; height: 480px; overflow: hidden; visibility: hidden; background-color: #24262e;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 240px; width: 720px; height: 480px; overflow: hidden;">
<div data-p="150.00">
<img data-u="image" src="img/01.jpg" />
<img data-u="thumb" src="img/thumb-01.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/02.jpg" />
<img data-u="thumb" src="img/thumb-02.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/03.jpg" />
<img data-u="thumb" src="img/thumb-03.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/04.jpg" />
<img data-u="thumb" src="img/thumb-04.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/05.jpg" />
<img data-u="thumb" src="img/thumb-05.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/06.jpg" />
<img data-u="thumb" src="img/thumb-06.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/07.jpg" />
<img data-u="thumb" src="img/thumb-07.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/08.jpg" />
<img data-u="thumb" src="img/thumb-08.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/09.jpg" />
<img data-u="thumb" src="img/thumb-09.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/10.jpg" />
<img data-u="thumb" src="img/thumb-10.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/11.jpg" />
<img data-u="thumb" src="img/thumb-11.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/12.jpg" />
<img data-u="thumb" src="img/thumb-12.jpg" />
</div>
<a data-u="any" href="http://www.jssor.com" style="display:none">Image Gallery with Vertical Thumbnail</a>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/13.jpg" />
<img data-u="thumb" src="img/thumb-13.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/14.jpg" />
<img data-u="thumb" src="img/thumb-14.jpg" />
</div>
</div>
<!-- Thumbnail Navigator -->
<div data-u="thumbnavigator" class="jssort01-99-66" style="position:absolute;left:0px;top:0px;width:240px;height:480px;" data-autocenter="2">
<!-- Thumbnail Item Skin Begin -->
<div data-u="slides" style="cursor: default;" class="mainrelated">
<div data-u="prototype" class="p">
<div class="w">
<div data-u="thumbnailtemplate" class="t"></div>
</div>
<div class="c"></div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora05l" style="top:0px;left:248px;width:40px;height:40px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora05r" style="top:0px;right:8px;width:40px;height:40px;" data-autocenter="2"></span>
</div>
<!-- #endregion Jssor Slider End -->
<script type="text/javascript">
jQuery(document).ready(function ($) {
var jssor_1_SlideshowTransitions = [
{$Duration:1200,$Zoom:1,$Easing:{$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad},$Opacity:2},
{$Duration:1000,$Zoom:11,$SlideOut:true,$Easing:{$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,$Zoom:1,$Rotate:1,$During:{$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
{$Duration:1000,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
{$Duration:1200,x:0.5,$Cols:2,$Zoom:1,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:4,$Cols:2,$Zoom:11,$SlideOut:true,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:0.6,$Zoom:1,$Rotate:1,$During:{$Left:[0.2,0.8],$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Left:$Jease$.$Swing,$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
{$Duration:1000,x:-4,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
{$Duration:1200,x:-0.6,$Zoom:1,$Rotate:1,$During:{$Left:[0.2,0.8],$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Left:$Jease$.$Swing,$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
{$Duration:1000,x:4,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
{$Duration:1200,x:0.5,y:0.3,$Cols:2,$Zoom:1,$Rotate:1,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.7}},
{$Duration:1000,x:0.5,y:0.3,$Cols:2,$Zoom:1,$Rotate:1,$SlideOut:true,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InExpo,$Top:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.7}},
{$Duration:1200,x:-4,y:2,$Rows:2,$Zoom:11,$Rotate:1,$Assembly:2049,$ChessMode:{$Row:28},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.7}},
{$Duration:1200,x:1,y:2,$Cols:2,$Zoom:11,$Rotate:1,$Assembly:2049,$ChessMode:{$Column:19},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.8}}
];
var jssor_1_options = {
$AutoPlay: false,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: jssor_1_SlideshowTransitions,
$TransitionsOrder: 1
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$,
$Rows: 2,
$Cols: 6,
$SpacingX: 14,
$SpacingY: 12,
$Orientation: 2,
$Align: 156
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*responsive code begin*/
/*you can remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 960);
refSize = Math.max(refSize, 300);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
// $xx= 0;
// setInterval(function(){
// if($xx==0){
$("#jssor_1").find('img').each(function(index){
$(this).attr('id','myyyyid'+index);
$mainid = $(this).attr('id');
anno.makeAnnotatable(document.getElementById($mainid));
});
// }
// }, 2000);
/*responsive code end*/
});
</script>
</body>
</html>
Complete html+jquery script of slider and annotation . You just copy and paste the code and run on browser. May be it will usefull for you.
Related
Overlap multiple images
I want to create a image object composed of 3 images.
Final picture how it should look like
There is one text image and two "gear" images.
Why I want to split them you ask? I want to implement a scrolling function which spins the gears of the image when scrolling down the page.
Later on I want that image object to be always on top at the left corner. Thats why I choose relative position. Cause the gears always have to stay relative to the text.
I got the function already but somehow Im having problems stacking the images onto eachother.
Thats how it currently looks like.
Current state
function rotate(e) {
e.preventDefault();
rot += e.deltaY * 0.5;
leftGear.style.transform = `rotate(${rot}deg)`;
rightGear.style.transform = `rotate(${rot}deg)`;
}
let rot = 0;
const leftGear = document.querySelector(".leftGear");
document.body.onwheel = leftGear.onwheel = rotate;
const rightGear = document.querySelector(".rightGear");
document.body.onwheel = rightGear.onwheel = rotate;
/* To make white images become visible */
body { background: #161924 }
.nav-logo {
width: 40px;
height: 40px;
}
.rightGear {
position: relative;
z-index: 2;
}
.leftGear {
position: relative;
z-index: 2;
}
.leftGear img {
display: block;
}
.rightGear img {
display: block;
}
<div class="nav-logo" style="display: block">
<img src="https://i.stack.imgur.com/vSCDm.png" height="60">
<div class="rightGear" id="rightgear">
<img src="https://i.stack.imgur.com/6541L.png" height="40">
</div>
<div class="leftGear" id="leftgear">
<img src="https://i.stack.imgur.com/6541L.png" height="40">
</div>
</div>
gearText.png (It has some blueish background so it doesn't overlap the wrong sections)
gear.png
You can play with absolute position and z-index here.
body {
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.nav-logo {
position:relative;
}
.rightGear {
position: absolute;
top: 12px;
left: 3px;
z-index: -1;
}
.leftGear {
position: absolute;
bottom: 6px;
right: 5px;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="nav-logo" style="display: block">
<img src="https://i.stack.imgur.com/vSCDm.png" height="60">
<div class="rightGear" id="rightgear">
<img src="https://i.stack.imgur.com/6541L.png" height="30">
</div>
<div class="leftGear" id="leftgear">
<img src="https://i.stack.imgur.com/6541L.png" height="30">
</div>
</div>
</body>
</html>
You need to wrap the first image into another div then make all of your positions absolute. Here's an example
.nav-logo {
width: 40px;
height: 40px;
}
.rightGear {
position: absolute;
z-index: 2;
}
.leftGear {
position: absolute;
z-index: 2;
}
.leftGear img {
display: block;
}
.rightGear img {
display: block;
}
.main{
position: absolute;
}
<div class="nav-logo" style="display: block">
<div class="main">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" height="60">
</div>
<div class="rightGear" id="rightgear">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" height="40">
</div>
<div class="leftGear" id="leftgear">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" height="40">
</div>
</div>
Just move those gears with position properties, depending on what you need. Also the gears are under the main logo, so they should have lower z-index than the main logo.
Also change the height of each gear from 40 to 30.
body {
background: #161924
}
.nav-logo {
width: 40px;
height: 40px;
}
.rightGear {
position: relative;
top: -52px;
left: 3px;
z-index: -2;
}
.leftGear {
position: relative;
top: -69px;
left: 27px;
z-index: -2;
}
.leftGear img {
display: block;
}
.rightGear img {
display: block;
}
<div class="nav-logo" style="display: block">
<img src="https://i.stack.imgur.com/vSCDm.png" height="60">
<div class="rightGear" id="rightgear">
<img src="https://i.stack.imgur.com/6541L.png" height="30">
</div>
<div class="leftGear" id="leftgear">
<img src="https://i.stack.imgur.com/6541L.png" height="30">
</div>
</div>
How to create image scrolling parallax effect with CSS?
I saw this cool scrolling effect online... Where the image blends with the next image when scrolling through sections. I've been trying to reproduce it, but I can't seem to figure it out? How can I create this effect on the web? Here is the link to where I saw the effect... http://readingbuddysoftware.com/how-it-works/ I've tried using position: fixed on the screenshots with the z-index of the section higher then the image, but the last screenshot is always on the top. Any ideas? Update: For various reasons (including placement, using slants...), I can't use the background-image css solution. I need a solution for using the <img> element.
This can be done using background-attchement:fixed and two similar images.
Here is a simple example:
body {
min-height:200vh;
margin:0;
background:url(https://picsum.photos/id/1069/150/150?grayscale) 20px 20px no-repeat;
background-attachment:fixed;
}
.box {
margin-top:220px;
height:200px;
background:url(https://picsum.photos/id/1069/150/150) 20px 20px no-repeat,
grey;
background-attachment:fixed;
}
<div class="box">
</div>
That you can easily scale with many images:
body {
min-height:250vh;
margin:0;
background:url(https://picsum.photos/id/1069/150/150?grayscale) 50px 50px/auto no-repeat;
background-attachment:fixed;
}
.box {
height:200px;
background:url(https://picsum.photos/id/1069/150/150) 50px 50px/auto no-repeat,
grey;
background-attachment:fixed;
}
.box:first-child {
margin-top:200px;
}
<div class="box">
</div>
<div class="box" style="background-image:url(https://picsum.photos/id/11/150/150);background-color:yellow">
</div>
<div class="box" style="background-image:url(https://picsum.photos/id/106/150/150);background-color:pink">
</div>
You can also consider the use of img and position:fixed but you will need some trick to hide the overflow using clip-path
body {
min-height: 250vh;
margin: 0;
padding-top: 100px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.box {
height: 200px;
background: grey;
clip-path: inset(0);
}
<div class="box">
<img src="https://picsum.photos/id/1074/200/120?grayscale">
</div>
<div class="box" style="background-color:red;">
<img src="https://picsum.photos/id/1074/200/120">
</div>
<div class="box" style="background-color:yellow;">
<img src="https://picsum.photos/id/1024/200/120?grayscale">
</div>
<div class="box" style="background-color:pink;">
<img src="https://picsum.photos/id/1024/200/120">
</div>
Or using mask
body {
min-height: 250vh;
margin: 0;
padding-top: 100px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.box {
height: 200px;
background: grey;
-webkit-mask:linear-gradient(#fff,#fff);
mask:linear-gradient(#fff,#fff);
}
<div class="box">
<img src="https://picsum.photos/id/1074/200/120?grayscale">
</div>
<div class="box" style="background-color:red;">
<img src="https://picsum.photos/id/1074/200/120">
</div>
<div class="box" style="background-color:yellow;">
<img src="https://picsum.photos/id/1024/200/120?grayscale">
</div>
<div class="box" style="background-color:pink;">
<img src="https://picsum.photos/id/1024/200/120">
</div>
For better support, here is a similar idea with some JS to avoid the use of clip-path or mask
I will update the position of the image using a CSS variables but you can easily do without:
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll+"px");
}
:root {
--scroll-var: 0px;
}
body {
min-height: 150vh;
margin: 0;
}
img {
position: fixed;
top: 20px;
left: 20px;
}
.box {
margin-top: 220px;
height: 200px;
background: grey;
position: relative;
overflow: hidden;
}
.box img {
top: calc(-220px + 20px + var(--scroll-var));
/* margin of box + top of the other image + scroll*/
position: absolute;
}
<img src="https://picsum.photos/id/1069/150/150?grayscale">
<div class="box">
<img src="https://picsum.photos/id/1069/150/150">
</div>
With many images:
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll+"px");
}
:root {
--scroll-var: 0px;
}
body {
min-height: 250vh;
margin: 0;
padding-top:200px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.box {
height: 200px;
background: grey;
position: relative;
overflow: hidden;
}
img.f1 {
top: calc(-200px + 50px + var(--scroll-var));
position: absolute;
}
img.f2 {
top: calc(-400px + 50px + var(--scroll-var));
position: absolute;
}
img.f3 {
top: calc(-600px + 50px + var(--scroll-var));
position: absolute;
}
<img src="https://picsum.photos/id/1069/100/100?grayscale">
<div class="box">
<img class="f1" src="https://picsum.photos/id/1069/100/100">
</div>
<div class="box" style="background-color:yellow;">
<img class="f2" src="https://picsum.photos/id/107/100/100">
</div>
<div class="box" style="background-color:pink;">
<img class="f3" src="https://picsum.photos/id/1072/100/100">
</div>
Making the height of parent equal to one of its children
I'm trying to make it so that the pink '#images-wrap' has the same height as the main image. Whenever there are too many small rollover images on the right, it pushes the height of the pink div to exceed the main image. If I could get it to match it's height instead, then I could use overflow hidden to not display the excess rollover images underneath and use overflow as scroll-y so the can scroll down to see the excess small images.
Displaying as a table doesn't work - you'd think a simple child div and hidden overflows would do the trick, but you can't as you can't set the height, otherwise the image aspect ratios wouldn't resize. The images must keep their 3:2 aspect ratios.
The javascript in this solution doesn't work as presumably it cannot fetch the image's height. I've also tried to fetch the height of the child image and this also failed.
Does anyone know of a magic trick that can achieve this?
Really appreciate any help here, thanks!
#images-wrap {
width: 50%;
height: auto;
margin-top: 25px;
float: left;
display: flex;
background: red;
max-height: 150px;
}
#details-wrap {
width: 100%;
height: 325px;
float: left;
text-align: right;
position: relative;
}
#main-image {
width: 80.5%;
float: left;
background-size: cover !important;
background-position: center center !important;
height: auto;
}
#main-image>img {
display: block;
width: 100%;
height: auto;
margin: 0;
}
#image-thumbs {
width: 17.5%;
height: auto;
float: left;
margin-left: 2%;
overflow-y: scroll !important;
/* make it only scroll when exceeds height of main image */
/* max-height: 400px; make this the height of #main-image */
}
.image-thumb {
margin-bottom: 6px;
background-position: center;
background-size: cover;
height: auto;
}
.image-thumb:last-of-type {
margin-bottom: 0;
}
.image-thumb>img {
height: auto;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="images-wrap">
<div id="main-image" style="background-image: url('http://elephant-family.org/wp-content/uploads/2015/06/shutterstock_77217466.jpg')">
<img src="https://cml.sad.ukrd.com/tp/3x2/" id="main-image-sizer">
</div>
<div id="image-thumbs">
<div class="image-thumb" onmouseover="$('#main-image').css('background-image', $(this).css('background-image'));" style="background-image: url('https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ffortunedotcom.files.wordpress.com%2F2014%2F09%2F174187214.jpg&w=800&q=85')">
<img src="https://cml.sad.ukrd.com/tp/3x2/">
</div>
<div class="image-thumb" onmouseover="$('#main-image').css('background-image', $(this).css('background-image'));" style="background-image: url('https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ffortunedotcom.files.wordpress.com%2F2014%2F09%2F174187214.jpg&w=800&q=85')">
<img src="https://cml.sad.ukrd.com/tp/3x2/">
</div>
<div class="image-thumb" onmouseover="$('#main-image').css('background-image', $(this).css('background-image'));" style="background-image: url('http://streamafrica.com/wp-content/uploads/2014/01/african-lion-wallpapers-hd-648x372.jpg')">
<img src="https://cml.sad.ukrd.com/tp/3x2/">
</div>
<div class="image-thumb" onmouseover="$('#main-image').css('background-image', $(this).css('background-image'));" style="background-image: url('https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ffortunedotcom.files.wordpress.com%2F2014%2F09%2F174187214.jpg&w=800&q=85')">
<img src="https://cml.sad.ukrd.com/tp/3x2/">
</div>
<div class="image-thumb" onmouseover="$('#main-image').css('background-image', $(this).css('background-image'));" style="background-image: url('http://streamafrica.com/wp-content/uploads/2014/01/african-lion-wallpapers-hd-648x372.jpg')">
<img src="https://cml.sad.ukrd.com/tp/3x2/">
</div>
<script>
// hides overflow scroll if less than 5 thumbs
var thumbs = document.getElementsByClassName('image-thumb');
var thumbsWrap = document.getElementById('image-thumbs');
if (thumbs.length < 5) {
thumbsWrap.style.overflow = 'hidden';
}
</script>
<script>
// makes '#image-thumbs' not exceed the height of '#main-image'
var mainImgHeight = document.getElementById('main-image-sizer').style.height;
var imageThumbsInitialHeight = document.getElementById('image-thumbs').style.height;
if (imageThumbsInitialHeight > mainImgHeight) {
document.getElementById('image-thumbs').style.height = mainImgHeight;
}
</script>
</div>
</div>
You can use display: flex on the main container:
#images-wrap {
width: 100%;
height: auto;
margin-top: 25px;
float: left;
display: flex;
}
#details-wrap {
width: 100%;
height: 325px;
float: left;
text-align: right;
position: relative;
}
#main-image {
width: 80.5%;
float: left;
background-size: cover !important;
background-position: center center !important;
height: auto;
}
#main-image>img {
display: block;
width: 100%;
height: auto;
margin: 0;
}
#image-thumbs {
width: 17.5%;
height: auto;
float: left;
margin-left: 2%;
overflow-y: scroll !important;
/* make it only scroll when exceeds height of main image */
/* max-height: 400px; make this the height of #main-image */
}
.image-thumb {
margin-bottom: 6px;
background-position: center;
background-size: cover;
height: auto;
}
.image-thumb:last-of-type {
margin-bottom: 0;
}
.image-thumb>img {
height: auto;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="images-wrap">
<div id="main-image" style="background-image: url('http://elephant-family.org/wp-content/uploads/2015/06/shutterstock_77217466.jpg')">
<img src="https://cml.sad.ukrd.com/tp/3x2/" id="main-image-sizer">
</div>
<div id="image-thumbs">
<div class="image-thumb" onmouseover="$('#main-image').css('background-image', $(this).css('background-image'));" style="background-image: url('https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ffortunedotcom.files.wordpress.com%2F2014%2F09%2F174187214.jpg&w=800&q=85')">
<img src="https://cml.sad.ukrd.com/tp/3x2/">
</div>
<div class="image-thumb" onmouseover="$('#main-image').css('background-image', $(this).css('background-image'));" style="background-image: url('http://streamafrica.com/wp-content/uploads/2014/01/african-lion-wallpapers-hd-648x372.jpg')">
<img src="https://cml.sad.ukrd.com/tp/3x2/">
</div>
<div class="image-thumb" onmouseover="$('#main-image').css('background-image', $(this).css('background-image'));" style="background-image: url('https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ffortunedotcom.files.wordpress.com%2F2014%2F09%2F174187214.jpg&w=800&q=85')">
<img src="https://cml.sad.ukrd.com/tp/3x2/">
</div>
<div class="image-thumb" onmouseover="$('#main-image').css('background-image', $(this).css('background-image'));" style="background-image: url('http://streamafrica.com/wp-content/uploads/2014/01/african-lion-wallpapers-hd-648x372.jpg')">
<img src="https://cml.sad.ukrd.com/tp/3x2/">
</div>
<div class="image-thumb" onmouseover="$('#main-image').css('background-image', $(this).css('background-image'));" style="background-image: url('https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ffortunedotcom.files.wordpress.com%2F2014%2F09%2F174187214.jpg&w=800&q=85')">
<img src="https://cml.sad.ukrd.com/tp/3x2/">
</div>
<div class="image-thumb" onmouseover="$('#main-image').css('background-image', $(this).css('background-image'));" style="background-image: url('http://streamafrica.com/wp-content/uploads/2014/01/african-lion-wallpapers-hd-648x372.jpg')">
<img src="https://cml.sad.ukrd.com/tp/3x2/">
</div>
<script>
// hides overflow scroll if less than 5 thumbs
var thumbs = document.getElementsByClassName('image-thumb');
var thumbsWrap = document.getElementById('image-thumbs');
if (thumbs.length < 5) {
thumbsWrap.style.overflow = 'hidden';
}
</script>
<script>
// makes '#image-thumbs' not exceed the height of '#main-image'
var mainImgHeight = document.getElementById('main-image-sizer').style.height;
var imageThumbsInitialHeight = document.getElementById('image-thumbs').style.height;
if (imageThumbsInitialHeight > mainImgHeight) {
document.getElementById('image-thumbs').style.height = mainImgHeight;
}
</script>
</div>
</div>
Why doesn't the gallery work?
Hi I'm trying to make a simple JS image viewer all it needs to do is change the image source for my mainImage to the source of an image I click on from the gallery. for some reason it doesn't work any ideas? I just left the css in that is necessary for you to view the gallery that's why it looks a bit crazy. When I paste the code in here and click on the image it gives me an error which I'm guessing is the problem. Also ignore the fact that the link for the jscript is missing as I just put it inline to rule out that it just wasn't comminucation properly.
Any help would be greatly appreciated.
here's a link to the page as it stands now it's in very early dev so it's not very good http://stevengamedev.com/page5.html
#charset "utf-8";
/* CSS Document */
#containerImg{
width:100%;
position: fixed;
top: 0px;
bottom: 0px;
}
#Gallery{
width:100%;
position: fixed;
top: 0px;
bottom: 0px;
z-index: -7;
background-color:;
}
#padding{
width:25%;
height:100%;
background-color:;
float: left;
}
#padding2{
width:18.75%;
height:100%;
background-color: ;
float: left;
}
#boundry{
background-color: ;
width:50%;
right: 0px;
height: 100%;
float: left;
margin-left: auto;
align-content: center;
}
#mainImage{
float:left;
width: 90%;
height: auto;
margin-left: 10%;
margin-top: 10%;
margin-right: auto;
background-color:rgba(0,0,0,0.65) ;
align-content: center;
}
#imagedescription{
color: white;
}
#contentcontainerimage{
width:75%;
margin-left: 25%;
height:100%;
z-index: 2;
float: left;
overflow-y: auto;
background-color: ;
z-index: inherit;
}
#Gallerybounds{
float: left;
height: auto;
z-index: inherit;
}
#Imagebounds{
float:left;
width: 25%;
height: 100%;
padding-left: ;
z-index: inherit;
background-color: rgba(0,0,0,0.50);
}
#Imagebounds img{
margin-left: 5%;
}
.gallery{
}
.imgStyle{
margin:auto;
align-content: center;
margin-bottom: 20px;
float: left;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Steven game design</title>
<link rel="stylesheet" type="text/css" href="style3.css"/>
<link rel="stylesheet" type="text/css" href="Image.css"/>
<link type="text/javascript" href=""/>
</head>
<div id="navigation">
<div id="navcontent">
<div id="icon">
<img src="images/softwares/nav.png">
</div>
<div id="bodycontainer">
<div class="navigationbody"></div>
<div class="navigationbody">
Home
</div>
<div class="navigationbody">
About
</div>
<div class="navigationbody">
Blog
</div>
<div class="navigationbody">
Videos
</div>
<div class="navigationbody">
Pictures
</div>
<div class="navigationbody">
Contact
</div>
</div>
</div>
</div>
<body>
<div id="Gallery">
<div id="padding"></div>
<div id="padding2"></div>
<div id="boundry">
<div id="mainImage"><img id ="mainImg" src="images/background/bridge4.jpg" alt="bridge" width="100%" height="auto">
<div id="imagedescription">
<h1>description!</h1>
<a>this is a description of the picture etc! lots more words need more words words words words words words.</a>
</div>
</div>
</div>
</div>
<div id="containerImg">
<div id="contentcontainerimage">
<div id="Gallerybounds">
<div id="Imagebounds" onClick="changeImage(event)">
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/Blog/help6.png" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function changeImage(event) {
event = event || window.event;
var targetElement = event.target || event.srcElement;
if (targetElement.tagName == IMG){
document.getElementById("mainImg").src = targetElement.getAttribute("src");
}
}
</script>
</body>
</html>
Try wrapping IMG in either double or single quotation marks so the if statement condition reads:
if (targetElement.tagName == 'img') {
document.getElementById("mainImage").src = targetElement.getAttribute("src");
}
How to get image size with jquery (Chrome, Safari...)
I am a jquery beginner and I need to get the height of an image by jquery.
This is the code I use:
$(document).ready(function ($) {
var height = $('#testor').height();
$('.slider-container').css("height", height);
});
This is the html code:
<div class="slider-container">
<button type="button" id="slider-left">Left</button>
<button type="button" id="slider-right">Right</button>
<div class="slider-image" ><img src="http://xxxx.jpg" class="alignnone size-medium wp-image-1558 testor" id="testor" /></div>
<div class="slider-image"><img src="http://xxx.jpg" class="alignnone size-medium wp-image-1557 testor" /></div>
<div class="slider-image"><img src="http://xxx.jpg" class="alignnone size-medium wp-image-1556 testor" /></div>
</div>
And the css:
.slider-image {
position: absolute;
width: 100%;
}
.slider-image img{
width: 100%;
height: auto;
}
.inline-block {
display: inline-block;
}
.slider-container {
position:relative;
width: 100%;
overflow: hidden;
}
#slider-left {
position: absolute;
top: 50%;
z-index: 1;
}
#slider-right {
position: absolute;
top: 50%;
right: 0;
z-index: 1;
}
It's working fine with Firefox and IE but not in Chrome and Safari.
I found out that it is a problem with webkitbrowser.
Often it is suggested to use $(window).load instead of $(document).ready but that also doesn't work.
Does anyone have an idea how to fix it. I tried for two days to find a solution and don't know what to do now.
Best reagards
Mythos
$(document).ready(function ($) {
var myimage = document.getElementById("testor");
var w = myimage.width;
var h = myimage.height;
//Assign the variable to your jquery css
$(".slider-container").css("height",h);
});
JSfiddle
Attach load event to <img> element at .ready(); call .height() within load event handler, as the element may not be fully loaded if .height() is called before load event completes and could return 0
.slider-image {
position: absolute;
width: 100%;
}
.slider-image img {
width: 100%;
height: auto;
}
.inline-block {
display: inline-block;
}
.slider-container {
position: relative;
width: 100%;
overflow: hidden;
}
#slider-left {
position: absolute;
top: 50%;
z-index: 1;
}
#slider-right {
position: absolute;
top: 50%;
right: 0;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
$(document).ready(function($) {
$('#testor').on("load", function() {
var height = $(this).height();
console.log(this.complete);
alert(height);
$('.slider-container').css("height", height);
console.log(".slider-container height:",
$('.slider-container').css("height"));
})
});
</script>
<div class="slider-container">
<button type="button" id="slider-left">Left</button>
<button type="button" id="slider-right">Right</button>
<div class="slider-image">
<img src="http://lorempixel.com/100/100/" class="alignnone size-medium wp-image-1558 testor" id="testor" />
</div>
<div class="slider-image">
<img src="" class="alignnone size-medium wp-image-1557 testor" />
</div>
<div class="slider-image">
<img src="" class="alignnone size-medium wp-image-1556 testor" />
</div>
</div>