I want to show div with an image, it's name, it's size and it's download link with jquery.
for that, I have made below code
var image = 'image/example.png'
$('#download').attr("href", result2);
$('.image').attr("src", result2);
var name = result2.replace('image/', '');
$('.name').text(name);
$('.filename').css('display','block');
<div class="filename" style="display: none;">
<img src="" class="image" width="100PX" height="100PX">
<b class="name">example.png</b>
<span class="size"></span>
DOWNLOAD
</div>
and my image is
everything is working fine except image size I don't know how can I get image size because when I was searching to get image size with it's MB, KB or in bytes with jquery it shows me a result in this formate $("#selector")[0].files[0].size but in my case, there is no files[0] is available so how can I find image size?
You can use fetch to get the reponse size. Since you make a request with an image path, the response size will points to the image size.
fetch($('img').prop('src')).then(function (response) {
console.log('size:', response.headers.get("content-length"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://images.unsplash.com/photo-1474511320723-9a56873867b5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" class="image" width="100PX" height="100PX" width="150" height="100">
Another way to get the image width/height is: Using Image class:
var image = new Image();
image.onload = function () {
console.log('width:', this.width);
console.log('height:', this.height);
console.log('more information about this image:');
console.dir(this);
};
image.src = $('img').prop('src');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://images.unsplash.com/photo-1474511320723-9a56873867b5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" class="image" width="100PX" height="100PX" width="150" height="100">
Related
I have a static webpage with over 50-100 images and I want to create a separate container to show each image as a thumbnail. When clicking on the image, it should bring you to the image. I'm having issues when you click on the image and it should bring you to that image on the page.
// loop through img elements
$('.img-class').each(function(){
// create new image object
image = new Image();
// assign img src attribute value to object src property
image.src = $(this).attr('src');
var xx = document.getElementById('gallery');
xx.insertAdjacentHTML('beforeend', '<img src="'+ image.src +'"/>');
});
Sample of the HTML:
<div id='mydata'>
<img src='x.jpg'/>
<img src='1.jpg'/>
<img src='2.jpg'/>
<img src='3.jpg'/>
</div>
<div id='gallery'>
<img src='x.jpg' width='50' height='50'/>
<img src='1.jpg' width='50' height='50'/>
<img src='2.jpg' width='50' height='50'/>
<img src='3.jpg' width='50' height='50'/>
</div>
The gallery is generated when the page loads.
I have one code for downloading particular division using javascript. But my problem is in that div contain one image tag .my image src is a URL which is outside my domain.My download function is given below:
function download() {
var options = {
};
var pdf = new jsPDF('p', 'pt', [748, 600]);
pdf.addHTML($("#invoice-POS"), 20, 20, options, function () {
pdf.save("Receipt_" + $scope.ReceiptName + ".pdf");
location.reload();
});
}
My div is
<div id="invoice-POS">
<center id="top">
<div class="info">
<img id="my-image" ng-src="{{Logo}}" alt=""
style="height:150px;width:150px"><br />
<h2 style="color:black" >Invoice</h2>
<img ng-src="{{QrImg}}" alt="" style="height:150px;width:150px" />
<h5>Scan QR Code </h5>
</div>
</center>
</div>
in this div ng-src="{{Logo}} is an external url ,qrImg is genertaed from my domain so qrimg is diplayed.Logo Image displayes in div ,but after downloading the div, Logo image is not showing,Qrimage is showing .Please help me..
I want to change an image onclick on another image, but don't only want to change a fixed image but use the advantages of srcset, so the browser picks the right image for the current main image size (responsive layout).
This is what I am using right now, vanilla:
<div id="item-detail-img-main">
<img src="/_img/items/400/img.jpg" srcset="/_img/items/400/img.jpg 400w, /_img/items/600/img.jpg 600w" alt="" width="100%" id="item-detail-img-main-img">
</div>
<script type="text/javascript">
function chimg (img) {
window.document.images["item-detail-img-main-img"].src = img;
}
</script>
<ul id="item-detail-img-thumbs">
<li><img src="/_img/items/200/img.jpg" onclick="chimg('/_img/items/400/img.jpg')"></li>
<li><img src="/_img/items/200/img2.jpg" onclick="chimg('/_img/items/400/img2.jpg')"></li>
</ul>
I'm open to jquery here.
Anyone know how to handle this?
I think you can probably set the srcset attribute, at least by using the setAttribute() method. You could also just replace the whole image tag:
function(img,img2,img3){
document.getElementById('item-detail-img-main').innerHTML='<img src="'+img+'" srcset="'+img2+' 400w, '+img3+' 600w" alt="" width="100%" id="item-detail-img-main-img">';
}
The jQuery option looks something like this:
https://jsfiddle.net/axcnotx7/
<div>
<img id="main" width="100%" id="item-detail-img-main-img">
</div>
<ul id="thumbs">
<li><img src="https://icons.iconarchive.com/icons/fi3ur/fruitsalad/256/banana-icon.png"></li>
<li><img src="https://icons.iconarchive.com/icons/bingxueling/fruit-vegetables/256/apple-red-icon.png"></li>
</ul>
<script type="text/javascript">
var main = $('img#main');
$('#thumbs img').click(function(e) {
var imageSrc = e.currentTarget.src;
// You need to determine your own srcset paths here
var srcSet = imageSrc + ' 400w, ' + imageSrc + ' 600w';
main.attr('src', imageSrc);
main.attr('srcset', srcSet);
});
</script>
I am using Woocommerce and Wordpress.. I implemented a script that changes the main image on the single product page depending on which thumbnail is clicked. I also purchased a premium plugin and tweaked a bit for displaying videos on that single product page.
Currently when the user clicks a thumbnail the main image will change according to the thumbnail that is being clicked. If the thumbnail has a video attached to it then the video will show in place of the main image. My problem is that if someone clicks on another thumbnail after viewing the video I cannot bring that main image back in.
Here is my JS so far:
(function( $ ){
$(document).ready(function(){
$('*[data-videolink=""]').removeAttr('data-videolink');
if($('a[data-videolink]').length > 0){
var video_code = $('.images a[data-videolink]:first').data('videolink');
//$('.images a.woocommerce-main-image').html('<iframe src ="'+ video_code +'" width="500" height="300" frameborder="no"></iframe>');
$('.thumbnails .zoom').click(function(e){
e.preventDefault();
var photo_fullsize = $(this).find('img').attr('src').replace('-100x75','');
$('.images img:first').attr('src',photo_fullsize);
});
$('a[data-videolink]').click(function(e){
e.preventDefault();
video_code = $(this).data('videolink');
//$('.images a[data-videolink]:first').html('<iframe src ="'+ video_code +'" width="500" height="300" frameborder="no"></iframe>');
$('.images a.woocommerce-main-image').html('<iframe src ="'+ video_code +'" width="500" height="300" frameborder="no"></iframe>');
$('.thumbnails .thumb-img').click(function(e){
e.preventDefault();
var photo_fullsize = $(this).find('img').attr('src').replace('-100x75','');
$('.images a.woocommerce-main-image').html('<img width="800" height="600" src="http://my-website.com/wp-content/uploads/2013/09/my-main-image-800x600.jpg" class="main-img wp-post-image">');
});
$('.thumbnails .zoom').click(function(e){
e.preventDefault();
var photo_fullsize = $(this).find('img').attr('src').replace('-100x75','');
//$('.images img:first').attr('src',photo_fullsize);
});
});
};
});
})(jQuery);
This is what the markup looks like on the page:
<div class="images">
<img width="800" height="600" src="http://my-website.com/wp-content/uploads/2013/09/Main-Image-1.jpg" class="main-img wp-post-image" >
<div class="thumbnails">
<img width="100" height="75" src="http://my-website.com/wp-content/uploads/2013/09/Thumb-1.jpg" class="attachment-shop_thumbnail">
<img width="100" height="75" src="Thumb-2.jpg" class="attachment-shop_thumbnail">
<img width="100" height="75" src="http://my-website.com/wp-content/uploads/2013/09/Video-Thumb-3.png" class="attachment-shop_thumbnail" />
</div>
</div>
I am so close! as you can see I have hardcoded a main image to be brought back in after viewing the video and clicking on another thumbnail, this obviously will not work so in place of that what can I do to repopulate that main image with the main image of the thumbnail that is being clicked.
After working with the developer of the original plugin I am using I got it resolved for what I was needing to accomplish -- This is the final piece of code that tied it all together. Thanks for the help guys.
$('.thumbnails a').click(function(e){
e.preventDefault();
video_code = $(this).data('videolink');
var image_src = $(this).attr('href');
if(video_code != null){
$('.images a:first').html('<iframe src ="'+ video_code +'" width="420" height="315" frameborder="no"></iframe>');
}else{
$('.images a:first').html('<img width="800" height="600" class="main-img wp-post-image" src="'+ image_src +'" />');
}
});
I have a web page that is going to display a number of images on an HTML5 canvas.
I am loading the images in a hidden section in the HTML first, before using JavaScript to draw them on the canvas, in order to speed up the amount of time is takes them to load and be rendered on the canvas.
Once all of the images have been drawn to the canvas, it must be possible to drag and drop them around the canvas. The purpose being that there will be four 'description buckets' also displayed on the canvas, and the user is required to drag each image to its corresponding description bucket.
Once I have loaded the images in the HTML, I want to create a JavaScript array to store them in while they're being accessed and manipulated by the JavaScript, i.e. I want to be able to manipulate them as if they are JavaScript images, although their sources will be HTML elements, not the direct source of the image.
I'm following the tutorial at: http://www.html5canvastutorials.com/labs/html5-canvas-animals-on-the-beach-game-with-kineticjs/ which does exactly what I want to do, except that the images are static. With my game, I will be providing a web form which the administrator will be able to use to change the images that are displayed depending on in what context they are using the game.
This is why where that tutorial has the code:
window.onload = function() {
var sources = {
beach: "beach.png",
snake: "snake.png",
snake_glow: "snake-glow.png",
snake_black: "snake-black.png",
lion: "lion.png",
lion_glow: "lion-glow.png",
lion_black: "lion-black.png",
monkey: "monkey.png",
monkey_glow: "monkey-glow.png",
monkey_black: "monkey-black.png",
giraffe: "giraffe.png",
giraffe_glow: "giraffe-glow.png",
giraffe_black: "giraffe-black.png",
};
loadImages(sources, initStage);
};
I want to change the sources to be those of the images that I have loaded in the hidden section of the HTML:
<section hidden>
<img id="startButton" src="images/startButton.png" alt="Start Button" width="179" height="180" href="javascript:drawLevelOneElements();"/>
<img id="building" src="images/assets/building.png" alt="Asset" />
<img id="chair" src="images/assets/chair.gif" alt="Asset" />
<img id="drink" src="images/assets/drink.gif" alt="Asset" />
<img id="food" src = "images/assets/food.gif" alt="Asset"/>
<img id="fridge" src = "images/assets/fridge.png" alt="Asset"/>
<img id="land" src = "images/assets/land.jpg" alt="Asset"/>
<img id="money" src = "images/assets/money.jpg" alt="Asset"/>
<img id="oven" src = "images/assets/oven.jpg" alt="Asset"/>
<img id="table" src = "images/assets/table.gif" alt="Asset"/>
<img id="van" src = "images/assets/van.jpg" alt="Asset"/>
<img id="burger" src = "images/expenses/direct/burger.png" alt="Direct Expense"/>
<img id="chips" src = "images/expenses/direct/chips.png" alt="Direct Expense"/>
<img id="drink" src = "images/expenses/direct/drink.jpg" alt="Direct Expense"/>
<img id="franchiseFee" src = "images/expenses/direct/franchiseFee.jpg" alt="Direct Expense"/>
<img id="wages" src = "images/expenses/direct/wages.jpg" alt="Direct Expense"/>
<img id="admin" src = "images/expenses/indirect/admin.jpg" alt="Indirect Expense"/>
<img id="cleaners" src = "images/expenses/indirect/cleaners.gif" alt="Indirect Expense"/>
<img id="electricity" src = "images/expenses/indirect/electricity.gif" alt="Indirect Expense"/>
<img id="insurance" src = "images/expenses/indirect/insurance.jpg" alt="Indirect Expense"/>
<img id="manager" src = "images/expenses/indirect/manager.jpg" alt="Indirect Expense"/>
<img id="rates" src = "images/expenses/indirect/rates.jpg" alt="Indirect Expense"/>
<img id="training" src = "images/expenses/indirect/training.gif" alt="Indirect Expense"/>
<img id="water" src = "images/expenses/indirect/water.gif" alt="Indirect Expense"/>
<img id="burger" src = "images/income/burger.png" alt="Income"/>
<img id="chips" src = "images/income/chips.png" alt="Income"/>
<img id="drink" src = "images/income/drink.jpg" alt="Income"/>
<img id="creditors" src = "images/liabilities/creditors.gif" alt="Liability"/>
<img id="electricity" src = "images/liabilities/electricity.png" alt="Liability"/>
<img id="food" src = "images/liabilities/food.jpg" alt="Liability"/>
<img id="hirePurchase" src = "images/liabilities/hirePurchase.jpg" alt="Liability"/>
<img id="loan" src = "images/liabilities/loan.png" alt="Liability"/>
<img id="overdraft" src = "images/liabilities/overdraft.jpg" alt="Liability"/>
<img id="payeTax" src = "images/liabilities/payeTax.jpg" alt="Liability"/>
<img id="tax" src = "images/liabilities/tax.jpg" alt="Liability"/>
</section>
but I'm not sure how to reference the HTML images. I tried doing it in a similar way to the way you would reference the images in JavaScript directly from their sources:
window.onload = function(){
var sources = {
asset1: document.getElementById("building");
asset2: document.getElementById("chair");
}
}
but when I loaded the page in the browser, my canvas was no longer displayed.
So far I have managed to get the canvas displaying, with one image that can be dragged and dropped around the canvas using this code:
var canvasImage = new Kinetic.Image({
image: imageObj,
width: 50,
height: 50,
// puts the image in teh middle of the canvas
x: stage.getWidth() / 2 - 50 / 2,
y: stage.getHeight() / 2 - 50 / 2,
draggable: true
});
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'images/assets/building.png';
but obviously the problem with this is that if I was to provide the administrator with a form where they could change the src of the image that's drawn from 'building.png' to some other image file, I wouldn't be able to replace the line that's loading the 'building' image in the hidden section of my HTML with a line to now load the new image instead.
Does anyone know how I can reference the HTML images from within the JavaScript?
Edit 10/12/2012 # 21:00
I tried changing the code to:
var sources = {
asset1: document.getElementById("building"),
asset2: document.getElementById("chair")
}
but my canvas still wasn't displayed when viewing the page in the browser. I also tried that with a comma after the second line, but the canvas wasn't displayed.
Edit 10/12/2012 # 22:55
I now have this function:
window.onload = function(){
var sources = {
asset1: document.getElementById("building").src,
asset2: document.getElementById("chair").src,
};
loadImages(sources, drawImage);
};
and try to draw the image on the canvas with this code:
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = sources.asset1;
but for some reason, this has again stopped the canvas from displaying in the browser... The only thing I've changed since it was displaying in the browser is the line: imageObj.src = sources.asset1;
Your code
var sources = {
asset1: document.getElementById("building");
asset2: document.getElementById("chair");
}
produces a syntax error. Your property declarations should end with commas, not semicolons (as you did correctly in your first object declaration).
The reason your canvas disappeared when you tried that code is because the script interpreter halted on the syntax error.
EDIT:
If you want to recreate your first object (the one with image URL strings) using image elements from the DOM, get the src property of each element:
var sources = {
asset1: document.getElementById("building").src,
asset2: document.getElementById("chair").src
}