[Module] MGC Home Products Carousel

[mtor]

As the currently available Carousel was not fitting our needs we have developped a new Carousel. I am releasing it here so that everyone could benefit of it !

This Carousel is based on jQuery.

Features

This Carousel is highly configurable through the following options :
- Automatic scroll (Can be disabled, configurable duration)
- Number of products in the Carousel
- Number of products in the visible part of the Carousel
- Number of products scrolled by automatic scroll or button
- Image type used (selection between your shop images type)
- Display or not Product's name
- Display or not Product's price
- Select the categories from which not to retrieve the products
- Select Products order (same as homefeatured module)

This could be used as a featured Carousel if you exclude all categories except the home one :) !

Install

Just upload the content of the zip in your modules directory. Then go to your modules management page, install the module and configure it.

Enjoy !!

-------------------------------

Le Carousel disponible ne nous convenant pas, nous avons décidé d'en développer un nouveau. Je le release donc ici afin que tout le monde puisse en profiter !

Ce Carousel est basé sur jQuery.

Fonctionnalités

Ce Carousel est complêtement configurable grâce aux options suivantes :
- Scroll automatique (Peut-être désactivé, intervalle de scroll réglable)
- Nombre de produits dans le Carousel
- Nombre de produits affichés dans la partie visible du Carousel
- Type d'images à utiliser (sélection parmis les types disponible dans votre boutique)
- Afficher ou non le nom du produit
- Afficher ou non le prix du produit
- Sélectionner les catégories à exclure pour la récupération des produits
- Sélectionner l'ordre des produits (identique au module homefeatured)

Il est possible d'utiliser ce module comme un module featured Carousel en excluant toutes les catégories à l'exception de l'accueil !

Installation

Uploadez le contenu du zip dans votre dossier modules. Allez ensuite dans le gestionnaire de modules et installe le. Il ne vous restera plus qu'à le configurer

Enjoy !!

-------------------------------

Todo list :
- Circular Carousel / Carousel circulaire
- Possibility to configure the speed / Possiblité de sélectionner la vitesse
- Add positioning in header / Ajouter le positionnement dans le header

Attached File(s)

•  Image 1.png (90bytes)
  Number of downloads: 79084
•  Image 2.png (122bytes)
  Number of downloads: 42010
•  Image 8.png (99bytes)
  Number of downloads: 39775
•  MGC Home Products Carousel.zip (104bytes)
  Number of downloads: 16794

[Merchant]

Nice work.

[SonnyCooL]

cool ...
will try later and thanks

add: how to make it smaller ? is too wide for my three column theme .....
also : if i put it on top on front page, it make my site look like two column (right column drop to bottom and features product overlap).

thanks

[mtor]

Edit the css file located in the modules/homecarousel/jcarousel/skins/tango/skins.css file :)

[jolvil]

great module, 2 little things:

Box round corners only with FF2 but not with IE7 or Chrome.

Scrolling not starting again after clicking on arow.


--------------------------------------------------------


to start again on I just changed 0 to 1 in homecarousel.js

    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(1);
    });

    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(1);
    });

But a time pause could be better before starting again


------------------------------------------------------------

to set of round corners on FF:

erase

 -moz-border-radius: 10px;

in homecarousel/jcarousel/skins/tango/skins.css file

[SonnyCooL]

From 1232397897:

Edit the css file located in the modules/homecarousel/jcarousel/skins/tango/skins.css file :)

thanks bro, got it with the size i want :)
but when i put this module in first or second place (homecontent), my right column and features product turn out below left column ...

Attached File(s)

•  featureproduct.JPG (57bytes)
  Number of downloads: 37000

[mtor]

From 1232397932:

great module, 2 little things:

Box round corners only with FF2 but not with IE7 or Chrome.

Scrolling not starting again after clicking on arow.


--------------------------------------------------------


to start again on I just changed 0 to 1 in homecarousel.js

    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(1);
    });

    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(1);
    });

But a time pause could be better before starting again


------------------------------------------------------------

to set of round corners on FF:

erase

 -moz-border-radius: 10px;

in homecarousel/jcarousel/skins/tango/skins.css file

Thanks, zip updated regarding the autoscrolling not starting again

[mtor]

From 1232400138:

From 1232397897:

Edit the css file located in the modules/homecarousel/jcarousel/skins/tango/skins.css file :)

thanks bro, got it with the size i want :)
but when i put this module in first or second place (homecontent), my right column and features product turn out below left column ...

Try diminishing the size again.

[SonnyCooL]

From 1232400762:

From 1232400138:

From 1232397897:

Edit the css file located in the modules/homecarousel/jcarousel/skins/tango/skins.css file :)

thanks bro, got it with the size i want :)
but when i put this module in first or second place (homecontent), my right column and features product turn out below left column ...

Try diminishing the size again.

drop to 200px but result remain .....
any solution ?

[mtor]

Ok was my fault ...

Open the homecarousel.tpl file. Remove the

[SonnyCooL]

From 1232402468:

Ok was my fault ...

Open the homecarousel.tpl file. Remove the

after the .

Zip file has been corrected.

[myname]

hi... very beautiful module!

I have two questions:
1) as me I place to create a space among the block "home featured" and the block "Homa product carousel?" ( img 1)
2) how I can center the block "Home product carousel?" (img 2)

Thanks

Attached File(s)

•  HPC_1.jpg (44bytes)
  Number of downloads: 36389
•  HPC_2.jpg (42bytes)
  Number of downloads: 36026

[mtor]

Hi,

You have to play around with the css file as stated previously.

I assume you already did as per your second screenshot.

I presume your style is fixed width so play around with the margin-left that should do it.

[myname]

Thanks, but

which cms to center the block? in the image 2 have lengthened only the block, however don't I know where I can insert a function to center the block?

and for the image 1? ... how can I detach (to set a space among the 2) the block "homefeatured" from your block?

[Travis]

Good, but

it shows products which are currently disabled.

EDIT: Also duplicates same item sometimes, even next to each other.

[mtor]

@myname :
For the space, add a margin-top : value px; (replace value by the space you want) in :

.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid #346F97;
}

And this is also in this bit of code that you must add modification of the width as well as centering.

@Travis :
Ok this should now be fixed. Download the zip file again and just replace the homecarousel.php file from the homecarousel directory :)

[Travis]

Fantastic fix, very happy. Will tell if I find anymore issues. But i like it so far.

So much better then the other carousel offered.

Many Thanks

[Travis]

Been looking at it and thinking, maybe instead of wizzing back to the start when it reaches the end, it has a never ending loop so when it gets to the the end it continues flicking (changing product) in the same direction (no wizzing right back to where it began), instead the next product is the first product again. Saves the customer the headache as they watch it wizz back to the start.

Sorry for my bad explanation. I hope someone understands.

[jolvil]

To make animation a litle slower I added in homecarousel.js, it works:

    animation: 'slow',

in

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: carousel_autoplay,
        wrap: 'last',
        visible: carousel_items_visible,
        scroll: carousel_scroll,
    animation: 'slow',
        initCallback: mycarousel_initCallback

but I tried to add wrap: 'first', or wrap: 'circular', to have a circular carousel but it doesn't work

How to set a circular caroussel?

[mtor]

About the Carousel it's a bit more complicated to implement, the js library doesn't support it by default.

I will wokr on it and release a new version with the option to set the Carousel as circular or not as well as a speed option.