Bonjour,
Pour créer une galerie photos j'ai utilisé le tuto "Galerie photo avec JavaScript". J'ai fait une nouvelle mise en page, pis intégré le code javascript. Jusqu'à maintenant, tout fonctionne sous FireFox... mais pas sur IE7.

J'aurais un tas d'autre questions à posé concernant ce code, mais je vais d'abord commencer par ce problème.

Je tiens à spécifier, que je suis plus que débutante en ce domaine et très loin d'être programmeuse. Et pour moi, tous les infos au sujet de javascript et autres codages, sont très lourd à assimiler... Soyez indulgent donc! Smiley confused

Merci!
Bonjour et bienvenue sur le forum,

juliesunset a écrit :
mais je vais d'abord commencer par ce problème

Je te laisse donc exposer le problème, ce que tu n'as pas fait dans ton message introductif.
juliesunset a écrit :

Jusqu'à maintenant, tout fonctionne sous FireFox... mais pas sur IE7.


Smiley cligne
Modifié par juliesunset (25 Jun 2009 - 22:03)
Hello juliesunset, Smiley smile

ben oui mais comme le tuto tel qu'il est présenté fonctionne sur IE7 on peut en conclure que ce sont tes propres modifications on ton intégration du code qui posent problème. Donc il faudrait voir celui-ci pour pouvoir t'aider (l'idéal étant un lien vers une page en ligne).
Bon y'a fallu que je mette tout ça en ligne je travaillais encore à l'interne. Voilà donc la page en question:
http://www.ggtelecom.ca/2010/FR/PhotosVideosIRB-2009_FR02.html

Edit: Je viens de me rendre compte que même dans FireFox , ça ne fonctionne pas une fois en ligne. Lorsque je clic sur la photo en miniature, les photos pleinne grandeur va plutôt s'afficher dans une nouvelle fenêtre sur fond vide... même chose pour IE7
Modifié par juliesunset (25 Jun 2009 - 22:59)
juliesunset a écrit :
Edit: Je viens de me rendre compte que même dans FireFox , ça ne fonctionne pas une fois en ligne.
Ce qui est normal puisque le fichier script.js n'est pas trouvé. Smiley cligne

D'autre part c'est toujours un bon réflexe de commencer par corriger les erreurs de validation.


Edit: j'ai déplacé ton sujet car il existe un salon spécialement dédié aux tutoriels.
Modifié par Heyoan (25 Jun 2009 - 23:48)
Smiley rolleyes me suis rendu compte de l'erreur en partant du boulot hier soir! Smiley lol C'est corrigé maintenant. ça fonctionne dans Firefox, mais toujours pas sous IE7

Edit:
Après pas mal de zigonnage et passant par le validator, j'ai fini par réussir à faire fonctionné le tout. Je peux donc passé à ma seconde question.

Dans la page je ne peux mettre que 16 miniatures... mais l'album contient 18 photos en tout (J'ai même des albums composé d'une cinquantaine de photos)... a-t-il possibilité de créer une seconde série de miniature à partir du code? Vous verrez dans la page avec les graphiques, c'est assé explicite.
Modifié par juliesunset (26 Jun 2009 - 15:52)
juliesunset a écrit :
Smiley rolleyes me suis rendu compte de l'erreur en partant du boulot hier soir! Smiley lol C'est corrigé maintenant. ça fonctionne dans Firefox, mais toujours pas sous IE7

Edit:
Après pas mal de zigonnage et passant par le validator, j'ai fini par réussir à faire fonctionné le tout. Je peux donc passé à ma seconde question.

Dans la page je ne peux mettre que 16 miniatures... mais l'album contient 18 photos en tout (J'ai même des albums composé d'une cinquantaine de photos)... a-t-il possibilité de créer une seconde série de miniature à partir du code? Vous verrez dans la page avec les graphiques, c'est assé explicite.

Modifié par juliesunset (26 Jun 2009 - 15:57)
juliesunset a écrit :
Dans la page je ne peux mettre que 16 miniatures... mais l'album contient 18 photos en tout (J'ai même des albums composé d'une cinquantaine de photos)... a-t-il possibilité de créer une seconde série de miniature à partir du code?

Le code JavaScript de la galerie ne gère pas ça, et ça serait assez compliqué à mettre en place. En général, les questions de pagination se gèrent côté serveur.
autrement dit, faudrait faire un autre code... ail c pas gagné! j'avais essayer l'autre tuto sur le même sujet, mais j'ai jamais réussi à faire fonctionné... décidément je n'arrive pas à comprendre.

a écrit :
En général, les questions de pagination se gèrent côté serveur.

Qu'est ce que tu veux dire par là exactement?
juliesunset a écrit :
En général, les questions de pagination se gèrent côté serveur.

Qu'est ce que tu veux dire par là exactement?
Ça veut dire par exemple que tu récupères depuis une base de données une liste de 53 enregistrements, et que tu veux en afficher 20 par page au maximum (par exemple). Tu vas donc afficher uniquement les 20 premiers, et créer une série de liens un peu comme dans les pages de résultat de Google (liens de pagination après les résultats). Ces liens pointent vers la même page ou le même script, et rajoutent un paramètre qui permet au script de savoir que l'on veut afficher la page 2 par exemple.
J'ai pris un moment pour réfléchir à ça...

Le but du nouveau site que je conçois présentement est de réduire le nombre de pages, de façon à ce que ce sois plus facilement gérable. (Je perd un temps fou à mettre à jour le site actuel de la compagnie). c'est pour ça que j'ai choisi cette façon de présenter les photos.

Faire comme tu dis, signifie que je devrais créer une nouvelle pages pour afficher les photos manquante... choses que je veux éviter précisément.

Mon autre solution serait d'arriver à comprendre l'autre tuto disponible sur le site... Et comme dit plus haut, c pas gagné. J'ai commencé par le but, c'est à dire la base du javascript, mais là je sèche.
Après pas mal de zigonnages, mon chum a réussi à modifier le code pour arrive au résultat que je cherchais (ouais... il ne m'avait pas dit qu'il pouvait faire ça! XD)

Le lien a été mis à jour:
http://www.ggtelecom.ca/2010/FR/PhotosVideosIRB-2009_FR02.html

pour ceux que ça intéresse:
// JavaScript Document
function getURLVar(urlVarName) 
{
    //divide the URL in half at the '?'
    var urlHalves = String(document.location).split('?');
    var urlVarValue = '';
    if(urlHalves[1])
    {
        //load all the name/value pairs into an array
        var urlVars = urlHalves[1].split('&');
        //loop over the list, and find the specified url variable
        for(i=0; i<=(urlVars.length); i++)
        {
            if(urlVars[i])
            {
                //load the name/value pair into an array
                var urlVarPair = urlVars[i].split('=');
                if (urlVarPair[0] && urlVarPair[0] == urlVarName) 
                {
                    //I found a variable that matches, load it's value into the return variable
                    urlVarValue = urlVarPair[1];
                }
            }
        }
    }
    return urlVarValue;   
}

function displayPics()
{
	var photos = document.getElementById('thumbs') ;
	// On récupère l'élément ayant pour id galerie_mini
	var liens = photos.getElementsByTagName('a') ;
	// On récupère dans une variable tous les liens contenu dans galerie_mini
	
	var thumbnails = photos.getElementsByTagName('img');
	
	var big_photo = document.getElementById('big_pict') ;
	// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale

	var titre_photo = document.getElementById('photo').getElementsByTagName('li')[0] ;
	// Et enfin le titre de la photo de taille normale
	
    var page = getURLVar('page');
    if(page == '')
        page = '1';
		
	var nbPhotosEl = document.getElementById('nbPhoto');
	var nbPhotos = parseInt(nbPhotosEl.title)-1;
    var nbPhotosDisp = nbPhotos - (liens.length * (page-1));
        
    //Bouton Suivant
	var navSuivant = document.getElementById('next');
	if(page <= nbPhotos/liens.length)
    	navSuivant.href = document.URL.substring(0,document.URL.lastIndexOf('.html')+5) + '?page=' + (parseInt(page)+1);
	else
		navSuivant.style.visibility = "hidden";
	
	//Bouton Precedent
	var navPrecedent = document.getElementById('prev');
	if(page > 1)
    	navPrecedent.href = document.URL.substring(0,document.URL.lastIndexOf('.html')+5) + '?page=' + (parseInt(page)-1);
	else
		navPrecedent.style.visibility = "hidden";
    
	// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
	for (var i = 0 ; i < liens.length ; i++) {
		// Au clique sur ces liens
		if(i <= nbPhotosDisp)
		{
			thumbnails[i].src = thumbnails[i].src.substring(0,thumbnails[i].src.lastIndexOf('_')+1) + ( parseInt(liens[i].id) + (parseInt(page)-1)*16 ) + '.jpg'; 
			liens[i].href = liens[i].href.substring(0,liens[i].href.lastIndexOf('_')+1) + ( parseInt(liens[i].id) + (parseInt(page)-1)*16 ) + '.jpg';
			//alert(( parseInt(liens[i].id) + (parseInt(page)-1)*16 ) + ' ' + ( parseInt(liens[i].id) + (parseInt(page)-1)*16 ));
			liens[i].onclick = function() 
			{
				big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
				big_photo.alt = this.title; // On change son titre
				titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
				return false; // Et pour finir on inhibe l'action réelle du lien
			};
		}
		else
			thumbnails[i].style.visibility = "hidden";
	}
}
window.onload = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
		
[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]

Je commence à comprendre un peu le fonctionnement... mais j'ai encore un sacré bout d'chemin à faire.

La prochaine étape est la création d'un carousel pour la présentation des produit (ouais ba... j'suis pas sortie l'auberge!) Smiley biggol
Modifié par juliesunset (30 Jun 2009 - 22:25)
bon à priori le code fonctionne bien...

Mais pour mon plus gros album (54 images), dès que je dépasse 3 pages, ça bug. Mes miniatures sont mal affiché.

parce qu'une image vaut mille mots...:
http://www.ggtelecom.ca/2010/FR/PhotosVideosIRA-2007_3mp_FR.html

À partir de la 3e page dernière images du bas à droite... cliquer dessus, ça dit tout.

le code javascript à un peu changé, je vais éditer mon message précédent.

Quelqu'un peu m'aider sur ce coup?

EDIT: Le problème est réglé... simple erreur de nomenclature... Désolé! Smiley lol
Cela dit j'ai une autre question. Certaines des mes photos devront avoir un commentaire en dessous de la photo pleine grandeur. J'utilisais le principe du titre, mais là ça fonctionne plus... comment faire fonctionné ça???
Modifié par juliesunset (30 Jun 2009 - 23:05)
Je me permet de remonter le topic, car j'ai toujours ce problème avec les titres des photos.

merci d'avance pour votre aide! Smiley smile
Bonjour Julie,
Moi aussi je débute en javascript Smiley cligne
J'ai besoin d'insérer une galerie photo au site que je fais en ce moment et j'utilise le même super tuto que toi.
Or, tt marche bien sous Firefox mais pas sous IE Smiley fache
Ma feuille CSS et page HTML sont validées par W3C donc le prbe ne vient pas de là ... quelle a été ta solution pour que ça marche sous IE ?

... et désolée, j'ai pas d'idée pour résoudre ton prbe actuel ...
Euh ben finalement j'ai changer de fonctionnement pour la galerie. J'utilise maintenant du php avec base de donné et un tout petit script javascript pour la transition des photos. De cette façon je peux affiché du texte relié à la photos affiché.

Pour ton problème, je sais vraiment pas... je n'ai pas eux ce problème entre FF et iE. Ta page a beau être valide, iE ne tenant pas vraiment compte des normes ça veut pratiquement rien dire pour lui. La solution est peut-être faire un commentaire conditionnel pour iE et d'adapter le code pour que ça fonctionne sous iE?