How to make the avatar preview image fluid when using jCrop - javascript

When a user wants to change their avatar in BuddyPress, they are given the opportunity to crop their new image after uploading it.
During the 'crop step', the uploaded image is displayed on screen. This 'preview image' seems to be a fixed size (it does not resize when the browser window is enlarged or made smaller). I'd like the preview image to resize when the browser window is resized (i.e. be fluid).
Any idea how can I do this?
Notes: jCrop (which is provided in the WordPress core) is being used to crop the avatar.
I tried adding this to my stylesheet but that didn't work:
img {
max-width : 100%;
height : auto;
}

try this css code
img{max-width:100%;height:auto;}

Maybe you can try to destroy jCrop when user resize the window and create it again when user stop resizing. jCrop create his own image when jCrop is created and maybe this is the problem.

Try this:
In your JS:
var jcrop;
$(window).rezise(function(){
jcrop.destroy();
jcrop = $('#yourIMG').Jcrop({
boxWidth: $('#yourIMG').width(),
boxHeight: $('#yourIMG').height(),
// ...
});
});
$(document).ready(function(){
jcrop = $('#yourIMG').Jcrop({
boxWidth: $('#yourIMG').width(),
boxHeight: $('#yourIMG').height(),
// ...
});
});

Like I said I have no idea what the code looks like so... You may have to overwrite some stuff.
This is how you should do it.
HTML:
<div id="inner">
<img src="http://c.dryicons.com/images/icon_sets/shine_icon_set/png/256x256/business_user.png" />
</div>
CSS:
#inner {
width: 40%;
height: 40%;
border: 1px solid;
}
img {
width: 100%;
height: auto;
}
Wrap the preview image in a div and give it a class/id. Set there height and width to percentages (whatever you want). Now as long as it parent etc can resize this will as well now. Get the image inside and set the CSS to width: 100%; and height auto; This will get it to take up the wrap we just made. Now you only have to worry about putting the wrap in the right place. Mess around with it until you get what you want.
Note: If there are styles already on it you may need to use !important; but I would not recommend it.
DEMO HERE
If this still is not an option, you could use jQuery to get the width of the screen and using that update the image to resize. Not the best way but you could do that.

Related

Standardize image into div

I'm working with Bootstrap and I want to put some photos into my div and I want them to be all at the same size ("standardize").
If they're too big (and they will always be) I want to resize them to fit in my div and crop them if necessary.
For the moment her is what I do :
I've tried to change the style of the image in jQuery in a function:
• If the height is bigger than the width, I switch the style to max-width:100% and height auto.
• Inversement if the width is bigger than the height.
But I'm still new to jQuery and I am probably doing something wrong; can someone light my lantern please?
Here is my jQuery
$(document).ready(function(){
photoResize();
$(window).resize(function(){
photoResize();
});
});
function photoResize(){
image_w = $('img').width();
image_h = $('img').height();
if(image_h > image_w)
{
$('img').css("max-width","100%");
$('img').height("auto");
}
else if(image_w > image_h)
{
$('img').css("max-height","100%");
$('img').width("auto");
}
}
And here is a Fiddle for a better view : https://jsfiddle.net/Baldrani/DTcHh/9801/
Simplicity
I do this quite often in the CMS we use at work for galleries etc. The method I use involves a jQuery library called imgLiquid.js.
This will turn an inline image into a background image on the parent div. It's good because you can achieve your desired effect. It will crop the image (as it technically becomes a background image) and will apply background-size: cover; and background-position: center center; as inline styles.
You can find the plugin here
To initialize the plugin you just need:
$(".myele").imgLiquid();
Overheads
The plugin is very small (roughly around 5.106 KB) so you don't need to worry about adding weight to the page. It really it the most simple method I've come across (bar using thumbnails generated from the sever-side - see note at the bottom).
Cue CSS
I've tested this thoroughly and found it gives excellent results. You may then ask... what happens to my parent divs (as technically the plugin hides the img element - which therefore means the parent element doesn't know what height to make itself).
An easy method to make things work responsively, or not:
.myelement:before{
content: "";
padding-top: 50%;
display: block;
}
This CSS will give your heights back to the wrapping element. So if you wanted certain proportions you could use this math:
h / w * 100 = your percentage for the padding-top.
Working Example
Small note
Technically if I had the control I'd advise just using thumbnails.. I assume you're using some sort of system that could technically just render cut down versions of the images? The reason I use this method — and suggested it — is that I don't have control over the CMS and I'm assuming you just want to manage the code that's being produced as it's not stated.
if you want to make your images the same size then you dont need any javascript or calculations, why not just set it in css?
.someUniqueContainer img{
width:300px;
height:300px; // or what ever height you want
}
I'm guessing that in reality you actually want to crop all your images to a set width/height. if that's the case you'll need a serverside script for that.
where are the images coming from? it would be easyer to just edit them. if they are coming from a user then you would resize/crop on the server on file upload
There were several mistakes in your code.
Please look at this jsfiddle, please see https://jsfiddle.net/DTcHh/9796/
$(document).ready(function () {
photoResize();
$(window).resize(function () {
photoResize();
});
});
function photoResize() {
image_w = $('img').width();
image_h = $('img').height();
if (image_h > image_w) {
$('img').css("max-width", "100%");
$('img').height("auto");
} else if (image_w > image_h) {
$('img').css("max-height", "100%");
$('img').width("auto");
}
}
sth like this?, although this is pure css, not jquery included, might not be suit in your case..
body {
margin-top:20px
}
.col-xs-3 {
margin: 5px 0;
width: 500px;
height:120px
}
.col-xs-3 > div {
width: 100%;
height: 120px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
JsFiddle

is there a way to resize an image and have an image map stay in the same place? (html/Javascript/CSS)

i am currently making a website that s designed to be a test. It has an image and an image map, i am trying to use JavaScript to get the clients screen size and resize the image to fit the clients screen size but when i do the image map is not were i need it to be. Is there a way to get the image map to stay in the same place with out having to "physically" resize the image in paint or Photoshop. My site (with out getting the clients screen size). Basically i am trying to make the image fit their screen so its easier to navigate the test,its realistic, but without screwing up my image map positioning. Any hep would be much appreciated.
`<map name="desktopmap" >
<area onclick="correct();" shape="rect" coords="1,575,38,597" href="OS2.html" >
</map>
<img onclick=" wrong('OS2');" src = "../Pic/desktop.png" usemap = "#desktopmap" >`
Thank you.
What you can do instead is use absolutely positioned divs with percentage-based coordinates and dimensions, and hook your click events into those. That should allow your invisible "buttons" to scale nicely with the image. Image maps are a bit outdated and not very flexible.
Example fiddle (updated with correct/wrong functions):
http://jsfiddle.net/3ZLeK/1/
Example new HTML structure:
<div class="wrap">
<img class="bg" src="http://i.imgur.com/WgsCTDj.gif" />
<div class="box box1"></div>
</div>
Example new CSS:
.wrap {
position: relative;
overflow: auto;
}
.bg {
float: left;
width: 100%;
}
.box {
position: absolute;
cursor: pointer;
}
.box1 {
top: 95%;
left: 0;
width: 7%;
height: 5%;
}
In the fiddle I also changed your inline Javascript handling to use event handlers, because those attribute handlers are outdated as well.
You may use mediaqueries to rescale/zoom your map .
two experimental test here : http://dabblet.com/gist/5586117 and http://codepen.io/gcyrillus/pen/AJHmt
If you follow this idea, and think of using zoom + javascript instead of mediaquerie to include older browser such as IE , beaware of that some version of IE understands both : transform:scale(x); and zoom:X; . make sure you do not aplly twice a rescalling in that case.
Basicly , coords are pixels coordonates, a scaling is the only way, unless you modyfy each values of each coords :)
... not too sure my english is clear/correct enough.

