I have 2 images - one background and one image that I put into background. I want to merge these 2 images into one in the same position as they are. Second image should be rotated and resized.
Something like html2canvas but I need to use another method because html2canvas doesn't read css transform.
My current code is:
$(document).ready(function(){
$('body').on('click', '.add-bomb', function(){
var src = $(this).attr('src');
$( ".bomb-overlay-holder" ).html('<img id="bomb-overlay">');
$('.bomb-overlay-holder > img').attr('src',src);
$( ".bomb-overlay-holder" ).draggable({ containment: ".background-bomb" });
$( "#bomb-overlay" ).resizable({autoHide: true,containment: ".background-bomb"});
$( "#bomb-overlay" ).parent().rotatable();
});
});
<div class="background-image-holder" id="background-image-holder">
<img src="<?php echo $bg_path;?>" class="background-bomb">
<span class="bomb-overlay-holder">
</span>
</div>
and I'm using html2canvas to make screenshot of images like that:
html2canvas($("#background-image-holder") , {
onrendered: function(canvas) {
var dataURL = canvas.toDataURL("image/png");
}
}
Related
I have an array of <li> elements that I am trying to make into a carousel, just that I want the images to be resized if bigger than 640x480 as well as centered into the frame.
I have the following code:
HTML:
<ul id="carousel">
<li><img src="pic1.jpg" /><p><b>2012</b> something</p></li>
<li><img src="pic2.jpg" /><p><b>2016</b> something else.</p></li>
</ul>
JQuery:
var imW=[];
var imH=[];
//...
$('li',obj).each(function(index){
itemSources.push( $(this).find('img').attr('src') );
var img = $(this).find('img');
imW.push(img.width());
imH.push(img.height());
});
I then use itemSources[i], imW[i] and imH[i] to resize my image and add any necessary padding to center it in the frame.
Which works fine provided that my internet is fast enough and the images load before the size is computed. (ha!)
I know I want something like:
var img = new Image();
img.onload = function() {
console.log(this.width + 'x' + this.height);
};
img.src = $(this).find('img').attr('src');
But I cannot save the width and height, since just pushing to the arrays gets out of scope, and so does creating an external callback for that. How can I save those sizes that are so easily printed to the console into my imW and imH arrays?
You can basically set an attribute of an image, something like data-loaded="true" once the image is loaded and when the last image is loaded you can then iterate the images and load the array
In your onload method, do the following changes
var img = new Image();
img.onload = function() {
console.log(this.width + 'x' + this.height);
//set this attribute to indicate that this image has been loaded already
$(this).attr( "data-loaded", "true" );
//check if all images have this attribute
if ( $( "img[data-loaded='true']" ).size() == $( "img" ).size() )
{
//now iterate the images to load your array
}
};
img.src = $(this).find('img').attr('src');
My image hotel taking bit while as its trying to load large size image. How can I set an Ajax Loader GIF image before the actual image loads to make my users understand to wait. Thanks.
$(document).ready(function () {
window.showim = function(src) {
$("#imgLoader").attr("src", src);
};
});
JSFiddle: http://jsfiddle.net/52dY7/
The simpliest way is to start with a loader image in the source of the targeted image.
<img id="imgLoader" src="path/to/your/loader.gif" />
Look here...
http://jsfiddle.net/xflofoxx/52dY7/2/
$(document).ready(function () {
$('img').each(function() {
var $img = $(this),
origSrc = $img.attr('src');
$img.attr('src', '/path/to/loader/image');
$('<img />').on('load', function() {
$img.attr('src', origSrc);
}).attr('src', origSrc);
});
});
I have this simple image zoom jQuery. Here is a Demo example. It uses the elevateZoom jQuery.
The code behind is very simple:
<img id="zoom_05" src='small_image1.png' data-zoom-image="large_image1.jpg"/>
<script>
$vc("#zoom_05").elevateZoom({
zoomType : "inner",
cursor: "crosshair"
});
</script>
My question, is how can i make the large image load on demand, only when the mouse is over it. Please have a look at this demo example and let me know what i need to add in the code.
img element (id="zoom_05") above, would not load large_image1.jpg on its own.
Large image load happens because elevateZoom() looks into its data-zoom-image value and immediately loads it. One way around this behaviour is to defer elevateZoom() until user hover's over the small image for the first time. Quick example:
jQuery( function () {
var elevate_zoom_attached = false, $zoom_05 = $("#zoom_05") ;
$zoom_05.hover(
// hover IN
function () {
if ( ! elevate_zoom_attached ) {
$zoom_05.elevateZoom({
zoomType : "inner",
cursor : "crosshair"
});
elevate_zoom_attached = true ;
};
},
// hover OUT
function () {
if ( elevate_zoom_attached) { // no need for hover any more
$zoom_05.off("hover");
}
}
);
}) ;
Mind you this is an quick, on-top-of-my-head code, but should work ...
Also in this case elevateZoom() action might not be immediate while large image loading is going on.
I used this idea to initiate zoom on any number of images on the same page by adding a zoom class to the image. It works without any HOVER OUT
<img class="zoom" src="myimage.png" data-zoom-image="mybigimage.png"/>
$('.zoom').hover(
// hover IN
function () {
var currImg = $(this); //get the current image
if (!currImg.hasClass('zoomon')) { //if it hasn't been initialized
currImg.elevateZoom(); //initialize elevateZoom
currImg.addClass('zoomon'); //add the zoomon class to the img so it doesn't re-initialize
}
})
I am trying to use fancybox v2 to show a div whose contents are generated dynamically. I set the size of the div quite late in the scheme of things. I have tried the examples from fancybox's documentation for displaying divs whose size is fixed. It looks like this:
<a id="fancy" href="#showdiv">Show contents of div.</a>
<div id="showdiv">...</div>
<script>
$(document).ready(function() {
$("#fancy").fancybox({autoSize:false, width: W, height: H, ...});
});
</script>
What I want is W=$("#showdiv").width and H=$("#showdiv").height. Obviously, H and W are not available to me at document ready. How do I go about doing this?
EDIT: Here is the html for the content div:
<div id="hidediv" style="display:none">
<div id="showdiv" style="display:block;position:relative">
<canvas id="mycanvas" style="position:relative;display:block"></canvas>
</div>
</div>
In a click handler of the anchor "#fancy" I do:
function onclick() {
var jcanvas = $("#mycanvas").css('width', some_width).css('height', some_height);
// draw on canvas
}
"#fancy" is the one associated with Fancybox.
Assuming that this function handles the response of your HTTP POST
function onclick() {
// set size of canvas
var jcanvas = $("#mycanvas").css({
"width": some_width, // variable from response ?
"height": some_height
});
// draw on canvas
}
... then call that function using the fancybox afterLoad callback like
$("#fancy").fancybox({
fitToView: false, // the box won't be scaled to fit the view port (optional)
afterLoad: onclick()
});
EDIT :
Another option is to handle both, the canvas and fancybox within the same function using jQuery .on() so if you have
<a id="fancy" href="#showdiv">Show contents of div</a>
use this script :
$("#fancy").on("click", function () {
// do HTTP POST
// on success, get size form response
var some_width = 300,
some_height = 180;
// set canvas size
var jcanvas = $("#mycanvas").css({
// variables from response
"width": some_width,
"height": some_height
});
// draw on canvas
//
// then open fancybox ($(this) = #showdiv )
$.fancybox($(this),{
// API options etc
fitToView: false
});
});
in this case you don't need any callback.
NOTE : .on() requires jQuery v1.7+
See JSFIDDLE for documentation purposes.
I have an image gallery that displays a list of thumbnail images. I'm using the jQuery Tooltip plugin to display the image in a tooltip on rollover.
However, I want to display a larger image than my thumbnail image.
$(document).ready(function(){
$('.imageGalleryAlbum li a img').tooltip({
delay: 0,
showURL: false,
bodyHandler: function() {
return $("<img/>").attr("src", this.src);
}
});
});
My gallery listed thumbnail image ends with the following "_thumb_150.jpg"
I want to display the "_thumb_630.jpg" from the same directory/folder.
How can I do this?
Try replacing the _150 with 630 from the current image source.
src.replace('150', '630')
bodyHandler: function() {
var new_source = this.src.replace('150', '630');
return $("<img/>").attr("src", new_source);
}