JavaScript would probably do it, I have searched but found nothing to do with maxWidth. Only resizing images out of the blue.
What I need is a piece of JavaScript code to resize an image if it's too big(defined in a variable.)
Is there some reason why you can't use the max-width CSS property to do what you want, like:
<img src="myImage.png" style="max-width: 600px;">
...or even better:
<style>
.widthConstrained {
max-width: 600px;
}
</style>
...
<img src="myImage.png" class="widthConstrained">
Edit:
If you must use JavaScript for compatibility reasons, I suggest that you use something like the code specified in this question to check the total image width after it loads, and clamp it down if needed, roughly like:
var img = $("img")[0]; // Get my img elem
$("<img/>") // Make in memory copy of image to avoid css issues
.attr("src", $(img).attr("src"))
.load(function() {
if (this.width > maxWidth) {
$(img).width(maxWidth);
}
});
I take it you have a <img /> tag in your webpage.
To shrink images that are too large, simply insert the width and height attribute, along with your image source and a alt, along with a ID.
<head>
<script type="text/javascript" />
function pie()
{
var pathToImage = "bla/bla/Image.jpg";
document.GetElementByID(Image1).setAttribute("src",pathToImage);
}
</script>
</head>
<body onload=Pie() >
<img ID="Image1" alt="random Image" width="300px" Height="200px" />
</body>
Related
Same title. I'm not sure if this is a browser bug or behavior, see below example:
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var srcs = [
'https://i.stack.imgur.com/sIH1O.jpg?s=48&g=1',
'https://www.gravatar.com/avatar/9aa2aa68144b2781ac025a29c83bbdd4?s=32&d=identicon&r=PG',
'https://www.gravatar.com/avatar/c0377fc1b08293d3362611978913a32b?s=32&d=identicon&r=PG',
'https://www.gravatar.com/avatar/07f36acea2b942f61102221f92f62f6e?s=32&d=identicon&r=PG',
//
// 'data:image/png;base64,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',
// 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAIAAgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A+rrt20+0mnml8qCJC7ux4VQMkmvz3+Iv7Zfie68ZzPpsrrokNwwhgibYzx543H19+3vX6T694cTVdGvrJ1ylxC8RHsVIr4E+FHgH4beIPDOnw63YR2+s7nZ5N7GSXJLYx6gdvQV+hYnMY4aj7W19eh+QcO5W8wrypytoup13wr/bf8Ma5Da6X4ggudN1M/L50nzwv9W4IOPbHvX0pYzW+t6fb31owkt7iMSRyDupGRXxb8Xfht4Tg+H0mpeCLt9QitL9ZDDKAWjWT92wX5Q3LBDg9lyK+rv2cb/S9Y+FejW1hqVrqFxZwKl1Fbyb2tpGG7y35yGGcc+lXgM0jjIOVrNP5k8RZEsslFw2fzX3n0l9jUjpXwV+0Nc2PwF+MM81v4bS6jvp01O3nQlSivkSKMA8eZv7cAgcZr7mXW4yPviviL9tzQbfXPF+ma0/iK7uJbSNo1tIXwtovy78L9xgcZOQSGPJxgL8RnmKhgcI6mI2bS83+Kv8vU93hiv9Wx6lHVNHAeOPjXcQeD97aZY6fMZ0+wwKAEuGbBBYccDDEk44UnAr0T/gn7qFzqU/iuC306ZdHifc1+7ptknJHRVJHKjPykgc5PIrJ+FXwr0DxPr0Oo3mj6r4znlgWMPrEUJso3H8Q/u9Tk4bHGOnP2V4O8CaH4St0i0jR7DSnEWx106AQx4zuICjjGSeTz61+NYbxJwOV4yOGdOXLJ+9LTRar4d/PXofc8QUJ5tTfJpZaJ+p/9k=',
// 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFVUlEQVRYw8WXa2yTVRjHf+/etm/b9bJbt25zF8pgdzYdBUaQASIYJYjEaFSiRgPEAEYSEo1+0vjdkGhCTIjIB2+JkMAEZH7gNsIcsCsblwJzF7aua7e263p5u75+GGIWxujojOfr83/O+Z1znss5ws7P31P4H4dqLuJgIEj35Rv03OjF6/aBomBIMWDNz6K0ppiM7PT/BkCJKVw+00JbYweT0clpNo9zFI9zlK7m6xRV2nh200o0Ws38AUxOTnLuWCM3Wx2PnczRcQf3kIcX396IwZScOICiKJw/fnHa4oIAJr0WbyBEviWFN9bWsMSWwz23l6ON7Vzs6qH+0Ele2bEZKY6TmBVguN/FjZZbqEWRbetrWFVuozgvE4vZgNsXwJysQyUm3Vfnsbm2gms9g2z/6meunm2lduOyxABuX7uLIMC3e19jZdmCabb0RxxxeWE2H22t44sf/+CZ1VVIOmlWgKTZjO5BN0sX5T20+OPG8pIC5IjMXzf7HqudFcDr8WHSa+ecWtnpZtSiOJWqiQDEYgreQGjOABqVSHmBlWAgmFgMqDVq0s1Td+2bCHG23cHQqJ+cNDMv2EsQk6b4224P8NufXQiCwLrqRSwvKWBtdRHHb/UlBqA3aKmrXIg3EORA/UVCEZnhsXHOBBwkazWsqSpCURS+PnaBHqcHa6qRysJsFEVhy8pKTvc5EwMwpZkozc/CnKzDnKzlu9+b+KdxSGoVa6qKAFiyIJtQROZmv4svfziNvTgfa5qJ3VtW0xqNPjnAwowUMu5fgb04n/27tqKXNBRkppKbYb5fmAT2bFk9o39LYweq5aVMPnEMqEQ0qilJzaK8OQfj6+uX8os/8ORZsKGuGqNeeuJWK+ikxGJgUFEQBGFGW2fPIIcbmqkozKbPNcZnbz7/kGZEjiZWB0bkKI5geEabfyJMZoqR0fEgi5+yzKgRhXlox2OPiOLaskJqywpn9W0fDyYO0OQLUG3Qo7lfdNy+AAdPNZGZYiAUkQlFooRkGYvJwKYV5WSlGgEIx2IMReTEAWRF4fpEiCUGPQCpRj1rq4vQqERy0s1IahWSWsXdITcpBt0DP1ckGlegJsUj6g4EcY76pxwEAfvifKpsuVzovMP+o+cAKMnLQlL/u59hWY4vU+J9FQebuinLTufllZUkCbNHV3evk16dhmuh8PycAEBeaQGfHKznw2+OEAzPvrtUow6jJr42HvezPJyaiyUrk4arN9j46QFWVdhISdYyHgwzPDaOWiXS4hhg50u1vPWcnU6vFvDOD8C9u4MoPjfvbH+fHw4d5l7/AL+eb3tIZ9RJrKqw0RKQGImq8Q9PYLDoHlnM4roCOSJzqaGZrvZOjCYT23d9wOZXt2I0GafpcjPMfP/xNjyGHG6F1ACc+qmBzqbu+E9AURQ8Tg8913tx9rsI+AL4x8aRwzKjqjEi4TAaSaJmmZ2KqiV0tXfg7e8hVy/w7qY6rsVSGQuJD+bT6XVcPHmJ4QEXZUuLycrLJClp+p5VTQ3NuIdGCYfC+Dx+QhMzP8Gi0SjtrW0sXT711JYkieLyMq74fGRZM2h0+AjqFZJMJiRpqgllWq0M9PXjaL+No/022mQttrJCip9ehCUnA0EQEIC4P6dGk4nd+/YiSRIdrW2crj+B3+9HJYqULijAF5jA5fVRt34d9toVtDRf4fiRozPOlW5No8xeMjcAgELbArQ6HW7XCO6REWKxGJVFNrzjAXqHnIiiSF5BPhkWC6npaTScODV/v2OAnjt3Ka0oZ/e+vbiGhzl74iQSChtW2DlUf4ode3aRlW0lFosxOHDvsfP9DZRm+jqPr69OAAAAAElFTkSuQmCC',
// 'data:image/jpeg;base64,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',
];
var $x = $('#x');
var i = -1;
setInterval(function() {
++i;
if(i >= 4) {
i = 0;
}
$x.attr('src', srcs[i]);
}, 100);
});
</script>
</head>
<body>
<img id="x" width="50" height="50">
</body>
</html>
Every few random seconds, the images are requested again, although fetched from disk cache, but request is happening. If you resize window, the requests may happen even more frequently.
Check JS Fiddle
I tried using base64 images instead of URLs, still same thing. This is an issue because the visible image may glitch/flicker when request occurs.
EDIT
How to prevent chrome from requesting the same image again?
This is the right behavior as "Memory Cache" stores and loads resources to and from Memory (RAM). So this is much faster but it is non-persistent. Content is available until you close the Browser.
"Disk Cache" is persistent. Cached resources are stored and loaded to and from disk.
For more info on how Chrome caches works (memory and disk), please refer to this link.
Placing multiple imgs, hide all and show only 1 at a time, prevents Chrome from requesting same images. With this approach, each image is requested only once.
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var i = -1;
setInterval(function() {
++i;
if(i >= 4) {
i = 0;
}
$('.img').hide();
$('#img' + i).show();
}, 100);
});
</script>
</head>
<body>
<!-- using multiple images with display: none, src is fixed in HTML (not changed by JS) -->
<img id="img0" class="img" width="50" height="50" style="display: none;" src="https://i.stack.imgur.com/sIH1O.jpg?s=48&g=1">
<img id="img1" class="img" width="50" height="50" style="display: none;" src="https://www.gravatar.com/avatar/9aa2aa68144b2781ac025a29c83bbdd4?s=32&d=identicon&r=PG">
<img id="img2" class="img" width="50" height="50" style="display: none;" src="https://www.gravatar.com/avatar/c0377fc1b08293d3362611978913a32b?s=32&d=identicon&r=PG">
<img id="img3" class="img" width="50" height="50" style="display: none;" src="https://www.gravatar.com/avatar/07f36acea2b942f61102221f92f62f6e?s=32&d=identicon&r=PG">
</body>
</html>
JS Fiddle
I want to call a function that opens a new link. I want to do this after all my images have been clicked on. How can i achieve this?
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="windows-1252">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
<title>Date med mig - version b
</title>
<script type="text/javascript">
function newWindow()
{
window.location = window.location = "http://www.tv3.se/datemedmig"
}
</script>
</head>
<body>
<h1>Del 2: Date med mig</h1>
<img src="1_c.jpg" id="image1" onclick="this.src='1_o.jpg';" alt="image" />
<img src="2_c.jpg" id="image1" onclick="this.src='2_o.jpg';" alt="image" />
<img src="3_c.jpg" id="image1" onclick="this.src='3_o.jpg';" alt="image" />
<img src="4_c.jpg" id="image1" onclick="this.src='4_o.jpg';" alt="image" />
</body>
</html>
If you are trying to just load a new window as soon as any image is clicked, I think the way that #runfaj said to do it is probably the best, It is my understanding that you want to do it only after ALL images have been clicked on?
If this is the case, here's one option (which is probably not the most efficient)
//Assuming there are 4 images
var hasBeenClicked = [false,false,false,false]
//To be called when each image is clicked
function imageClicked(whichImage){
this.src = "'"+whichImage+"_o.jpg'"
//set this position in the array equal to true
hasBeenClicked[whichImage] = true
// if the array is completely true (every image has been clicked)
// call the newWindow function
if(hasBeenClicked == [true,true,true,true]){
newWindow();
}
}
Then when you create an image:
<img src="1_c.jpg" id="image1" onclick="imageClicked(1);" alt="image" />
you could do it three ways:
jquery:
$('img').click(newWindow);
inline:
<img src=..... onclick="newWindow()" />
regular javascript:
get all the tags with:
var imgs = document.getElementByTagName('img');
then add an event listener to each one (google it for lots of different examples)
Have an onclick function that triggers for each image which sets a new attribute on the image tag. Then run a loop over all images to check that they all have the tag. If so, open new windows. For example:
$('img').click(function() {
$(this).data('was-clicked', true);
var all_clicked = true;
$('img').each(function() {
if($(this).data('was-clicked') != true) {
all_clicked = false;
break;
}
});
if(all_clicked == true) newWindow();
});
Note, this code is not tested and may have syntax/semantic errors. Also, you may not really want the user to click ALL image tags (e.g. banners, backgrounds, etc), so you should modify the jquery selectors to filter only the 'img' tags you're interested in, e.g. $('#my-gallery img')...
I have an IP webcam and upload an image to a weather service. I then capture that image to display in my webpage. In order to do that I searched for some code that would refresh the image without refreshing the page. I found some code (sorry, I don't know who to acknowledge) that I adapted ……..
<script>
var reimg
window.onload=function () {
reimg=document.getElementById('re')
setInterval(function () {
reimg.src=reimg.src.replace(/\?.*/,function () {
return '?'+new Date()
})
},60000)
}
</script>
The next bit is, to a great extent, probably overkill but I have been trying to get it to work (how I want it to look) on all browsers...
<iframe frameborder=0 marginwidth=0 marginheight=0 border=0 width="360" height="270" style="overflow:
hidden;border:0;margin:0;width:360px;height:270px;max-width:100%;max-height:100%"
src="http://icons.wunderground.com/webcamramdisk/g/l/Gluepack/1/current.jpg?" id="re" scrolling="no"
allowtransparency="true">If you can see this, your browser doesn't understand IFRAME. However, we'll
still link
you to the file.</iframe>
It works fine in Firefox, reducing the 640 x 480 original image to fit. However, in IE and Chrome only the centre top part of the image is shown (i.e. the image is not reduced to fit). Is there any additional code required to ensure it displays correctly (i.e. how I want it, reduced to fit) in IE and Chrome or is it not possible?
How images are displayed is really up to the browser, there is not standard for that. The easiest solution would be to create an HTML file that contains the javascript and a <img> tag for the image instead of loading the image directly into the iframe:
<!DOCTYPE HTML>
<html><head>
<script>
window.onload = function() {
var reimg = document.getElementsByTagName('img')[0];
setInterval(function () {
reimg.src = reimg.src.replace(/\?.*/, function () {
return '?'+new Date()
});
}, 60000);
};
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
img { width: 360px; height: 270px; }
</head><body>
<img src="http://icons.wunderground.com/webcamramdisk/g/l/Gluepack/1/current.jpg?">
</body></html>
Save this as "webcam.html" or whatever:
<iframe frameborder=0 marginwidth=0 marginheight=0 border=0
width="360" height="270" style="overflow: hidden; border:0;
margin:0; width:360px; height:270px; max-width:100%; max-height:100%"
src="webcam.html" id="re" scrolling="no"
allowtransparency="true">...</iframe>
What I am trying to accomplish is that, when you put an image on 100% it nicely scales the height accordingly. I like to catch that height and process it.
<div id="view" style="width:950px;">
<img src="1.png" />
</div>
The image is 950x500pixels. However when I ask the view $( '#view' ).height() what the height is, it returns 16pixels. Does anyone know why it does this? Why doesn't it return 500pixels as that's the size of the image.
You need image to be loaded first. Try this:
<!DOCTYPE HTML>
<html>
<style>
div { width: 950px; }
img { width: 100%; }
</style>
<body>
<div>
<img src="1.png">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$('img').load(function() {
var height = $('div').height();
console.log(height);
});
</script>
</body>
</html>
I have test to alert the size of <Div> It's return the valid value, that return the size of image.
But from your code $( 'view' ).height() I have change to $( '#view' ).height();
Here is my code it's return correctly.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function loaded() {
var height = $( '#view' ).height();
alert(height);
}
</script>
</head>
<body onload="loaded();">
<div id="view" style="width:950px;">
<img src="Desert.jpg" />
</div>
</body>
</html>
Please do not use local image, you can use an image with URL, like "http://www.veryued.org/wp-content/uploads/2012/02/less-online.png".
Please read jQuery API carefully:
Caveats of the load event when used with images:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache
I have barely any experience working with DOM and using Javascript, and I have a very specific task that I'm trying to accomplish.
Let's say I have an image in my HTML:
<img src="foo.jpg" />
When the site loads, I want to take that image (all images in the document, actually), and wrap them in a link:
<img src="foo.jpg" />
What could I use to accomplish this? Google hasn't turned up much for me with regards to this specific task. On load, I can access and iterate all the images in the document... but I'm not sure where to go from there in order to wrap the image in a link.
You could try something among the lines:
window.onload = function() {
var images = document.getElementsByTagName('img');
for (var i = 0, image = images[i]; i < images.length; i++) {
var wrapper = document.createElement('a');
wrapper.setAttribute('href', 'http://www.foobar.com');
wrapper.appendChild(image.cloneNode(true));
image.parentNode.replaceChild(wrapper, image);
}
};
I would recommend you using the excellent jQuery library to manipulate the DOM:
$(function() {
$('img').wrap('<a href="http://foo.com">');
});
In the following example, all images become wrapped in a link to their source. So if an image has the src of //example.com, it will be wrapped with an anchor(link) to //example.com.
Of course you don't want some of the images linked so you can add the data attribute nolink, like so:
<img src="//lorempixel.com/400/200 data-nolink />
<!DOCTYPE html>
<html lang="en-GB">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include jQuery 1.11.1 -->
<script>
$(function() { //Run once DOM is ready
$('img:not([data-nolink])').each(function() { //Iterate through each img element
$(this).wrap('<a href="' + $(this).attr('src') + '">'); //Wrap with link to own src
});
});
</script>
<style>
h3 {
text-align: justify;
}
img {
width: 200px;
margin: 24px;
}
</style>
</head>
<body>
<h3>These images are generated randomly by loremPixel; So you will be presented by a different image to what you see here, when you click on any of the links </h3>
<hr />
<br />
<img src="//lorempixel.com/400/200?samp1" />
<img src="//lorempixel.com/400/200?samp2" />
<img src="//lorempixel.com/400/200?samp3" data-nolink/> <!-- Add data-nolink to prevent auto-linking -->
<img src="//lorempixel.com/400/200?samp4" />
<img src="//lorempixel.com/400/200?samp5" />
<img src="//lorempixel.com/400/200?samp6" />
</body>
</html>