Hello I am building a social network similar to facebook and I really need some help on how to handle the images in my website. I would like to know how sites like facebook manage the resizing of their images. An example would be looking at someones photo album. The length and width are not just simply changed. They are done in a more professional way to make the image still look clear and not stretched. Do they use a special tool for this. Another example would be profile pics when they are loaded to your message wall. Your friends profile pics are centered and cropped accordingly and then re sized. How do they go about doing this. Any help would be greatly appreciated.
They resize proportionally with an imaging library like GD, Imagick or others.
The presentation in the gray area is just that, presentation so HTML and CSS.
They stretch the images proportionally so that they don't look wrong; if you make the image 37.5% wider... you also make it 37.5% taller.
If we knew what language you are familiar with, we could probably suggest something to help with this.
Related
Ey. I've seen the other post about Lightbox gallery effect for Flex, but after having played around with it I cant seem to get it to work 100% (The image is as small as the thumb, and I cant make it bigger). And this also lacks some functionality I'd like to have.
So, one example would be, of course, this: http://lokeshdhakar.com/projects/lightbox2/
If you click any image on the image set you can swap between them with an arrow. This is what I'd like to have.
Also, it would be nice if it was possible to display the thumbnails for the other images in the same set under the bigger picture(when one image is already clicked).
I've tried to search for components like this, but I cant seem to find any other.
If any of you know of any nice components or snippets of code for this kind of effect then please let me know! =)
Kind regards,
Stian Berg Larsen
EDIT:
So I've searched around and tried a number of examples, but I cant seem to get any of them to work. There is always an error, and none of the examples are exactly what I want.
I simply need a way to show images like Lightbox. With a prev/next arrow and maybe a close button. Nothing more than that. How would I go about making this, or use an existing component?
Im using a TileGroup to hold all my thumbs (so that they will fill out the width of the Group with more images if there are room for it). If it's possible to generate this list of thumbnails dynamically too then that would be great, but basically what I need is to show images with a Lightbox style when I click them.
Thanks! =)
I ended up just making my own lightbox effect. :)
Created an Actionscript class (based on Group) and added image loading functionality, prev/next/close buttons and borders and such. Works like a charm :)
I have an image of a living room, which I'm turning into a menu for a new site I'm working on. The idea is that you can click on certain items in the room, like a chair, desk, couch, etc and get taken to the desired page. I'm wondering if there is a clever way of doing this. Since the items are not simple shapes, I don't want to use a standard image map.
Thanks for you help!
I'm answering because a Google search brought me here...
Because you asked for a tool:
GIMP Has a really good Image map creation function.
Open your image in GIMP and select Filters > Web > ImageMap
From there you can create image maps by drawing on the image. Saving will generate HTML you can then tailor to your needs.
This tool looks to be a solid image mapper: http://www.image-maps.com/
I'd suggest doing this with a canvas and SVG's, it would make this quite a bit easier, and more professional.
As Korvin mentioned, doing this in SVG is probably the easiest option, because you can attach events to objects in SVG rather than having to manually specify a particular area in which to listen for events.
If you go this route, I recommend using the RaphaelJS library which has a nice syntax and the advantage of working in IE pre version 9. Here's a demo which, although it uses onmouseover instead of onclick, it might be close to what you're trying to achieve:
http://raphaeljs.com/australia.html
I am developing an application for viewing images.
I used the example of PhotoScroller Apple to implement this application.
In my application I want to be able to draw on the image.
I had the idea to put a UIView on top with transparent background and draw the lines via touch events. This solution has become very slow because the generated images are very large, around 3700x2000 pixels.
I also tried a solution with the example of Apple GLPaint that uses OpenGL, but it has a size limitation of 2048x2048 pixels.
Anyone have any idea or example of how I implement this?
I think you should try and tile your image.
One option is using CATiledLayer. Have a look at this short tutorial.
Or you could try and use CGContextDrawTiledImage to get your stuff done. Possibly this post from S.O. could help you getting started.
how can you specify which image you want to show on when sharing an article? Now it just picks random images from our site which aren't relevant. I tried adding an image_src link to the head of my site but this didn't help. Any idea how you can do this?
The API of LinkedIn doesn't tell us how:
http://developer.linkedin.com/docs/DOC-1075
Kind regards,
Daan
There is currently no way to specify a thumbnail. They don't seem to use oEmbed, OpenGraph or image_src. However, you can trick it into picking a specific image.
Make your image 62x62 pixels (other sizes will likely work, but non-square aspect ratios failed for us in the combinations we tried). Also, make it the first IMG tag in the document.
If you don't want users to see that image on your site, you can hide it with postion:absolute and right:-999px.
I want to know if there is any way to append something like white border around iPad image thumbnails without too much performance issues?
Something like in XHTML\CSS where you get Polaroid like appearance.I think you may have got faint idea.
Any guidance is highly appreciated.
Fastest way would be to draw a frame around your images if they're all of the same size (your thumbnails).