I'm using the results on a previous Stackoverflow page to combine various layers on an html canvas: drawing images on 3 layer canvas and saving
And the resultant jsfiddle seems to be what I am after.
But now what I'm hoping to do is display that final composited image in a pop-up window (sized to the dimensions of the image) which will appear when the user clicks a button, but I am unsure how to do this.
I have thought about using the window.open() command but this seems to only open a pre-created webpage.
PS I am looking for a javascript solution not jQuery, thanks.
You could pass the img src to the new window
window.open(img.src,"image window",`width=${img.width},height=${img.height}`);
fiddle: http://jsfiddle.net/fhjwY/84/
Related
I need to use image map in my website, to add different links to each part of image.
But I have problems with its responsiveness. I couldn't change map area's size while resizing window.
Can anyone help me with this? The method is not important, I can use either Js or Css.
Update:
I used http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html for responsiveness, but it affects on map area coords. When I reload the page, map coords are all 0, those are being updated only after resizing the window.
Do anyone have this problem too?
Imagemap is a very Old way to create websites I preffer using photoshop image sÃlice and save as html maybe you should try it ir you will use non dynamic images that way you can fix width and height and a lot more
If you have the image saved as a vector image, you could save it as an SVG and use RaphaelJS. I've only recently picked it up but it is quite easy to use once you get the hang of it.
You can assign links, style and hover events to each node attribute, and Raphael allows you to set the viewBox so that it scales on resize (can't link as rank not high enough - help can easily be found on SO though)
Here are some examples of using RaphaelJS: LINK1 LINK2
And check out jsfiddle.net/AUNwC/294/ for example of each node having a responsive clickable area (resize window to check)
I have found ways of changing the zoom image using links with rel="smallImage:image1.jpg" etc, but I am creating an image at runtime and adding it to the page, so the link will not be there when the page first loads (which it seems like it needs to be).
When I generate the image at runtime, I add a thumbnail to the page and a link to open the thumbnail as the large image. I then want to be able to hover over this image to get the cloud-zoom functionality, but even if I use the code I mentioned above to set the image, I still see the original image as the zoom image.
I was wondering if there was a way I can use JQuery to change the zoom image at the same time I change the source of the image? I was hoping for something as simple as $("image1").CloudZoom.zoomImage = "image2.jpg" but nothing like that seems to work.
Thanks guys
You can place the thumbnail in a div and give the div an onclick event.
<div onclick="DisplayThumbnail(ImagePath)"><img src="ImagePath" /></div>
Call a javascript function and add this:
$('#CloudZoom').attr("href", newimagepath);
$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
The cloudzoom uses the anchor tag's href to point to the image to use, so that is the reason we update the href to the new image tag.
I created an online tool that uses javascript to manipulate elements of a supplied SVG image. I'm having issues in accessing the DOM,When I have the image in an object tag. But that prevents you from right clicking the image in a browser and clicking save. So I put image in an img tag.now I can't access the DOM. Canvas seems to also disable right click and save
What could be the possible issue and how can i fix it?
I am making my own photo album, and want to copy the functionality of a well known photo sharing site. What I am looking for is - how do they do this?
http://www.flickr.com/photos/cdotlister/6445556533/in/photostream/
That's a photo of mine. If you click the photo, you get an enlarged version. The initial one and the large one are the same file size, so, must be the same file. I think the smaller one is resized using html. (image height and width). And then the popup version is probably the actaul image size.
However, when the image is popped up - resize your window. It stays centred.
I'd like to replicate this... I assume it'd ajax? I'd like to know how I can have a click event on the image, display a popped up version of the same image.
Take a look at jQuery lightbox pluggin.
http://leandrovieira.com/projects/jquery/lightbox/
I'm searching a javascript that can resize images similar to script thats available as a plugin in vBulletin CMS:
I want the script to be used in blogger blog so that all images i upload into a post are resized to a smaller res and on clicking the image should be displayed in original dimensions
Something of the sort getelementbyID("img").
are there any script providing this feature? Pls help me out
Thanks in advance.
Something like a lightbox, perhaps?
I know the specific interaction you're asking about, and personally, I've always found it really obnoxious.
If you don't want to use a server side script to automatically create a smaller version of the image that you would link to the larger version, I wouldn't recommend using JavaScript to resize an image either. I'd recommend setting the image's dimensions in CSS and then attaching a click handler with JS that showed the image in some sort of overlay (or just using HTML to link to the larger image file).