I wasn't sure how to ask this. Can this effect be achieved by putting each of the 6 images in separate divs or li (list) and adding fadein/fadeout?
Did you check here ? I love this.
Jquery UI library enough for effects.
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 found this website, and I can't figure out how they made the text animation on top work. It looks like jquery, but I can't figure out the code. Does anyone know what they used to make the keystrokes appear on this website?
http://nine2011.9elements.com/
Have a look at this:
http://www.burnmind.com/tutorials/typing/
The tutorial:
http://www.burnmind.com/howto/how-to-create-a-typing-effect-an-eraser-effect-and-a-blinking-cursor-using-jquery
That seems like exactly what you were looking for.
Looks like they fill the 'canvas' section by writing one div (each with one letter) at a time, and deleting them one at a time, using a Timer (maybe 250ms?) for each action. All possible using JavaScript document manipulation; easier with jQuery though.
I can't find a really good tutorial on how to do it with vanilla JavaScript, and there's always cross-browser quirks, so you'll just have to play around if you want to do a similar effect.
We are building essentially a product/image sorter in pure CSS and js. The sorter will reorder products into different groups based on filtering and selecting. It needs to be ultra fast and smooth when moving/shifting products etc
Here is an example in flash of what I am talking about (click the links in the middle of the page to see animation):
http://dermalogica.com/us/products.html#/products/product-use
But I am looking for examples using Pure CSS3 transformation and/or JS that are as fast during animating and sorting as the example above.
Here is one example that I found using pure CSS that is sort of similar:
http://files.myopera.com/FataL/pres/pres.xml?1280852782
Know of any others?
Not sure if this http://www.spritely.net/ has what you're asking, but you could give it a shot!
I'm attempting to implement a similar animated "sliding panels" effect as the Aveda website.
I'm a little overwhelmed by all the options and Javascript libraries that are available. And a little confused after examining the Aveda website code.
Any recommendations as to how to approach this task please? Which Javascript/Effects library would be most suitable? I don't have any allegiance or greater experience in one library over the other.
My requirements are:
Cross-browser compatibility (of course)
Simple & Elegant implementation
Don't want to re-invent the wheel
Ability to animate and to be activated by mouse-clicks (like the Aveda front page)
Dynamic (don't want to have to modify javascript as more 'panels' are added)
My first impressions would be to use Scriptaculous - Effect.Move, but I'm aware that there are ready-made implementations like Spry's.
Any words of wisdom and suggestions would be greatly appreciated by this Javascript newbie.
Prembo.
I like http://www.davidmassiani.com/horinaja/
It can use the mousewheel aswell as the links to scroll between panes, and it's available for script.aculo.us and jQuery.
I would recommend the latter as it is lightweight and easy to learn/handle.
http://jqueryfordesigners.com/coda-slider-effect/ is a good tutorial for this using jQuery.
I do like the way Aveda implemented that effect. They are using prototype/scriptaculous, and it is a custom implementation.
The Aveda effect is called a carousel. The Aveda carousel scrolls to the next element on a timer and has a nice non-linear transition.
+1 to Deefjuh, I think that Horinaja would do what you want and be easiest to implement.
If you want more of a challenge, I've used PrototypeUI ( http://www.prototype-ui.com/ ) Carousel to do a series carousels for project (e.g. http://teacher.scholastic.com/products/classmags.asp ) But the dot indicator controls had to be custom programmed.