Java script mur d'image en arc de cercle 3d

Résolu
davidtinew
Messages postés
7
Date d'inscription
dimanche 25 janvier 2015
Statut
Membre
Dernière intervention
28 janvier 2015
- 25 janv. 2015 à 17:33
davidtinew
Messages postés
7
Date d'inscription
dimanche 25 janvier 2015
Statut
Membre
Dernière intervention
28 janvier 2015
- 28 janv. 2015 à 23:03
bonjour
je suis un nouveau membre et je me nomme David
j'ai eu à telecharger le code source du projet java script mur d'image en arc de cercle 3d. Mais mon probleme c'est que je n'arrive pas à remplacer les images ki y sont par celles qui m'interessent

4 réponses

jordane45
Messages postés
35819
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
6 juillet 2022
358
25 janv. 2015 à 18:40
Bonjour. ..
attends..j'allume mes boules de divination. ... ah ben non..marche pas... :-D

Bon.. après cette boutade... dis nius de quel script tu parles exactement (donne son lien) et explique nous ce que tu as essayé de faire. ..


0
davidtinew
Messages postés
7
Date d'inscription
dimanche 25 janvier 2015
Statut
Membre
Dernière intervention
28 janvier 2015

26 janv. 2015 à 02:04
désolé voilà le lien dont il est question

<< http://codes-sources.commentcamarche.net/source/download/100876@1441861 >>

j'ai essayer de remplacer les images utilisées pour la construction de ce "mur d'image" par des photos personnelles afin d'obtenir le même modèle de mur(mais cette fois ci presentant mes photos à moi) mais j'y suis pas arrivé. merci de me donner un coup de main
0
@karamel
Messages postés
1808
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 juillet 2022
144
Modifié par kazma le 26/01/2015 à 11:04
bonjour

c'est dans le fichier html les image doivent etre declaré dans un array

function mur_instance( tb,repertoire, tps ){

 var ob=Object.create(k_mur);

 ob.nombre=10;    //nombre d'image en horizontal -1
 ob.nb_hauteur=7;   //nombre d'image en verticale
 ob.angle_max=Math.PI/3;
 ob.marge=4;  //espacement entre chaques image
 ob.chemin="images/";  //repertoire ou se situe les image

// tableau contenant le nom des images

 ob. tbmage=['aerien.jpg','wall.jpg','karen.jpg','halo.jpg','tortue.jpg','optimus.jpg','star.jpg','chloe.jpg','war.jpg','cap.jpg','cow.jpg','cow2.jpg','main.jpg','croods.jpg','justicier.jpg','planete.jpg','pont.jpg','rob.jpg','hobbit.jpg','america.jpg','elsa.jpg','toy.jpg','ping.jpg','plane.jpg','spider.jpg','sucker.jpg','king_kong.jpg','ville.jpg','harry.jpg','coraline.jpg','qui.jpg','singe.jpg','lost.jpg','cap.jpg','fille.jpg','avion.jpg','chopra.jpg','emma.jpg','russell.jpg','avatar.jpg','moche.jpg','ours.jpg','iron.jpg','hulk.jpg','pirates.jpg','ice.jpg','miserables.jpg','inception.jpg','batman.jpg','gwen.jpg','kate.jpg','madagascar.jpg','scream.jpg','cat.jpg','sucker.jpg','cars.jpg','requin.jpg','iron2.jpg','boulettes.jpg','pig.jpg','melon.jpg','samu.jpg','punch.jpg','anony.jpg','arnold.jpg','perse.jpg','clint.jpg','thor.jpg','oz.jpg','tron.jpg','fast.jpg','trek.jpg','cat2.jpg','totoro.jpg','ralph.jpg','matrix.jpg','evil.jpg']

 ob.init_image();
}

//sert a lancer la creation du diaporama au chargement de la page (imperatif)

window.addEventListener('load',mur_instance, false);

//fonction qui sert a definir ce qui doit etre fait quand on clic sur une image si rien doit etre fait la laissé vide

function que_faire(e){
kcentre.cloclo(e)
}
 


