Redimensionnement automatique pour Products.Carousel

Question

J'essaie Products.Carousel. J'ai créé un carrousel pour ma page d'accueil et ajouté deux bannières qui pivotent automatiquement après n secondes.

Le problème est que je suis supposé définir la largeur et la hauteur dans les paramètres du carrousel, ou laisser ces valeurs vides pour utiliser celles de la première bannière. Ce que je souhaitais, c'est que le carrousel utilise la même largeur pour la zone de contenu principal. J'ai essayé de définir une valeur fixe, mais bien sûr cela ne fonctionnera pas dans différentes résolutions (les bannières pourraient envahir la bonne zone de portlet, ou pourraient être trop courtes pour la largeur du contenu principal).

Des idées sur comment je peux travailler autour de ça?

Answer 1

Je n'ai pas de réponse, seulement des idées.

• pouvez-vous définir une classe sur la zone de bannière qui définira sa largeur la même que la zone de contenu principal?
• pouvez-vous utiliser un% largeur?

ou le mal, mais avec succès, méthode que je l'ai utilisé:

• bannières flash en utilisant swfobject.js

Answer 2

Vous devriez être en mesure de donner le carrousel d'une largeur variable en remplaçant Products.Carousel.viewlet (dans le code du système de fichiers ou dans portal_view_customizations). Vous voudrez probablement baser la largeur du carrousel sur la largeur d'un autre élément, comme le div #content:

<div tal:condition="view/available" 
    tal:attributes="id view/element_id;" 
    class="carousel"> 
    <tal:banners tal:define="banners view/banners;" 
     tal:condition="banners" 
     tal:content="structure banners"> 
     Banners 
    </tal:banners> 
    <tal:pager tal:define="pager view/pager;" 
     tal:condition="pager" 
     tal:content="structure pager"> 
     Pager 
    </tal:pager> 
    <script type="text/javascript" charset="utf-8" tal:content="string: 
     (function ($$) { 
      $$('#${view/element_id}').ploneCarousel({ 
       height: ${view/height}, 
       width: $$('#content').width(), 
       transition: '${view/transition}', 
       speed: ${view/speed}, 
       delay: ${view/delay} 
      }); 
     })(jQuery); 
    "> 
    </script> 
</div>