Image Carousel User Control

It's not quite ready for prime time, still have to place the buttons and add some events etc... but I would like to know if there any browser issues with my new UX. I wrote this because I saw a post today that says "write one if you can, so I took it to be a challenge, lol. Piece of cake control to write.

Live Demo:
http://beta.devclarity.com/Ext/Carousel/

Little preview, this is subject to change:

Code:

---

                       
var Carousel = new Ext.ux.carousel(
{
        name:    "imageCarousel",
        settings: {height:"148px", width:"500px", top:"50px", left:"50px", imageHeight:"128px"},
        images:  ["gfx/1.jpg", "gfx/2.jpg", "gfx/3.jpg", "gfx/4.jpg", "gfx/5.jpg", "gfx/6.jpg", "gfx/7.jpg", "gfx/8.jpg", "gfx/9.jpg", "gfx/10.jpg"]
});
Carousel.render();

---

Thats all you need to place a carousel on your page, you can have as many on your page as you want and each one can have as many images as you want.

Try it out, let me know if you have any issues. (I tested FF2.0.0.7 and IE7 and they both work)

EDIT: Forgot to mention that if you have firebug installed it outputs to the console area if you are using IE or whatever it popsup the little debug dialog.

Awesome work. :)

Same url:
http://beta.devclarity.com/Ext/Carousel/

The app has changed significantly.
If you viewed a previous version you must refresh your browser.

A screenshot is attached to this post, I will be adding a few more features, constructing a demo then I will release the code for the ux.

Done all the work I'm going to do on it today, all thats left anyway is the keyboard modifiers.
I posted the code to my website for the UX, enjoy.

http://beta.devclarity.com/Ext/Carousel/

great ux :)

If i press my mouse button on one of the edges (to that the carousel scrolls) and only release the mouse button when i've moved away from the edge (still pressing left-mouse-button) and moved over the carousel area. This makes the carousel continously scrollen until i click on one of the edges again. It this a future ?

It looks quite okey one i do this so it becomes auto scrolling, but it keeps on moving when the carousel ended (greating miles of whitespace :) maybe limit the scrolling to the start/end of the carousel ?

Anyways like sayed, nice ux :)
You should take on more challanges :P

There is another new version I also updated the example with pictures from my photo album. It now supports Preloading of all images and passing the larger images url back in the event so you can do sexy stuff like this:

Code:

---

        Carousel.on("selected", function(img, tn, image, e)
        {
                Ext.get("LargeImage").dom.src = image;
        });

---

(If there is no larger image it still raises the event the image field is blank)

Tons of new configuration options (You can now control the speed and step value!) I will document this all later but have fun with the ux..

Quote:

---

Originally Posted by trbs

great ux :)
If i press my mouse button on one of the edges (to that the carousel scrolls) and only release the mouse button when i've moved away from the edge (still pressing left-mouse-button) and moved over the carousel area. This makes the carousel continously scrollen until i click on one of the edges again. It this a future ?

---

Thanks, I have been meaning to fix that but I kinda like that pseudo feature. :-)

As for taking on more stuff bring it.. lol

I'm still pretty new to Ext having only been using it for about two weeks now (But am not new to JS/HTML/ASP and all that like 13 years doing this stuff). But I am very impressed with Ext, and plan on using it in new projects that I take on.

It's cool too see how quickly people can pick up Ext.
Think that speaks for itself on how easy and cool Ext is :)

Well I am always doing improvements, but this one may trigger a browser bug...
I need your feedback if it works for you....

Version that always works:
http://beta.devclarity.com/Ext/Carousel/index.html

Dynamic Version *Beta*:
http://beta.devclarity.com/Ext/Carousel/index2.html

The difference in the version is on one you specify the image height and width and on the other you don't. (This allows for the sizes of your images to be different).

Settings for non dynamic:

Code:

---

settings:  {imageHeight:96, imageWidth:128, width:"800px", top:"10px", left:"10px"},

---

Settings for dynamic:

Code:

---

settings:  {debug:"true", width:"800px", top:"10px", left:"10px"},

---

Eventually want to get to just using dynamic but there seems to be a bug in the way, so give it a try and if it doesn't work refresh the page and it should.

Good work :D

Any special reason to be including both ext-all.js and ext-all-debug.js in your demo url(stable and beta)?

Quote:

---

Originally Posted by potdarko

Good work :D

Any special reason to be including both ext-all.js and ext-all-debug.js in your demo url(stable and beta)?

---

Just covering all the bases till its ready for full prime time action. Then everything will be mined and unnecessary stuff removed.

Nice work, but i missing a renderTo method and external Stylesheets...
CSS adjustment are now really difficult in my opinion...

no news about the carousel?

Don't use it.If you look at the demo site, you'll notice the page doesn't have a doctype, meaning the browser is forced into quirks mode. If you try adding a doctype, it'll mess up the layout completely.

I'm not going to gripe because hazelma provided this for free, but you might want to avoid the carousel component outlined. I too ran into the doctype issue, where if my html document had a doctype, the carousel was not functional.

It's a shame, because otherwise it seems like a great component that extjs needs. Oh well, tanstaafl.

Dan

hm. any other components like that out there?