Say for example i have a div with image source
<div>
<p class="row">With custom CSS</p>
<img src="/images/midhun.jpg">
</div>
On button click i need to open this image screen shot in another div
Can you tell the steps to take the screen shot of that image
Assuming, you want to show the image in other div.
HTML:
<div id="main">
<img src="https://lh5.googleusercontent.com/-XOGfvAHr7HQ/UvoUItkZMZI/AAAAAAAAHJk/IJz5JcUB9dw/w520-h274-no/scopes_in_directives.png" />
</div>
<div id="copy">
</div>
<button id="myButton">Click</button>
Javascript:
$('#myButton').on('click', function() {
$('#copy').html($('#main').html());
});
Demo: https://jsfiddle.net/tusharj/uapf99nt/
You don't need to take any screenshot. The image is already loaded, so you can just show the same image again:
HTML
<div id="originalDiv">
<img src="/images/midhun.jpg">
</div>
<div id="secondDiv">
<img src="" />
</div>
CSS
#secondDiv { display:none }
jQuery
$(document).on('click', '#button', function() {
var img = $('#originalDiv > img').attr('src');
$('#secondDiv > img').attr('src', img).show();
});
look here. it attempts to render a part of the dom, into an image
http://html2canvas.hertzen.com/
Check this link to take a screenshot..
$(function() {
$("#btnSave").click(function() {
html2canvas($("#widget"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
canvas.toBlob(function(blob) {
saveAs(blob, "Dashboard.png");
});
}
});
});
});
Related
I need to load a default image in the event that the image is broken. This also needs to apply to dynamic images. Always limited by class.
I found a similar question Jquery on image error not working on dynamic images? but it doesn't seem to work for dynamic images in my case
DEMO https://jsfiddle.net/sb8303aq/1/
$('img.myClass').on("error", function () {
this.src = 'http://placehold.it/150x150&text=PLACEHOLDER';
});
$("button").click(function(){
$('body').append('<img src="http://image_doesn-t_exist_url" class="myClass" />');
});
you can put error function into append function.
$('img.myClass').on("error", function () {
this.src = 'http://placehold.it/150x150&text=PLACEHOLDER';
});
$("button").click(function(){
$('body').append('<img src="http://image_doesn-t_exist_url" class="myClass" />');
$('img').on("error", function () {
this.src = 'http://placehold.it/150x150&text=PLACEHOLDER';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<img src="http://placehold.it/150x150&text=img%20loaded" />
<img src="http://placehold.it/150x150&text=img%20loaded" />
<img src="http://placehold.it/150x150&text=img%20loaded" />
<img src="http://image_doesn-t_exist_url" class='myClass' />
<p>
<button>
Add Image
</button>
</p>
This is my js:
$(document).ready(function () {
$lrgBanner = $('#panel');
$lrgBanner.detach();
$('#banner img').click(function () {
$lrgBanner.appendTo('#ad').show();
$('#banner').hide();
console.log('banner was clicked');
});
});
$('#close img').click(function () {
$('#banner').show();
$lrgBanner.detach();
console.log('close was clicked');
});
And the HTML:
<div id='ad'>
<div id='banner'>
<img src="img/hp-small.gif" alt="banner advertisement" />
</div>
<div id='panel'>
<div id='background'>
<img src="img/hp-large.gif" alt="" />
</div>
<div id='close'>
<img src="img/btn_close.gif" alt="close" />
</div>
</div>
</div>
The div #background contains an animated gif. I was told that using detach and appendTo would restart the gif content, but it doesn't seem to be working.
I wondered about trying to use a load function (or an unload on the #close img click function.
Does anyone have any advice?
Thanks in advance.
You should reset src attribute of animated gif instead:
SEE DEMO
Note that you shouldn't set variables as global if you don't need to access it from global scope.
$(document).ready(function () {
gifAnimated = $('#background img')[0],
gifSrc = "http://mlkshk.com/r/R245.gif";
$lrgBanner = $('#panel');
$lrgBanner.detach();
$('#banner img').click(function () {
gifAnimated.src = gifSrc;
$lrgBanner.appendTo('#ad').show();
$('#banner').hide();
console.log('banner was clicked');
});
});
$('#close img').click(function () {
$('#banner').show();
$lrgBanner.detach();
gifAnimated.src = "";
console.log('close was clicked');
});
As the title suggests, I'm looking to have a little bit of jQuery - if an image is less than a defined width, it adds a class a certain element. This, for me, seems pretty easy but for some reason it's not working.
$(document).ready(function() {
var image = $('.work-each img');
if (image.width() < 500) {
$('.work-text').addClass('work-text-small');
}
});
This, should, add a class 'work-text-small' to the element 'work-text' if the image found under each .work-each is less than 500px.
Example of HTML (for each)
<div class="work-each">
<div>
<img src=""/>
<div class="work-text">
<p>Title</p>
<p>Text</p>
</div>
</div>
</div>
<div class="work-each">
<div>
<img src=""/>
<div class="work-text">
<p>Title</p>
<p>Text</p>
</div>
</div>
</div>
<div class="work-each">
<div>
<img src=""/>
<div class="work-text">
<p>Title</p>
<p>Text</p>
</div>
</div>
</div>
Thanks,
R
Use load instead, when DOM is ready only img tag is defined but the image isn't loaded yet. Its size comes when it's fully loaded
$(window).load(function () {
var image = $('.work-each img');
if (image.width() < 500) {
$('.work-text').addClass('work-text-small');
}
});
However as #rdck pointed if there are more images with class=".work-each img" code won't work so in that case you go trough each image and apply the class
$(window).load(function () {
var image = $('.work-each img');
image.each(function () {
var that = $(this);
if (that.width() < 500) {
that.next('div.work-text').addClass('work-text-small');
}
})
});
If you get dimensions using server code and set class accordingly, there would be no need to wait for image to load and css would immediately take effect as soon as html exists
I have
<img src="..." class="myImage">
<a href="..." class="changeImage">
$(function(){
$('a.changeImage').click(function(){
$('img.myImage').attr('src',NEWVALUE);
});
});
When I click the link, i inject a new src to .myImage. Is it possibile to show a loading image while the new src is loading?
Yes, you should use image preloading
var newImage = new Image();
var loadingSrc = 'loading.gif';
$('img.myImage').attr('src', loadingSrc);
newImage.onload = function() {
$('img.myImage').attr('src', newImage.src);
};
newImage.src = NEWVALUE;
$(function(){
$('a.changeImage').click(function(e){
e.preventDefault();
//show the loading div
$('img.myImage').attr('src',NEWVALUE);
$("img").trigger("onload");
});
$("img").bind("onload",function(){
//remove the loading div
});
});
http://jsfiddle.net/PrXSW/9/
You can use the load event (untested code)
<img src="smallLoader.png" alt="loading" id="loading" />
<img alt="bigImage" id="bigImage" style="display:none" />
<script type="text/javascript">
$(document).ready(function() {
$('#bigImage').load(function() {
$('#loading').hide();
$('#bigImage').show();
});
$('#bigImage').attr("src", "bigimage.png");
});
</script>
Take a look to the jquery.blockui plugin. It may fit your needing.
the simplest solution would be to declare the loading img via CSS as background-image.
#loaded-image {
/* shows loading icon until picture is fully loaded */
background-image: url(loading.gif);
background-repeat: no-repeat;
}
How to show/hide big image by clicking on thumbnails?
I need like this
Try with JSFiddle here http://jsfiddle.net/jitendravyas/Qhdaz/
Is it possible with CSS only. if not then jQuery solution is OK.
An is it good to use <a href=#"> even it's not opening any new page in same or new tab.
Edit:
I forgot to add. it should work on iPad too
See this example:
No preloading
HTML:
<div id="big-image">
<img src="http://lorempixel.com/400/200/sports/1/">
</div>
<div class="small-images">
<img src="http://lorempixel.com/100/50/sports/1/">
<img src="http://lorempixel.com/100/50/fashion/1/">
<img src="http://lorempixel.com/100/50/city/1/">
</div>
Javascript (jQuery)
$(function(){
$(".small-images a").click(function(e){
var href = $(this).attr("href");
$("#big-image img").attr("src", href);
e.preventDefault();
return false;
});
});
Currently only 1 big image, when clicking on an A, the href of the A is copied as SRC of the big image.
Live example: http://jsfiddle.net/Qhdaz/1/
If you wan't to do it without the extra DOM progressing, you can add 3 big images, and load them directly. The above solution does not preload the images, the below function will.
With preloading
HTML:
<div id="big-image">
<img src="http://lorempixel.com/400/200/sports/1/">
<img src="http://lorempixel.com/400/200/fashion/1/">
<img src="http://lorempixel.com/400/200/city/1/">
</div>
<div class="small-images">
<img src="http://lorempixel.com/100/50/sports/1/">
<img src="http://lorempixel.com/100/50/fashion/1/">
<img src="http://lorempixel.com/100/50/city/1/">
</div>
Javascript:
$(function(){
$("#big-image img:eq(0)").nextAll().hide();
$(".small-images img").click(function(e){
var index = $(this).index();
$("#big-image img").eq(index).show().siblings().hide();
});
});
http://jsfiddle.net/Qhdaz/2/