When the width of the brower is changed, the image's width or height is also changed dynamically, anyone knows how to do it?
And I found the image's max height of each rows is not the same.
Thank you very much.
I am sure Google's image application is a little more complicated than can be written in a single post, but you could mimic some of the effect with some clever use of jQuery. Here's a quick tutorial on a resizeable image grid using a slider -
Image resize tutorial
You would need to change the trigger from a slider to the resize event, but this has the basics you need.
Related
I'm using svg as a background image (logo) in a WP menu plugin and i want it to change a color (fill) when hovered. As it's a free version of the plugin i can't use image, object etc - i have to use my svg as a background image. I've to support IE (9+) so masks/filters are out of question and i'm pretty much left with svg-sprites. That's okey, i know how to do it (using use/xlink:href).
But now comes a tricky part. I want my svg to change only fills of some groups/paths while hovered leaving others untouched. I can only change colors of all paths/groups together in a background image with svg-sprites afaik. Is there a way to do it? Thank you in advance!
Thanks for reading this question :)
Goal:
I am using Fabric.js as a base for image editor (crop and resize features for now mostly).
My goal is to load some high-quality image (like photos) rotate or crop it and then export as DataURL (in original quality or near to it).
Solution:
To add such a big photo on canvas and be able to export it bad with the same quality - I set width and height of canvas equal to image's width and height (2560 × 1600px) and then compress it using css to 640x400px (editor size). (I used https://stackoverflow.com/a/17035046 as a base)
In this case I still can export image in big dimension using canvas.toDataURL() - it will be about 2560x1600 (this is my goal).
How it works: http://jsfiddle.net/handmade/Lqsb0kwv/4/
Problem description:
I've got a problem after adding zoom feature (canvas.zoomToPoint(...)) to my editor and it is related to css width and height limitation of canvas.
Try to change size of image using controls in jsfiddle above and you will see an issue.
Works fine if...
...if I don't use css limitation: http://jsfiddle.net/handmade/Lqsb0kwv/5/
Questions:
I've read 90% of Fabric.js docs, examples, tutorials, questions here on Stack Overflow, but I didn't find a solution for my issue.
I am not sure that using css to limit canvas is a good practice.
I am not sure that my way of getting back changed image in big dimension is a good way.
Does anybody know better way to export image in good dimension?
Does anybody know if issue with scaling/rotating image after zoom (+limited by css) is a bug in Fabric.js?
Thank you for any answer!
I need to create a sprite graphic, I hope that's the right name for it, to use that with jQuery to move that graphic from position to position to make it look like a gif animation.
As I have 400 graphics (all the same size) which should become one single image later, is there a way to create that sprite automated with Photoshop CS5 or any other Software?
So that it will create that sprite image from all my 400 pics?
I was searching for such a thing now for weeks ...
http://css-sprit.es/
This service might help you.
Also google "generate sprite"
Some css sprite generator are already available. Just upload your images and it will automatically give u the sprite image file and css for it.
http://spritegen.website-performance.org
http://www.csssprites.com
http://csssprites.org
You can use sprite-me. Just bookmark the link provided in the website than open your website and run sprite-me, it will automatically show images used in the website in groups and when clicking on generate sprite, you will get sprite image and css.
I found a little tutorial explaining how to create sprites. It might help you to write your own java program.
https://sites.google.com/site/javagamescorner/home/creating-sprites
I'd like to improve upon jQuery's dialog code by using CSS-sprites, and thus also add animations of the dialog borders.
To do this, i'd like all the artwork to be in 1 png file, a css sprite.
My problem is that in order to support a dialog that maximizes to 2 or 3 monitors, i think i'd have to put 5000px wide / high border graphics in the css sprite file. Because i can't find a way to resize a selected portion of a css sprite image.
Basically i want to resize from the sprite image a region (t,l,w,h) to a DIV or IMG on my page with a different width and height.
I'd like to know, is this even possible? It seems background-position does not support this at all.
I've tried the first solution in How can I scale an image in a CSS sprite, but could not get it to work using that.
I've tried using the new background-size property in conjunction with background-position, but that also does not produce the results i want.
Spent another few hours twiddling with css, but could not get sprites to work for dialogs.
But my animated dialogs don't need many frames (not unless you want to put actual video as a dialog backdrop online), so for the dialog theme i'm designing now i have 8 312x312 png's as frames, 8 requests, 386kb total. Just enough to create a glowing animation for when the dialog is in a "highlighted" state. It's do-able.
I'm using the technique from How can I scale an image in a CSS sprite
See http://mediabeez.ws in about a month for the opensource release of animated dialogs.
I will be developing and testing this standalone component when it's used by my own homegrown CMS, so it will have the ability do be themed, dragged and dropped, things like that.
ive used an online srpite service http://spritegen.website-performance.org/ but i want to know how to make them by myself.
How can i save an image that it should be so small but when used on my web site it comes out normal size?
Sprites aren't about making the image itself small, it's about decreasing filesize by packing several images into one.
Take a look at Yahoo's icon sprite. Notice that they have all their section icons stacked vertically in one large image. They then use CSS to position the background to only show a small window of the sprite image, thus giving you just the icon.
In the end, it's up to you how you arrange your sprite. Check out the bottom of Amazon's sprite.
Either way, hopefully that helps gives you a better idea of the concept of sprites.
From the very site you link:
CSS sprites are a way to reduce the
number of HTTP requests made for image
resources referenced by your site.
Images are combined into one larger
image at defined X and Y coorindates.
Having assigned this generated image
to relevant page elements the
background-position CSS property can
then be used to shift the visible area
to the required component image.
So there is nothing magical involved: you simply need to pack all your pictures into a single giant image with your favourite graphics tool and insert them as CSS background. Just look at this CSS sprite by Google: