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);
}
Related
I am trying to capture whole "div container" in one image using html2canvas. For some reason im only getting the part which shows on my screen. But I have a horizontal scroll on the div so I would like to capture whats not on my screen aswell but the content inside the div.
Is that possible? Right now my div is 5000px width, can i capture it all in one image somehow?
Here is my javascript code for html2canvas:
$(function() {
$("#btnSave").click(function() {
});
html2canvas($("#container_wrapper_anatomy"), {
onrendered: function(canvas) {
theCanvas = canvas;
var dataUrl = canvas.toDataURL();
window.open(dataUrl, "toDataURL() image", "width=100%, height=100%");
canvas.toBlob(function(blob) {
saveAs(blob, "container_wrapper_anatomy.jpg");
});
}
});
});
});
Thanks in advance.
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");
}
}
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'm a jQuery novice, so the answer to this may be quite simple:
I have an image, and I would like to do several things with it.
When a user clicks on a 'Zoom' icon, I'm running the 'imagetool' plugin (http://code.google.com/p/jquery-imagetool/) to load a larger version of the image. The plugin creates a new div around the image and allows the user to pan around.
When a user clicks on an alternative image, I'm removing the old one and loading in the new one.
The problem comes when a user clicks an alternative image, and then clicks on the zoom button - the imagetool plugin creates the new div, but the image appears after it...
The code is as follows:
// Product Zoom (jQuery)
$(document).ready(function(){
$("#productZoom").click(function() {
// Set new image src
var imageSrc = $("#productZoom").attr("href");
$("#productImage").attr('src', imageSrc);
// Run the imagetool plugin on the image
$(function() {
$("#productImage").imagetool({
viewportWidth: 300,
viewportHeight: 300,
topX: 150,
topY: 150,
bottomX: 450,
bottomY: 450
});
});
return false;
});
});
// Alternative product photos (jQuery)
$(document).ready(function(){
$(".altPhoto").click(function() {
$('#productImageDiv div.viewport').remove();
$('#productImage').remove();
// Set new image src
var altImageSrc = $(this).attr("href");
$("#productZoom").attr('href', altImageSrc);
var img = new Image();
$(img).load(function () {
$(this).hide();
$('#productImageDiv').append(this);
$(this).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
}).attr({
src: altImageSrc,
id: "productImage"
});
return false;
});
});
It seems to me, that the imagetool plugin can no longer see the #productImage image once it has been replaced with a new image... So I think this has something to do with binding? As in because the new image is added to the dom after the page has loaded, the iamgetool plugin can no longer use it correctly... is this right?
If so, any ideas how to deal with it?
Wehey! I've sorted it out myself...
Turns out if I remove the containing div completely, and then rewrite it with .html, the imagetool plugin recognises it again.
Amended code for anyone who's interested:
$(document).ready(function(){
// Product Zoom (jQuery)
$("#productZoom").click(function() {
$('#productImage').remove();
$('#productImageDiv').html('<img src="" id="productImage">');
// Set new image src
var imageSrc = $("#productZoom").attr("href");
$("#productImage").attr('src', imageSrc);
// Run the imagetool plugin on the image
$(function() {
$("#productImage").imagetool({
viewportWidth: 300,
viewportHeight: 300,
topX: 150,
topY: 150,
bottomX: 450,
bottomY: 450
});
});
return false;
});
// Alternative product photos (jQuery)
$(".altPhoto").click(function() {
$('#productImageDiv div.viewport').remove();
$('#productImage').remove();
// Set new image src
var altImageSrc = $(this).attr("href");
// Set new image Zoom link (from the ID... is that messy?)
var altZoomLink = $(this).attr("id");
$("#productZoom").attr('href', altZoomLink);
var img = new Image();
$(img).load(function () {
$(this).hide();
$('#productImageDiv').append(this);
$(this).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
}).attr({
src: altImageSrc,
id: "productImage"
});
return false;
});
});
You could try abstracting the productZoom.click() function to a named function, and then re-binding it after changing to an alternate image. Something like:
// Product Zoom (jQuery)
$(document).ready(function(){
$("#productZoom").click(bindZoom);
// Alternative product photos (jQuery)
$(".altPhoto").click(function() {
$('#productImageDiv div.viewport').remove();
$('#productImage').remove();
// Set new image src
var altImageSrc = $(this).attr("href");
$("#productZoom").attr('href', altImageSrc);
var img = new Image();
$(img).load(function () {
$(this).hide();
$('#productImageDiv').append(this);
$(this).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
}).attr({
src: altImageSrc,
id: "productImage"
});
$("#productZoom").click(bindZoom);
return false;
});
});
function bindZoom() {
// Set new image src
var imageSrc = $("#productZoom").attr("href");
$("#productImage").attr('src', imageSrc);
// Run the imagetool plugin on the image
$(function() {
$("#productImage").imagetool({
viewportWidth: 300,
viewportHeight: 300,
topX: 150,
topY: 150,
bottomX: 450,
bottomY: 450
});
});
return false;
}
Also, rolled both your ready() blocks into the same block.
First, i have one question, are the .altPhoto links or images? Cause if its images then this line is wrong
var altImageSrc = $(this).attr("href");
it should be
var altImageSrc = $(this).attr("src");
its the only thing i could find in a glance