I am trying to setup a "rotating image" for part of a site I am working on. I have taken many photos of a single item (30+), and I want to display them like it is a rotating 3D image (with a possible draggable speed).
One approach I have taken is setting it as a CSS background, and looping through the images every 0.1s. It works alright, but it flickers like crazy until the image has done a full rotation (I am assuming this is because the image is not yet cached)
Has anyone implemented something similar or have a suggestion?
Much appreciated.
jQuery Cycle is an amazingly versatile, light-weight, jQuery plugin.
http://jquery.malsup.com/cycle/
Related
Is there a way to display so many images ? Maybe something like google maps, that would show all images at once as tiles and you could zoom in and see the picture in detail... ?
This problem can be easily solved by merging all images side by side like a collage.
This task can be automated by using python using its pyautogui module and any simple software for image manipulation.
By doing this a single image of very high resolution can be obtained achieving your purpose.
(Although the size of the image would be mind blowing.)
See these sites for similar works (1.2 Billion images) but with smarter solution (the are loading few images at a time upon zooming).
All 1.2-Billion Facebook Profile Pictures On One Page
The Face of Facebook
Ok, it took very long time to process and finish, but I made it ! It CAN be done. correct tools are libvips and its python version pyvips I managed to get all 366 000+ pictures in one, and then made zoomable pyramid dzi with it ! To display it OpenSeadragon since the final picture was 81GB and nothing can open that.... http://deepzoom.reverz.sk/ ( also not sure why my question was down voted :-/ )
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.
I have a flex app I am scaling using systemManager.stage.scaleMode=StageScaleMode.NO_BORDER; for the most part it works well except for my bitmap data (mostly png's from the designers).
I can set the mx:image tags to smoothBitmapContent=true and that works great for everything except my mouseover objects. When I do a mouseover, the source is being changed from one embedded image to another embedded image. I have tried several (many) online "smoothimage" classes, and tried to write my own, I have tried to reset smoothBitmapContent every chance I get but still no dice. It seems to mee that because I am scaling at the app level, that the flopped out bitmap is not getting smoothed when it renders.
How to keep things smooth? Perhaps there is a flag to tell Flex to smooth stuff when it scales it?
So the easy answer (that works for me) was to instead of changing the image.source from one embedded png to another, was to use two images and flip flop image.visible between the two... Granted that adds two extra objects to the screen, But for some reason they all stay smoothed and scaled that way, where as before switching sources was going from smooth to jaggidy and un-readable.
Josh