1. #1
    Ext User hazlema's Avatar
    Join Date
    Sep 2007
    Posts
    47
    Vote Rating
    0
    hazlema is on a distinguished road

      0  

    Default Image Carousel User Control

    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.

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Awesome work.

  3. #3
    Ext User hazlema's Avatar
    Join Date
    Sep 2007
    Posts
    47
    Vote Rating
    0
    hazlema is on a distinguished road

      0  

    Default UPDATED

    UPDATED


    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.
    Attached Images

  4. #4
    Ext User hazlema's Avatar
    Join Date
    Sep 2007
    Posts
    47
    Vote Rating
    0
    hazlema is on a distinguished road

      0  

    Default


    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/

  5. #5
    Sencha User trbs's Avatar
    Join Date
    Mar 2007
    Posts
    310
    Vote Rating
    0
    trbs is on a distinguished road

      0  

    Default


    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
    I'm part of the Ext Community
    Maintaining: Translations and some Examples
    Developing on: ExtJS Python Builder / Gozerbot
    Places: Ido.nl.eu.org / My ExtSamples / Trbs on Wiki / IRC

  6. #6
    Ext User hazlema's Avatar
    Join Date
    Sep 2007
    Posts
    47
    Vote Rating
    0
    hazlema is on a distinguished road

      0  

    Default


    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..

  7. #7
    Ext User hazlema's Avatar
    Join Date
    Sep 2007
    Posts
    47
    Vote Rating
    0
    hazlema is on a distinguished road

      0  

    Default


    Quote Originally Posted by trbs View Post
    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.

  8. #8
    Sencha User trbs's Avatar
    Join Date
    Mar 2007
    Posts
    310
    Vote Rating
    0
    trbs is on a distinguished road

      0  

    Default


    It's cool too see how quickly people can pick up Ext.
    Think that speaks for itself on how easy and cool Ext is
    I'm part of the Ext Community
    Maintaining: Translations and some Examples
    Developing on: ExtJS Python Builder / Gozerbot
    Places: Ido.nl.eu.org / My ExtSamples / Trbs on Wiki / IRC

  9. #9
    Ext User hazlema's Avatar
    Join Date
    Sep 2007
    Posts
    47
    Vote Rating
    0
    hazlema is on a distinguished road

      0  

    Default


    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.

  10. #10
    Ext User potdarko's Avatar
    Join Date
    Mar 2007
    Posts
    40
    Vote Rating
    0
    potdarko is on a distinguished road

      0  

    Default nice work

    nice work


    Good work

    Any special reason to be including both ext-all.js and ext-all-debug.js in your demo url(stable and beta)?
    Miguel Benevides
    miguel.benevides@webidente.com
    my del.icio.us
    "I hope that when the world comes to an end, I can breathe a sigh of relief, because there will be so much to look forward to."