PDA

View Full Version : caroussel



jeanrene
30 Aug 2011, 4:44 AM
Hi,

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

Thanks

skirtle
30 Aug 2011, 8:04 AM
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.

jeanrene
30 Aug 2011, 9:15 AM
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?

skirtle
30 Aug 2011, 9:33 AM
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.

jeanrene
31 Aug 2011, 7:44 AM
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

skirtle
31 Aug 2011, 8:16 AM
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.

jeanrene
31 Aug 2011, 9:47 AM
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/showthread.php?145651-Panel-items-position-on-one-line

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

Thanks

jeanrene
14 Sep 2011, 1:17 AM
Hi,

I give you my script for creating a caroussel :


/**
* 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;
}

divyajain1
17 Mar 2012, 11:48 PM
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,

jeanrene
19 Mar 2012, 2:22 PM
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;
}