rien ne sert de courir il faut partir a point.
cours Forest cours !
0
davidtinew
Messages postés
7
Date d'inscription
dimanche 25 janvier 2015
Statut
Membre
Dernière intervention
28 janvier 2015

26 janv. 2015 à 12:48
ok merci je reessais
0
davidtinew
Messages postés
7
Date d'inscription
dimanche 25 janvier 2015
Statut
Membre
Dernière intervention
28 janvier 2015

26 janv. 2015 à 13:33
ca ne donne toujours pas,dès que je remplace une image,le mur en question ne s'affiche plus.


<script type="text/javascript">
function mur_instance( tb,repertoire, tps ){

var ob=Object.create(k_mur);

ob.nombre=6;
ob.nb_hauteur=3;
ob.angle_max=Math.PI/3;
ob.marge=4;
ob.chemin="image/";
ob. tbmage=['b(1).jpg','b(2).jpg','b(3).jpg','b(4).jpg','b(5).jpg','b(6).jpg','b(7).jpg','b(8).jpg','b(9).jpg','b(10).jpg','b(11).jpg','b(12).jpg','b(13).jpg','b(14).jpg','b(15).jpg']
ob.init_image();
}


function que_faire(e){
alert(e.currentTarget.getAttribute("data-repere"))
}

window.addEventListener('load',mur_instance, false);

</script>
0
@karamel
Messages postés
1808
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 juillet 2022
144
26 janv. 2015 à 16:23
et le repertoire ou se trouves les images il est bien renseigné ?
0
davidtinew
Messages postés
7
Date d'inscription
dimanche 25 janvier 2015
Statut
Membre
Dernière intervention
28 janvier 2015

26 janv. 2015 à 22:21
oui..j'ai aussi essayer en utilisant le même repertoire et en remplacant juste quelques images mais ca n'a pas marché..
0
@karamel
Messages postés
1808
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 juillet 2022
144
27 janv. 2015 à 10:51
quelle navigateur et sa version utilise tu
0
davidtinew
Messages postés
7
Date d'inscription
dimanche 25 janvier 2015
Statut
Membre
Dernière intervention
28 janvier 2015

28 janv. 2015 à 00:57
j'utilise firefox 17.0.1
0
@karamel
Messages postés
1808
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 juillet 2022
144
Modifié par kazma le 28/01/2015 à 11:16
le probleme est du au fait que pour firefox 17 on doit uitliser le prefix moz et c'est que recement que firefox n'utilise plus de prefixe pour les transformations et c'est pareil pour chrome il faut donc remplacerdans le fichier js ces lignes

el_d.style.transform='perspective(2500px)translateX('+translation_x+'px)translateZ('+(-profondeur_r)+'px)rotateY('+(-angle_degre)+'deg)translateY('+(hauteur)+'px)';

el_g.style.transform='perspective(2500px)translateX('+-translation_x+'px)translateZ('+(-profondeur_r)+'px)rotateY('+angle_degre+'deg)translateY('+(hauteur)+'px)';



par sa

var transformation_d='perspective(2500px)translateX('+translation_x+'px)translateZ('+(-profondeur_r)+'px)rotateY('+(-angle_degre)+'deg)translateY('+(hauteur)+'px)';
    
    var transformation_g='perspective(2500px)translateX('+-translation_x+'px)translateZ('+(-profondeur_r)+'px)rotateY('+angle_degre+'deg)translateY('+(hauteur)+'px)';
        
    el_g.style.mozTransform=transformation_d
    el_g.style.webkitTransform=transformation_d
    el_d.style.transform=transformation_d
    
    el_g.style.mozTransform=transformation_g
    el_g.style.webkitTransform=transformation_g
    el_g.style.transform=transformation_g


et normalement sa devrait fonctionner

rien ne sert de courir il faut partir a point.
cours Forest cours !
0
davidtinew
Messages postés
7
Date d'inscription
dimanche 25 janvier 2015
Statut
Membre
Dernière intervention
28 janvier 2015

28 janv. 2015 à 23:03
ah oui c'etait justement ça,Nous avons réussi à present,tout marche à meveille.C'est vraiment gentil de votre part grand merci à vous Kazma et à tous les autres
0