Results 1 to 10 of 10

Thread: caroussel

  1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    France
    Posts
    25
    Answers
    2
    Vote Rating
    0
      0  

    Question caroussel

    Hi,

    I would like to create a caroussel like this :
    caroussel.PNG
    but I don't find the component to create it.
    Can you help me please?

    Thanks

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585
    Vote Rating
    394
      0  

    Default

    I don't believe there is an out-of-the-box component for this, you'd have to write something bespoke. How you do it would depend a lot on what the items in your Carousel are and how the user would be allowed to interact with them.

    For example, if the items are just images with no user interaction you could extend Ext.Component, render the images with HTML and a bit of CSS, then add the movement using Ext.Element and the effects methods.

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Location
    France
    Posts
    25
    Answers
    2
    Vote Rating
    0
      0  

    Question

    The items are images and I just need to show (maximize) the picture with click on it. So what do you advise me to use?

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585
    Vote Rating
    394
      0  

    Default

    If the only interaction is clicking on the images then I'd still do it the way I suggested above. Adding a click listener with Ext.Element is easy enough.

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Location
    France
    Posts
    25
    Answers
    2
    Vote Rating
    0
      0  

    Question

    Hi,

    Thanks for your suggestion. I succeeded to create my component with my images and I add a listener in order to open them in a popup.
    But now I don't really understand how to add some effects for moving images. Do you have an example / idea to perform it?

    Thanks

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585
    Vote Rating
    394
      0  

    Default

    Moving the images should really just need you to alter the CSS on a timer. The methods on Ext.Element can help to set the positions for you rather than tweaking styles directly.

    You might find this helpful:

    http://docs.sencha.com/ext-js/4-0/#!/api/Ext.fx.Anim

    The introduction to Ext.Element also discusses animations:

    http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Element

    You might also like to explore some of the default animations:
    • slideIn
    • slideOut
    • puff
    • switchOff
    • frame
    • ghost
    • highlight
    • fadeIn
    • fadeOut


    Even though I suspect none of them will be directly applicable they are worth understanding to get a better feel for animations in ExtJS and the source code for them may help you to write your own.

  7. #7
    Sencha User
    Join Date
    Jun 2011
    Location
    France
    Posts
    25
    Answers
    2
    Vote Rating
    0
      0  

    Question

    Thanks for all, I found how to move my images. I get now an another problem that I explain in this thread :
    http://www.sencha.com/forum/showthre...on-on-one-line

    I will give my solution when all problems will be resolved.

    Thanks

  8. #8
    Sencha User
    Join Date
    Jun 2011
    Location
    France
    Posts
    25
    Answers
    2
    Vote Rating
    0
      0  

    Default

    Hi,

    I give you my script for creating a caroussel :
    Code:
    /** 
     * Create a picture
     */
    function createPicture(pathPhoto) {
    	var picture = {src: linkPhotos + pathPhoto, desc: pathPhoto, name: pathPhoto};
    	return picture;
    }
    
    
    /** 
     * Creates the caroussel containing the pictures
     */
    function createPictures(pathPhotos) {
    	var picturesTab = [];
    	for(var i=0; i<pathPhotos.length; i++) {
    		picturesTab.push(createPicture(pathPhotos[i]));
    	}
    	
    	var pictures = {img: picturesTab};
    	
    	// Creates the component containing the pictures
    	var componentCaroussel = Ext.create('Ext.Component', {
    		data: pictures,
    	    width: 372,
    	    height: 69,
    	    cls: 'componentCaroussel',
    	    tpl: '<tpl for="img"><img src="{src}" alt="{desc}" name="{name}" width="73" height="69" style="position:absolute;left:{[(xindex - 1) * 93]}px;"></tpl>',
    	    listeners: {
    	        click: {
    				// Open a window containing a picture when clicking on it
    	            element: 'el',
    	            fn: function(component, picture) {
    	            	if(picture && picture.src) {
    		            	var windw = Ext.create('Ext.window.Window', {
    		            	    title: 'Photo',
    		            	    width: 870,
    		            	    height: 669,
    		            	    layout: 'fit',
    		            	    modal: true,
    		            	    draggable: false,
    		            	    resizable: false,
    		            	    cls: 'popup',
    		            	    listeners: {
    		            	    	click: {
    		            	    		element: 'body',
    			            	    	fn: function(component, picture) {
    			            	    		windw.destroy();
    			            	    	}
    		            	    	}
    		            	    },
    		            	    items: [Ext.create('Ext.Img', {
    		            	        src: picture.src,
    		            	        style: {
    			            	    	backgroundColor: '#FFFFFF'
    			            	    }
    		            	    })]
    		            	}).show(););
    	            	}
    	            }
    	        }
    	    }
    	});
    	
    	// Creates the left arrow for moving the caroussel on the left
    	var carousselArrowLeft = Ext.create('Ext.Img', {
    	    src: 'resources/themes/images/default/util/splitter/mini-left.gif',
    	    width: 10,
    	    height: 69,
    	    cls: 'carousselArrow',
    	    listeners: {
    	    	click: {
    				element:'el',
    				fn: function() {
    					// Moves the component of the caroussel to the left
    					var listImg = componentCaroussel.el.query('img');
    					var listImgLength = listImg.length;
    					
    					if(listImgLength > 0) { // Disable click if no picture
    						var lastImgX = Ext.get(listImg[listImgLength - 1]).getX();
    						var arrowLeftX = carousselArrowLeft.getPosition()[0];
    						var arrowRightX = carousselArrowRight.getPosition()[0];
    						
    						if(listImgLength > 4) {	// Disable click if there is less than 4 pictures
    							if(lastImgX > arrowRightX) {
    								componentCaroussel.getEl().move('l', carousselMove, true);
    								carousselArrowRight.removeCls('carousselArrowDisable');
    							} else if(lastImgX > arrowRightX - 93) {
    								componentCaroussel.getEl().moveTo((arrowLeftX + 10) - 93 * (listImgLength - 4), Ext.get(listImg[listImgLength - 1]).getY(), true);
    								carousselArrowLeft.addCls('carousselArrowDisable');
    								carousselArrowRight.removeCls('carousselArrowDisable');
    							}
    							if(lastImgX <= arrowRightX + 10) {
    								carousselArrowLeft.addCls('carousselArrowDisable');
    							}
    						}
    					}
    				}
    			}
    	    }
    	});
    	
    	// Creates the right arrow for moving the caroussel on the right
    	var carousselArrowRight = Ext.create('Ext.Img', {
    	    src: 'resources/themes/images/default/util/splitter/mini-right.gif',
    	    width: 10,
    	    height: 69,
    	    cls: 'carousselArrow',
    	    listeners: {
    	    	click: {
    				element:'el',
    				fn: function() {
    					// Moves the component of the caroussel to the right
    					var listImg = componentCaroussel.el.query('img');
    					var listImgLength = listImg.length;
    					
    					if(listImgLength > 0) { // Disable click if no picture
    						var lastImgX = Ext.get(listImg[listImgLength - 1]).getX();
    						var firstImgX = Ext.get(listImg[0]).getX();
    						var arrowX = carousselArrowLeft.getPosition()[0];
    						
    						if(listImgLength > 4) { // Disable click if there is less than 4 pictures
    							if(firstImgX + 93 > arrowX + 10) {
    								componentCaroussel.getEl().moveTo(arrowX + 10, Ext.get(listImg[listImgLength - 1]).getY(), true);
    								carousselArrowRight.addCls('carousselArrowDisable');
    								carousselArrowLeft.removeCls('carousselArrowDisable');
    							} else if(firstImgX < arrowX + 10) {
    								componentCaroussel.getEl().move('r', carousselMove, true);
    								carousselArrowLeft.removeCls('carousselArrowDisable');
    							}
    						}
    					}
    				}
    			}
    	    }
    	});
    	
    	// Don't show the caroussel if there is no picture
    	if(!pictures || !pictures.img || !pictures.img.length || pictures.img.length == 0) {
    		carousselArrowLeft.addCls('displayNone');
    		carousselArrowRight.addCls('displayNone');
    	}
    	// Set arrows as disable if there is less than 4 pictures
    	else if(pictures.img.length < 4) {
    		carousselArrowLeft.addCls('carousselArrowDisable');
    		carousselArrowRight.addCls('carousselArrowDisable');
    	}
    	// If there is more than 4 pictures set the right arrow as disable
    	else {
    		carousselArrowRight.addCls('carousselArrowDisable');
    	}
    	
    	// Creates the main panel for caroussel
    	var caroussel = Ext.create('Ext.panel.Panel', {
    		width: 392,
    		height: 69,
    		border: 0,
    		layout: {
    			type: 'hbox'
    		},
    		items: [
    	        carousselArrowLeft,
    			componentCaroussel,
    			carousselArrowRight
    		]
    	});	
    	
        return caroussel;
    }

  9. #9
    Sencha User
    Join Date
    Nov 2010
    Posts
    6
    Vote Rating
    0
      0  

    Default

    HI,

    Thanks for posting your script. I got some ideas for my own carousel but when I was trying out your example but it gives me an error that carousselMove is not defined. I am not sure what that variable should be. Can you please let me know what that should be. Also if u can post the css files that would be great.

    Thanks ad Regards,
    Nubee

  10. #10
    Sencha User
    Join Date
    Jun 2011
    Location
    France
    Posts
    25
    Answers
    2
    Vote Rating
    0
      0  

    Default

    Hi,

    The variable "carousselMove" is the number of pixels to move the caroussel.

    /* Number of pixel for moving the caroussel */
    var carousselMove = 93;

    This is the content of my CSS file :

    /* Carousel */
    .componentCaroussel img {
    margin-left: 10px;
    margin-right: 10px;
    }


    .carousselArrow {
    z-index: 10;
    background-color: #FFFFFF;
    }


    .carousselArrowDisable {
    /* for IE */
    filter: alpha(opacity=40);
    /* CSS3 standard */
    opacity: 0.4;
    }

    .popup {
    z-index: 20;
    }

    .displayNone {
    display: none;
    }

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •