jQuery cycle redimensionner le problème

Question

Sur cette page, j'ai un écran de démarrage au milieu qui est 100% de largeur et il tourne les images graphiques toutes les 8 secondes.

J'ai 3 div dans ce diaporama. Le div principal contient le diaporama, div interne a l'image de fond de répéteur et div interne à l'intérieur qui a l'image de gradient.

problème 1. Lorsque vous essayez de rendre le navigateur plus petit .... contenu du site Web se régler et les changements sur le côté gauche ..... mais le contenu de mon diaporama n'a pas ... actuellement je n'ai pas contenu dedans mais vous pouvez voir ceci par la frontière noire. Le diaporama reste au milieu.

Comment résoudre ce problème?

Problème 2. Une fois que le navigateur est de plus petite largeur et que vous chargez cette page .... les rendus du diaporama sont au centre. Maintenant, agrandissez le navigateur, vous verrez le diaporama parce qu'il a été rendu dans le petit écran .... il va laisser un espace blanc sur les côtés et div ne redimensionnera pas avec le navigateur.

Je me suis cogné la tête contre cela, donc toute aide et suggestion sont les bienvenues.

Answer 1

Je n'ai jamais utilisé jquery.cycle auparavant, mais c'est en ajustant votre largeur en fonction de la largeur initiale du navigateur lors du rendu. Lors du redimensionnement du navigateur, ces largeurs ne sont pas ajustées non plus, ce qui cause votre problème ultime. En visualisant votre CSS, il semble que vous essayez de définir une largeur de 100% directement sur ces divs (ce qui ne change pas car jquery.cycle applique une largeur directement à l'élément qui le surcharge). Une solution immédiate est de spécifier! Important immédiatement après vos largeurs sur les éléments div dans votre CSS (en faisant en sorte que les éléments utilisent directement votre CSS).

Par exemple (permet de prendre la première div bleu):

.fadein { 
    width: 100% !important 
} 

.hd_splash_container_blue { 
    width: 100% !important 
    poisition: relative; 
} 

.main_blue { 
    margin-left:70px; 
    margin-right:70px; 
    position: relative; 
} 

Cela devrait vous permettre de redimensionner le navigateur maintenir avec succès le contenu centré comme souhaité.

Je pourrais suggérer d'appliquer votre CSS à un niveau supérieur, puisque les seuls changements entre chaque niveau élevé sont l'image (ce qui peut être fait comme c'est maintenant). Prenez le reste du CSS et appliquer à un niveau élevé:

.hd_splash_container { 
    width: 100% !important 
    poisition: relative; 
} 

.main_color { 
    margin-left:70px; 
    margin-right:70px; 
    position: relative; 
} 

Answer 2

Je crois que la même incidence peut effectivement être réalisé en utilisant les options natives du plugin Cycle. Essayez d'ajouter ces règles comme ceci:

$('#slides').cycle({ 
    resizeContainer: false, 
    slideResize: false 
});