How do I resize/crop images simualar to how background-size:cover does?

I am building a responsive site using bootstrap 3 & I need a photo gallery on it. The client want to update the gallery themselves..
My issue is the images that they upload can be of any size & any proportion.. How can I make the image fit a certain size div?
Requirements (must work similar to background-size:cover):
-images must keep their original proportions (can be cropped to fit the div)
-images must be stretched/shrunk to fit the FULL div (no white space)
-image must be centered vertically & horizontally in the div
I know I can do something like this but I need it to work more like "background-size:cover":
.myImages {
height:300px;
width:300px;
overflow:hidden;
}
http://jsfiddle.net/w4xTN/1/
EXAMPLE:
You can see at the link below that I have used "background-image:cover" for the "featured properties" photos.. I need to do something similar for normal images (unless someone knows of an image gallery that will support "background-image:cover" for the images?):
http://new.amberlee.com.au/for-sale/browse-for-sales
NOTE: JQuery/Javasript is OK to use & resizing them on upload is not an option ;)
You've got your tag within the .myImages so you need to add properties for your tag hence:
.myImages > img {
height: 100%;
width: 100%;
}
If you want to center the img, just change the height or width attribute to "auto";
you could also hack the img tag to center vertically whereby the image is cropped with playing with the vertical margin:
e.g.
margin-top: -33%;
http://jsfiddle.net/denistsoi/rLmxL/1/
No, you can't get it quite like background-size:cover but..
This approach is pretty damn close: it uses javascript to determine if the image is long or tall and applies styles acordingly.
JS
$('.myImages img').load(function () {
var height = $(this).height();
var width = $(this).width();
console.log('widthandheight:', width, height);
if (width > height) {
$(this).addClass('wide-img');
}
else {
$(this).addClass('tall-img');
}
});
CSS
.tall-img{
margin-top:-50%;
width:100%;
}
.wide-img{
margin-left:-50%;
height:100%;
}
http://jsfiddle.net/b3PbT/
Edit: this is a shameless repost from your last question ;)

how to change css img element with javascript

I would like to change the CSS using javascript so that I can dynamically adjust the height of a single image on my web page. This is being done so that the image will fit nicely in the viewable screen no matter what the screen size.
My CSS
.wrapper img {
height: 630px;
}
My Div
<div class="wrapper" id="imageDiv"></div>
What javascript code should I use to change the CSS height to say 200px.
Thank you.
Why not just set the height in percentage if the goal is to autoadjust based on viewport height etc:
.wrapper img {
height: 100%;
}
Anyway:
document.getElementById('imageDiv').style.height = '200px';
Try this :
document.getElementById("imageDiv").style.height="200px";
(this would only change it for that one element.)
Using JQuery, you could just put inside the method that you want:
$('img.wrapper').css('height','200px');

How do you create auto resizing a iframe when you make your browser smaller?

Does anyone know of a way to auto resize an iframe when you make your browser smaller??
You can attach a handler to the window.onresize event, and then resize your IFRAME appropriately.
I prefer jQuery:
$(window).resize(function() {
$('IFRAME').width($(window).width());
});
One option is to specify the <iframe> size in percent.
Haven't tried it but I guess you could use a percentage width instead of a fixed width. In that case you should probably add a minimum width and height as well, to avoid that it is getting too small:
iframe
{
width: 50%;
height: 50%;
min-width: 300px;
min-height: 300px;
}
You could as well use this.
Basically it makes use of callResize() in Child page and resizeIframe() in Parent page.
You can also do this without JavaScript if you'd like using CSS Media Queries. See this example here:
http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html
They are often used for "responsive design".

Categories