|
[ Forums >> JavaScript >> Problèmes de création JavaScript / DHTML >> js pour script de galerie bis (SirJojo HELP) ]
| > js pour script de galerie bis (SirJojo HELP) |
[ Posté par aiglobulles ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 02-10-2004 à 01:37 | 26 messages ]
Helloooooooooooooo,
ce message s'adresse bien naturellement à tout le monde, avec un tit plus pour SirJojo qui m'a déjà bien maché le travail une première fois
Voilà, j'avais demandé un tit script simpliste me permettant d'afficher une image agrandie sur une même page sans être limité par le besoin de lister le nombre des images.
SirJojo m'a donc proposé cet excellent script qui répond exactement à mes besoins, ou presque:
<head>
<script type="text/javascript">
function chargeImage(i) {
window.document.getElementById('MaDiv').innerHTML = '<img src="'+ i +'">';
}
</script>
</head>
<body>
<div id="MaDiv"></div>
<a href="#" onclick="chargeImage('magrandeimage.jpg'); return false;"><img src="mavignette.jpg"></a>
</body>
Mon nouveau problème, c'est que, certaines images taille réelle sont vraiment immense genre 1024x768 et le but est donc d'éviter l'apparition de disgracieuse scrollbarr et même un affichage global de la galerie totalement chamboulé.
Y aurait-il donc un quelconque moyen de forcer un redimensionnement automatique de l'image de manière à ne pas dépasser Xpx de largeur et Ypx de hauteur ?
J'ai trouvé ce script en farfouillant dans le moteur de l'EJS:
http://www.asp-php.net/scripts/scripting/jsimgredim.php
mais je ne sais pas du tout quoi en faire... pourriez vous m'aider ?
Merci d'avance
aiglobulles
PS: La galerie en question...
[Message édité par aiglobulles le 02-10-2004 à 01:49]
|
[ Posté par leris ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 02-10-2004 à 01:57 | 1476 messages ]
salut,
je ne veux pas critiquer SirJojo qui est une personne fort respectable et qui aide beaucoup sur les forums (et il n'y en a pas beaucoup ... ) mais je ne trouve pas tres normal d'agir sur le innerHTML pour changer une photo , agir sur la src serait plus logique , non ?
<script type="text/javascript">
function chargeImage(i) {
window.document.getElementById('mypic').src = i;
}
</script>
</head>
<body>
<img src="vide.gif" id="mypic"></div>
<a href="#" onclick="chargeImage('image.jpg'); return false;"><img src="01.gif"></a>
</body>
</html>
|
|
là il est tard , si demain tu n'as pas de reponse , je m'y colle ...
++
L.
________________
__(^[-_-]^)__
-*(_)^*^(_)*-
| [ Posté par SirJoJO ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 02-10-2004 à 08:59 | 1827 messages ]
Salut !
je ne veux pas critiquer SirJojo qui est une personne fort respectable et qui aide beaucoup sur les forums (et il n'y en a pas beaucoup ... ) mais je ne trouve pas tres normal d'agir sur le innerHTML pour changer une photo , agir sur la src serait plus logique , non ?
|
|
Justement, oui 
c'est pour çà que je disais que je ne comprenais pas très bien ce qu'il voulait faire dans son précédent topic !
(tu remarqueras aussi l'heure à laquelle j'ai posté)
Pour la question, la solution est simple :
Tu changes le src de l'image comme le dit leris, à cette image tu associes un style :
<style type="text/css"
#monImage {
width:100%;
height:100%;
}
</style>
<img name="monImage" id="monImage" />
|
|
Et puis, là, tu changes dynamiquement les width et height :
window.document.getElementById('monImage').style.height='50%';
window.document.getElementById('monImage').style.width='50%';
|
|
[Message édité par SirJoJO le 02-10-2004 à 09:30]
________________
Rechercher
| [ Posté par aiglobulles ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 02-10-2004 à 10:27 | 26 messages ]
Hello,
merci d'avoir répondu si rapidement. Ceci dit je crains que mon problème soit un peu plus compliqué.
En fait, dans la partie <head> de ma page, j'ai placé le script que tu m'as indiqué la première fois et dans le body, j'ai cela:
<a href="javascript:chargeImage('#URL_DOCUMENT')">
#LOGO_DOCUMENT
</a>
et un peu plus loin
<div id="Album">
</div>
#URL_DOCUMENT écrit de manière dynamique l'url de l'image agrandie. #LOGO_DOCUMENT fait apparaitre la vignette.
Mais à aucun moment je n'introduit la balise <img src="monimagegrande.jpg">. Mon problème c'est que je ne sais pas comment placé le second script que tu me proposes. 
Désolé d'être exigeant
aiglobulles
| [ Posté par aiglobulles ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 02-10-2004 à 22:11 | 26 messages ]
hello,
j'ai essayé de faire ce que vous m'avez dit mais là, ça plante et je suis franchement bloqué...
Voici l'extrait du source:
<head>
<!-- la css -->
<style type="text/css">
.ImageMoyenne
{
position:absolute;
display:block;
width:506px;
height:506px;
text-align:center;
vertical-align:center;
top:10px;
left:350px;
border: 2px solid #3333ff;
}
#ImageDim
{
width:100%;
height:100%;
}
</style>
<!-- fin css-->
<!-- le script -->
<script type="text/javascript">
function chargeImage(i) {
window.document.getElementById('Album').innerHTML = '<img src="'+ i +'">';
window.document.getElementById('ImageDim').style.height='500px';
window.document.getElementById('ImageDim').style.width='500px';
}
</script>
<!-- la fin du script -->
</head>
et dans le body:
[b]
<body>
<!-- le lien vignette vers image redimensionnee -->
<div class="ContourVignette">
<a href="javascript:chargeImage('#URL_DOCUMENT')">
#LOGO_DOCUMENT
</a>
</div>
<!-- fin du lien -->
<-- le div ou s'affiche l'image redimensionnee -->
<div id="Album">
<img name="ImageDim" id="ImageDim" />
</div>
<-- fin du div -->
</body>
{/b]{/i]
En fait maintenant y a plus rien qui se charge dans le div des images agrandies....
J'suis dsl, j'y connais à vrai dire rien en js, je suis censé m'y mettre cette année ainsi qu'au dhtml
Merci d'avance pour votre aide et vos conseils
aiglobulles
[i][Message édité par aiglobulles le 02-10-2004 à 22:12]
[Message édité par aiglobulles le 02-10-2004 à 22:13]
| [ Posté par leris ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 02-10-2004 à 22:30 | 1476 messages ]
|
re,
voici ce que j'ai fait.
peur etre prevoir un pre-chargement , les images ont tendance à s'afficher avant de se redimensionner (la 1ere fois qu'elles s'affichent).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page Web</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type=text/css>
body{
text-align:center; color: blue; font-size: 11px; font-family: Arial, Helvetica; text-decoration:none;background-color: aliceblue;margin:0px;
}
A { color: #1C3859; font-size: 11px; font-family: Arial, Helvetica; text-decoration:none;}
A:visited {color: #1C3859; font-size: 11px; text-decoration:none;}
A:hover { color: #9400d3; font-size: 11px; text-decoration:none}
A:active {color:red; font-size: 11px;text-decoration:none;}
.pics{
width:100px; height:69px; border:none;cursor: pointer;
}
#pic{
width:100px;height:100px;border:none;
}
</style>
<script language="JavaScript">
/*
par Onkr@krikru et S.Leris.
http://www.bluejayway.new.fr
*/
function checksize(idx){
mypict = new Image();
mypict.src = idx;
var Wdh;var Hgt;var idx;
var zz;var yy;
var maxWdth = 520; // indiquer ici la largeur maximale d'affichage des photos.
var maxHght = 520; // indiquer ici la hauteur maximale d'affichage des photos.
var larg = mypict.width;
var haut = mypict.height;
if (haut<maxHght && larg<maxWdth) // teste si plus petite
{
Wdh = larg;
Hgt = haut;
affiche(idx,Wdh,Hgt);
return true;
}
else if (haut>maxHght && haut>larg) // teste si plus haut que large.
{
Hgt = maxHght;
zz = maxHght/haut;
Wdh = parseInt(larg*zz);
}
else
{
Wdh = maxWdth;
yy = maxWdth/larg;
Hgt = parseInt(haut*yy);
}
affiche(idx,Wdh,Hgt);
}
function affiche(idx,Wdh,Hgt){
document.getElementById('pic').src = idx;
document.getElementById('pic').style.width = Wdh;
document.getElementById('pic').style.height = Hgt;
}
</script>
</head>
<body>
<br>
<img src="101s.jpg" class="pics" onClick="checksize('101.jpg');">
<img src="102s.jpg" class="pics" onClick="checksize('8.jpg');"><br><br>
<img src="103s.jpg" class="pics" onClick="checksize('202.jpg');">
<img src="104s.jpg" class="pics" onClick="checksize('caro01.jpg');">
<!-- COMMENTAIRES A RETIRER //////////
dans ton cas cela devrait donner :
<a href="javascript:checksize('#URL_DOCUMENT')">
#LOGO_DOCUMENT
</a>
ou
<a href="#" onClick="checksize('#URL_DOCUMENT');return false;">
#LOGO_DOCUMENT
</a>
-->
<br><br>
<img id="pic" src="vide.gif">
</body>
</html>
|
|
si quelqu'un se sent l'âme d'un "correcteur/simplificateur" , ne pas hésiter ...
++
L.
edit,
toujours ce prob des 2 points avant un p ...
[Message édité par Leris le 02-10-2004 à 22:32]
________________
__(^[-_-]^)__
-*(_)^*^(_)*-
| [ Posté par SirJoJO ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 02-10-2004 à 22:35 | 1827 messages ]
Bonsoir,
Comme l'a dit leris, il est préférable de changer le src de l'image plutôt que de modifier le code html avec innerHTML.
Et en fait, même pas besoin de définir un style pour l'image.
<head>
<!-- la css -->
<style type="text/css">
.ImageMoyenne
{
position:absolute;
display:block;
width:506px;
height:506px;
text-align:center;
vertical-align:center;
top:10px;
left:350px;
border: 2px solid #3333ff;
}
</style>
<!-- fin css-->
<!-- le script -->
<script type="text/javascript">
function chargeImage(i) {
window.document.getElementById('ImageDim').src = i;
window.document.getElementById('ImageDim').style.height='500px';
window.document.getElementById('ImageDim').style.width='500px';
}
</script>
<!-- la fin du script -->
</head>
<body>
<!-- le lien vignette vers image redimensionnee -->
<div class="ContourVignette">
<a href="#" onclick="chargeImage('coyote_2.jpg');return false;">
<img name="vignette" src="coyote_2_vignette.jpg" id="vignette" />
</a>
</div>
<!-- fin du lien -->
<-- le div ou s'affiche l'image redimensionnee -->
<div id="Album">
<img name="ImageDim" src="" id="ImageDim" />
</div>
<-- fin du div -->
</body>
|
|
Edit: pas vu ton code, tu as posté entre temps 
[Message édité par SirJoJO le 02-10-2004 à 22:39]
________________
Rechercher
| [ Posté par aiglobulles ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 02-10-2004 à 23:00 | 26 messages ]
[Message édité par aiglobulles le 03-10-2004 à 01:39]
| [ Posté par aiglobulles ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 02-10-2004 à 23:03 | 26 messages ]
hello,
l'est 3h27, j'ai passé de nombreuses heures à potasser des sites et des bouquis sur js et dhtml. J'ai fait je sais pas combien d'essais et finalement.. je suis revenu au script de leris avec la fonction checksize et ça marche impeccablement bien.
Je sais pas pkoi ça marchait pas avant, pê parceque je suis une burne né qui sait ??
En tous cas, merci bcp à vous deux pour votre patience. Je vous tiendrai inormés de l'évolution de la galerie si vous le souhaitez.
@bientôt
aiglobulles qui va au dodo
[Message édité par aiglobulles le 03-10-2004 à 03:29]
| [ Posté par Lepatoche ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 20-10-2004 à 14:03 | 11 messages ]
Juste histoire de ramener ma "science" !
Sans parler des scripts, je trouve dommage que sur un site on trouve "encore" des images en 1024 x kkchose.
Il faut penser qu'il y a encore une forte concentration d'internaute qui n'ont qu'un modem 56k. Et charger une grosse image....
Pour ma part, je limite la taille de mes images en 640 x 680 (et même moins) ce qui est largement suffisant pour l'affichage web. Les fichiers font rarement plus de 20Ko.
Voila.
Bonne continuation
oops... j'ai merdé dans la signature
[Message édité par Lepatoche le 20-10-2004 à 14:05]
________________
Patoche
Webmaster de http://www.lofficiel.fr.st
| [ Posté par aiglobulles ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 20-10-2004 à 14:12 | 26 messages ]
Lepatoche a dit
Pour ma part, je limite la taille de mes images en 640 x 680 (et même moins) ce qui est largement suffisant pour l'affichage web. Les fichiers font rarement plus de 20Ko.
Voila.
Bonne continuation
[Message édité par Lepatoche le 20-10-2004 à 14:05]
|
|
Lepatoche, il me semble avoir expliqué un peu plus haut les raisons pr lesquelles je propose des images de grande taille. En fait, il faut déjà prendre en compte que je ne propose pas qu'une taille d'image mais plusieurs, de manière à autoriser un affichage correct sur l'ensemble des écrans d'ordi.
Ensuite, des images de 640x480 ne permettent pas une bonne impression papier (je parle de qualité photo) d'où l'intérêt d'images de bonne résolution.
Enfin, on ne peut pas éternellement se brider sous prétexte que l'affichage est un peu plus lent pr les personnes encore sous modem 56k, d'autant plus que, à priori, d'ici peu, tout le monde aura accès au très haut débit, qu'on soit en ville ou à la campagne... alors encore un peu de patience
Bonne fin de journée, cordialement
aiglobulles
| [ Posté par Lepatoche ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 20-10-2004 à 15:16 | 11 messages ]
J'aime bien la ramener pour le plaisir
En fait je n'ai rien contre le fait de proposer des images en grande taille, mais je continue de penser que pour l'affichage une petite taille suffit.
Ensuite, on peut mettre un lien (texte) sur l'image grande taille pour que l'internaute la télécharge.
Quoiqu'il en soit tu essayes de limiter la taille d'affichage de ton image mais elle est complêtement chargée quand même.
Enfin c'est mon point de vue !
Pour ce qui est du haut débit, je ne sais plus où j'ai lu ça mais aujourd'hui, il me semble que le taux d'internaute en haut débit soit encore inférieur à 20% en france. Ca fait encore beaucoup de monde qui attend que ton image se télécharge
Tu as des actions chez France Telecom ?
________________
Patoche
Webmaster de http://www.lofficiel.fr.st
| [ Posté par aiglobulles ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 20-10-2004 à 22:49 | 26 messages ]
;) pas d'action chez ft lepatoche, rassures toi, jette un oeil par là, ça devrait te faire plaisir --> http://www.clubic.com/actualite-16932-adsl2-ultra-haut-debit-chez-free-maj-.html
pour le poids des images oui, effectivement, faut attendre un peu... mais bon, ça a du bon aussi de savoir attendre car on savoure d'autant plus une fois qu'on l'a...
Je ne sais plus qui à écrit un truc du genre.. "tte ma vie je me suis pressé de peur d'arriver en retard... aujourd'hui je suis mort et je n'ai même pas pris le temps de savourer la vie" Bref, un truc du style à force de s'presser ou de vouloir que tout aille vite, on ne sait plus profiter de l'instant présent... alors moi, je milite hait et fort pour les images de 300Ko minimum pour que les gens réapprennent à attendre :d :d :d :d
@llé bonne soirée à toi
aiglobulles
| [ Posté par Lepatoche ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 21-10-2004 à 09:05 | 11 messages ]
Effectivement ca me fait plaisir.... mais comme tu peux le lire c'est pas encore pour tout le monde.
Mais si tu es pour les fichiers d'au moins 300Ko......
Pero je travaille sur des fichiers d'environ 300Mo (en moyenne mais ca peut monter jusqu'à 600/700 Mo).. Mais ceux là je ne les mets pas en ligne
________________
Patoche
Webmaster de http://www.lofficiel.fr.st
| [ Posté par chgaillet ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 21-10-2004 à 10:56 | 154 messages ]
Ouille....ouille....ouille !!!!
J'allais demander le poids de cette image en 1024 et quand je lis que tes images font 300K j'ai très mal !!
Il n'est pas question d'être impatient, mais si une image ou un site tarde à se charger beaucoup d'internautes à 56k ne verront jamais cette image ou ce site ! Crois-tu que ton image vaut de l'or pour que l'on se fasse un café le temps qu'elle se charge ? Les logiciels qui optimisent les photos n'ont pas été créés pour les chiens...
Il y a des exagérations qui ne sont pas tolérables !
________________
On reste débutant toute sa vie... car chaque jour on apprend...
http://chgaillet.free.fr
|
|
Services email :
Vous devez vous identifier pour profiter des services par email du forum.
|
|
]
