I'm using JCrop to crop photos (obviously) and my issue is that I have the image clickable (launches a modal) and the width and height are different than what I have set for the image that is clicked on.
An example is:
$("#avatar-photo").html("<img src='" + replace + "' alt='Avatar' class='w3-center w3-round w3-border' style='height: 280px; width: 400px;' id='enlarged-photo'>
but when it loads in the modal, JCrop adds an inline style of this:
<img src="image.jpg" alt="Avatar" class="w3-center w3-round w3-border" style="height: 152px; width: 152px; display: none; visibility: hidden;" id="enlarged-photo">
Is there anyway to prevent JCrop from doing this, as it is making the image too small in the modal.
I hope that explains my issue.
Thanks!
update:
I've isolated the image sizing issue to this:
<img src="image.jpg" alt="Avatar" class="w3-center w3-round w3-border" style="height: 150px; width: 150px; display: block; visibility: visible; border: none; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; opacity: 1;">
My only question is now is how to stop JCrop from putting a height and width for the style?
I believe it may be because the codes are manipulating each other.
IN your JS:
style='height: 280px; width: 400px;'
IN your HTML:
style="height: 152px; width: 152px;
There both trying to value the image at a height and width. Remove one of them.
fixed it, it was a boxWidth and boxHeight issue
Related
I have an image to which I need to glue an input field. There will be several input fields and each of them should always be in its place, namely on a certain part of the image.
.input-circle {
border-radius: 50%;
width: 70px;
height: 70px;
}
<img class="figure-img img-fluid rounded" src="123.png"/>
<input class="form-control input-circle">
I need to do as shown in gif
perfect result
how can i bind input fields to image like that?
Or maybe I need to use a completely different concept?
Thanks in advance for your help!
Use position relative and absolute to achieve this. A little example:
.body_wrapper {
position: relative;
height: 100%;
width: 100%;
}
.input_wrapper {
position: absolute;
border-radius: 50%;
width: 70px;
height: 70px;
overflow: hidden;
top: 100px;
left: 100px;
}
.input_wrapper .input-circle{
height: 100%;
}
<div class="body_wrapper">
<div class="image_wrapper">
<img src="https://cdn.britannica.com/s:800x450,c:crop/96/177096-138-2CB46AEC/discussion-organ-systems-human-body-another-influence.jpg" alt="">
</div>
<div class="input_wrapper">
<input class="form-control input-circle">
</div>
</div>
Working fiddle
<div class="curbaT">
<img src="avertizare/1.png" class="img" >
<p class="p1">Curba la stanga </p>
</div>
.img{
left: 10px;
height: 100px;
width: 120px;
margin-top: auto;
margin-bottom: auto;
position: absolute;
}
I have several such divs (multiple classes "curbaT") and I want the image of the 2th, 6th, 7th, 15th and 22th div to be 150 wide.
I don't know javascript, just html and css, but this is what i would like to do using a script. From what I understood, you can select anything and change the respective characteristics. Thx!
Use the :nth-child(n) selector. Reference here.
.curbaT:nth-child(1) img,
.curbaT:nth-child(3) img {
width: 150px;
height: 30px;
}
<div class="curbaT"><img src="http://placekitten.com/100/30" /></div>
<div class="curbaT"><img src="http://placekitten.com/100/30" /></div>
<div class="curbaT"><img src="http://placekitten.com/100/30" /></div>
<div class="curbaT"><img src="http://placekitten.com/100/30" /></div>
Basically, I have a page that should load 3 pngs when you press the button. The problem I'm having is that I have one image #heart that I want to overlay onto a #background. I've tried different permutations of positioning but it (the #heart image) won't move at all, even with a high z-index over the lower layer. It won't even move to the right with left: x px
Sorry. I'm still pretty new. I'm completely stuck as to how to proceed. Developer tools just tell me that it's sitting in an image div above where I want it to be... Here's the code:
#heart {
z-index: 99999;
left: 200px;
top: 100px;
height: 100px;
width: 100px;
position: relative;
}
#background {
width: 800px;
margin: 0 auto;
display: none;
z-index: -10;
position: relative;
}
<div class="action">
<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="heart points image">
<img id="background" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png" alt="pin board image">
<div id="bennyNormal"></div>
</div>
To make this you will have to use some others css properties like flex and background-image and update you HTML DOM just like this:
#heart {
height: 100px;
width: 100px;
}
#background {
display: flex;
justify-content: center;
align-items: center;
width: 800px;
height: 500px;
background-image: url("https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png");
background-size: cover;
background-position: center;
position: relative;
}
<div class="action">
<div id="background">
<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="heart points image">
</div>
</div>
When you give an element "position: relative", it keeps it's place in the document flow, so when you change it's position on the page with top: 100px or whatever, it moves but the space it vacates is not removed from the document. Therefore, nothing moves in to take it's place and z-index does nothing.
Try this:
<div class="action">
// Switch the two images in the document flow to make this easier, although you can ignore that if you want.
<img id="background" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png" alt="pin board image">
<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="heart points image">
<div id="bennyNormal"></div>
</div>
So now, #heart is no longer "below" the #background image in the document flow. bennyNormal div is still "above" everything inside the #action div but because the #background image comes first (with a relative position (or even if it had no position) #background will keep the div below it on the page in the doc flow. If you also give #background display: block it will stop the div from moving up, if that ever becomes an issue.
Then:
#heart {
z-index: 99999; <== this is irrelevant now. get rid of it.
left: 200px; <== change these to position over #background as you wish
top: 100px;
height: 100px;
width: 100px;
position: absolute; <== important bit.
}
#background {
width: 800px;
margin: 0 auto;
display: none; <== You want it invisible? Should be block.
z-index: -10; <= Same with this. Don't screw around with z-index if you can avoid it.
position: relative; <== This no longer matters, but you can still include it
}
As nitin9nair comment, setting #heart { position: absolute; } seems to be enough
#heart {
position: absolute;
top:200px;
left:320px;
}
<div class="action">
<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="heart points image">
<img id="background" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png" alt="pin board image">
<div id="bennyNormal"></div>
</div>
I am just starting to learn jquery with very little JS knowledge (long story short - I'm told it helps provide shortcuts - if I had time I would learn JS properly).
With that out of the way, I am trying to essentially create a scrolling marquee or multi-frame hero banner, whatever you want to call it. I don't want any automation, I am looking specifically for the end user to click a button/image to change the marquee image.
I am having issues with my jquery as is AND I'd like to ask for assistance on another piece I am struggling with, which is hiding the image that is currently showing.
what is wrong with my current jquery that it will not work appropriately?
a. file is loaded at top of the page
b. when I execute this ($("#imgd2").fadeIn;) part of the jquery it works in firebug, but within the click function it does not...
how could I go about looking to see what image is currently showing, hide that and fade in the appropriate image. For example, img1 is displayed by default, if i click on img3, how can I hide image 1 before fading in marquee 3?
//html - forgive the laziness
//I am showing the first image by default and hiding the other two images on the page.
<div style="width: 100%; height: 450px;" id="img-container">
<div id="imgd1" style="width: 432px; height: 398px; position: absolute; background-image: url(img1.jpg); background-size: cover;"></div>
<div id="imgd2" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(img2.jpg); background-size: cover;"></div>
<div id="imgd3" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(img3.jpg); background-size: cover;"></div>
<div style="position: absolute; top: 438px; left: 322px;" id="bttns">
<img id="img1" src="active.png">
<img id="img2" src="active.png">
<img id="img3" src="active.png">
</div>
</div>
//jquery
//On click of a particular button, I want to fadein the appropriate image
$("#img1").click(function () {
$("#imgd1").fadeIn;
});
$("#img2").click(function () {
$("#imgd2").fadeIn;
});
$("#img3").click(function () {
$("#imgd3").fadeIn;
});
thanks in advance!
it must have a parenthesis :-)
$("#imgd5").fadeIn();
for question #2..heres my fiddle http://jsfiddle.net/5PP4z/2/
fadeIn is a function, you need to invoke it
$("#imgd3").fadeIn();
Instead of writing a click handler for each of the imgd elements, you can target all of them(by adding a class imgd) and use a data-* attribute to specify the image(data-target attribute with the id of the image) to be displayed. Also add a class img to all the images so that we can hide it easily.
<div style="width: 100%; height: 450px;" id="img-container">
<div id="imgd1" class="imgd" style="width: 432px; height: 398px; position: absolute; background-image: url(//placehold.it/432x398/ff0000); background-size: cover;"></div>
<div id="imgd2" class="imgd" data-target="#img2" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(//placehold.it/432x398/00ff00); background-size: cover;"></div>
<div id="imgd3" class="imgd" data-target="#img3" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(//placehold.it/432x398/0000ff); background-size: cover;"></div>
<div style="position: absolute; top: 438px; left: 322px;" id="bttns">
<img id="img1" class="img" data-target="#imgd1" src="//placehold.it/32/ff0000" />
<img id="img2" class="img" data-target="#imgd2" src="//placehold.it/32/00ff00" />
<img id="img3" class="img" data-target="#imgd3" src="//placehold.it/32/0000ff" />
</div>
</div>
then
jQuery(function ($) {
var $imgds = $('.imgd');
$('.img').click(function () {
var $target = $($(this).data('target'));
$imgds.not($target).hide();
$target.stop(true, true).fadeIn();
})
});
Demo: Fiddle
So I've been playing around with this for a while, but cannot get the binded click event to fire from a jqzoomed element.
HTML:
<div class="product-clicktozoom-image">
<div class="product-clicktozoom-image-main">
<img itemprop="image" id="mainimage" src="http://exampe.com/image.jpg" alt="Image" title="Image"/>
</div>
</div>
JS:
jQuery(document).load(function() {
jQuery('#mainimage').bind('click',function(){
var fancyImage = jQuery('#mainimage').attr('src');
jQuery.fancybox.open(fancyImage);
});
});
jqzoom creates a couple of extra div's so the final page structure actually looks like this:
<div class="product-clicktozoom-image-main">
<a href="example.com/image.jpg" class="jqzoom" title="" rel="gall" style="outline-style: none; text-decoration: none;">
<div class="zoomPad">
<img itemprop="image" id="mainimage" src="http://example.com/image.jpg" alt="Image" title="Image" style="opacity: 1;">
<div class="zoomPup" style="display: none; top: 105px; left: 145px; width: 126px; height: 126px; position: absolute; border-width: 1px;"></div>
<div class="zoomWindow" style="position: absolute; z-index: 5001; cursor: default; left: 0px; top: 0px; display: none;">
<div class="zoomWrapper" style="border-width: 1px; width: 355px; cursor: crosshair;">
<div class="zoomWrapperTitle" style="width: 100%; position: absolute; display: none;"></div>
<div class="zoomWrapperImage" style="width: 100%; height: 355px;">
<img src="http://example.com/image.jpg" style="position: absolute; border: 0px; display: block; left: -411.26760563380276px; top: -298.5915492957746px;">
</div>
</div>
</div>
<div class="zoomPreload" style="visibility: hidden; top: 156px; left: 132.5px; position: absolute;">Loading zoom</div>
</div>
</a>
</div>
I have tried binding the click event to the #mainimage, along with the zoomPad class and also the img within the zoomWrapperImage element as this appears to be the top element when you mouseover the image.
All I want to do is open the full image in a fancybox if they click on the zoom (currently the zoom happens on mouseover). I know the fancybox.open(fancyImage); works, I can run the code in the click function directly in the console successfully, I just can't get it to fire from the click event itself.
Help!
This turned out to be pretty simple in the end, the click event needs to bind on the .zoomPad, and I used window.load in place of (document).ready as that ensures all the elements have loaded.
Final JS:
jQuery(window).load(function() {
jQuery('.zoomPad').bind('click',function(){
var fancyImage = jQuery('.zoomWrapperImage img').attr('src');
jQuery.fancybox.open([{href : fancyImage}], {closeClick : true});
});
});