Bonjour à tous !
Une des seules choses que je n'ai pas essayé de créer de toute pièce est ce diaporama en Jquery que j'utilise énormément dans mon site comme sur cette page. Malheureusement, cela manque de fluidité et en particulier en cas de redimensionnement de la fenêtre où je suis obligé de faire un onresize sur le body :
Ce qui me permet d'atteindre mon objectif de mise en page mais qui est très lourd pour l'utilisateur et en plus pas valide W3C !!!...
Ce diaporama est géré par un script et des CSS, je crois avoir fait tout ce que je pouvais avec les CSS et je pense qu'il me faudrait modifier le code javascript.
Pour voir ce que ça donne si je ne mets pas le onresize ajoutez _essai au nom de fichier du lien précédent : blablabla.../LeVillage_essai.htm et modifiez la largeur de votre navigateur.
Voici le code html :
les parties de codes CSS un peu partout :
1. Dans ma feuille de style générale styles.css:
2. Dans ma feuille de style stylediapocadrept.css
3. Dans ma feuille de style stylediapocadre.css, là je vous laisse aller la voir si vous en avez le courage car elle ne s'applique qu'au diaporama mais l'important reste dans les premières lignes :
Maintenant, passons au code js script.js:
Et enfin, le must : jquery.jDiaporama.js où pareil, je vous laisse suivre le lien pour le voir en entier... Je vous mets juste ici les quelques passages ou je vois l'attribut width :
Ouf ! On y est !!!
Donc si vous n'avez pas vraiment saisi ce que je voulais faire, c'est redimensionner mes images dans le diaporama en cas de redimensionnement de la fenêtre Pour que les images ne "montent" pas sur mon texte. J'imagine possible de relancer la fonction init (peut-être???) avec un truc dans ce genre : window.onresize ???
Ou bien si vous avez d'autre idées plus simples, n'hésitez pas, je suis prêt à changer beaucoup de choses, mes pages avec ces diaporamas ne sont absolument pas fluides et même de temps en temps, les images apparaissent toutes petites... !!!
Merci d'avance !
Modifié par jojoledemago (13 Oct 2011 - 03:39)
Une des seules choses que je n'ai pas essayé de créer de toute pièce est ce diaporama en Jquery que j'utilise énormément dans mon site comme sur cette page. Malheureusement, cela manque de fluidité et en particulier en cas de redimensionnement de la fenêtre où je suis obligé de faire un onresize sur le body :
<body onResize="window.location.href=window.location.href">Ce qui me permet d'atteindre mon objectif de mise en page mais qui est très lourd pour l'utilisateur et en plus pas valide W3C !!!...
Ce diaporama est géré par un script et des CSS, je crois avoir fait tout ce que je pouvais avec les CSS et je pense qu'il me faudrait modifier le code javascript.
Pour voir ce que ça donne si je ne mets pas le onresize ajoutez _essai au nom de fichier du lien précédent : blablabla.../LeVillage_essai.htm et modifiez la largeur de votre navigateur.
Voici le code html :
<div id="contenu">
<div class="simpledr">
<div class="diap">
<ul class="diaporama1">
<li><img src="images/Le_Village/galerie/Chatenay.gif" alt="Chatenay" title="Châtenay" /></li>
<li><img src="images/Le_Village/galerie/maison_des_vieux_metiers.gif" alt="la maison des vieux métiers" title="La maison des vieux métiers au coeur du village" /></li>
</ul>
</div>
<h2>Chatenay</h2>
<p>Petit village rural et paisible du <em>Brionnais</em> d’environ 160 habitants, région d’élevage (race charolaise) au paysage vallonné.</p>
<p>Au cœur du village vous pourrez visiter <strong>la maison des vieux métiers</strong> exposition de vieux outils , reconstitution d’une maison comme autrefois, fête du pain et de la confiture le dernier dimanche d’août, fête de la pomme le 3ème dimanche d’octobre.</p>
<p>Les dernières infos de Chatenay : <a href="http://www.pays-clayettois.fr/chatenay-s-dun.html">ici</a></p>
<hr />
</div>
</div><!--contenu-->
les parties de codes CSS un peu partout :
1. Dans ma feuille de style générale styles.css:
#contenu {
width:54%;
position:relative;
left:50%;
top:95px;
margin-left:-26.5%;
padding-bottom:152px;
}
.simpledr p:first-letter{padding-left:30px}
.simpledr p,.simpledr ul{margin:10px 10px 0 10px; text-align:justify;font-size:1em}
/*arrondis images*/
.simpledr img {
-webkit-border-radius:0 15px 15px 0;
-moz-border-radius:0 15px 15px 0;
clip-path: url(resources.svg#2dr);
border-radius:0 15px 15px 0;
}
.simpledr .diap{float:right; width:40%;margin: 0 0 -2px 10px;max-width:335px;}
.simpledr .diap img {width:100%;/*Pour corriger le dépassement des images sans javascript*/}
.simpledr{
overflow:hidden;
margin-bottom:20px;
/*Bords Arrondis*/bla bla bla...
/*ombre box*/bla bla bla...
}
.simpledr hr, .simplega hr, .simplecenter hr {clear:both;visibility:hidden; height:0;line-height:0;}
2. Dans ma feuille de style stylediapocadrept.css
.jDiaporama{
height:auto;
width:100%;
position:relative;
float:right;
}
3. Dans ma feuille de style stylediapocadre.css, là je vous laisse aller la voir si vous en avez le courage car elle ne s'applique qu'au diaporama mais l'important reste dans les premières lignes :
.jDiaporama ul{
/*-moz-box-shadow:1px 1px 0.5em #222; /*permet d'afficher une sorte de cadre très léger autour des photos */
overflow:hidden;
margin:0;
}
.jDiaporama li{
list-style-type:none;
overflow:hidden;
position:absolute;
}
.jDiaporama li img{
display:block;
position:relative;
left:0;
width:100%;
}
Maintenant, passons au code js script.js:
$(document).ready(function(){
$(".diaporama1").jDiaporama({
animationSpeed: "slow",
delay:6,
infos:true
});
});
Et enfin, le must : jquery.jDiaporama.js où pareil, je vous laisse suivre le lien pour le voir en entier... Je vous mets juste ici les quelques passages ou je vois l'attribut width :
//au début, on a ça, je suppose que ça met tout à 0 !... :
var width = 0;
var height = 0;
//Ensuite, je trouve une fonction init appelée une seule fois par la suite:
function init()
{
// Ajustement de la taille du container
width = $("li:first-child img", diapo).width();
height = $("li:first-child img", diapo).height();
diapo.width(width);
diapo.height(height);
diapo.parent().width(width);
diapo.parent().height(height);
//...................................
// Cette ligne me parait intéressante dans les controls, état du diaporama :
$(".jDiaporama_status", diapo.parent()).css("margin-left", -($(".jDiaporama_status", diapo.parent()).width()/2));
Ouf ! On y est !!!
Donc si vous n'avez pas vraiment saisi ce que je voulais faire, c'est redimensionner mes images dans le diaporama en cas de redimensionnement de la fenêtre Pour que les images ne "montent" pas sur mon texte. J'imagine possible de relancer la fonction init (peut-être???) avec un truc dans ce genre : window.onresize ???
Ou bien si vous avez d'autre idées plus simples, n'hésitez pas, je suis prêt à changer beaucoup de choses, mes pages avec ces diaporamas ne sont absolument pas fluides et même de temps en temps, les images apparaissent toutes petites... !!!
Merci d'avance !
Modifié par jojoledemago (13 Oct 2011 - 03:39)
