Galerie simple. (Besoin d'un coup de pouce)

Résolu
CosmicAline
Messages postés
13
Date d'inscription
dimanche 9 mai 2004
Statut
Membre
Dernière intervention
29 novembre 2012
- 27 févr. 2009 à 09:53
CosmicAline
Messages postés
13
Date d'inscription
dimanche 9 mai 2004
Statut
Membre
Dernière intervention
29 novembre 2012
- 2 mars 2009 à 23:54
Hello!

J'essais de faire une galerie simple.
Par simple je veux dire qu'il n'y a qu'une seule image d'afficher et un simple clic envoie vers une suivante. (avec éventuellement un préload de la suivante) le tout en boucle (la dernière image renvoie sur la première)
J'ai trouvé énormément de codes source, mais tous sont trop fournis, et j'ai du mal a les modifier
Sur cette galerie j'ai mis 4 catégories,
catégorie 1 = image 1 a 5
catégorie 2 = image 6 a 10
catégorie 3 = image 11 a 15
catégorie 4 = image 16 a 20
Est il possible qu'en cliquant dans le menu sur la catégorie 2 la galerie commence a l'image 6 puis suive sont cours jusqu'a la dernière image (qui renvoie ensuite vers la première) ???

j'ai mis une capture de ma maquette a cette adresse
http://www.hiboox.fr/go/images/informatique/menusite,44231683e9829a9271b5b84b800cb294.jpg.html

DOnc voilà, si quelqu'un a une idée, ou du moins est déja tomber sur qq chose qui y ressemble...
Ca serait le bienvenue!!

++

12 réponses

Bul3
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
13
27 févr. 2009 à 11:49
ah ?
donc on commence à 6 on va jusqu'à 20, puis on recommence à 1 ?
curieux, mais bon...

si tu appelles tes images 1.jpg,2.jpg.... 20.jpg
au click sur le bouton suivant :
"il suffit" de gérer un compteur et de changer le src
par le résulat du calcul+".jpg"

par exemple avec les images 0.jpg à 4.jpg

   

   

    <script>

        var i=document.getElementById("i");

        function trait()

        {   var tmp=i.alt;

            tmp++;

            i.alt=tmp;

            i.src=Math.floor(i.alt%5)+".jpg";

        }

    </script>

tu adapteras pour de 6 à 20 puis 1, ou 11 à 20 puis 1....

"il suffit" d'initialiser le alt.

( j'ai mis le compteur dans le alt, on peut utiliser une variable globale )
3
Bul3
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
13
2 mars 2009 à 07:20
1° tu ajoutes un alt à la balise et tu ne gères pas ce paramètre dans la fonction !
2° un va recharger la page

....
function appel5()
{    i.alt='5';
     trait();
}

ou pas loin...
3
Bul3
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
13
27 févr. 2009 à 11:01
bonjour,
>>Est il possible qu'en cliquant dans le menu sur la catégorie 2
>>la galerie commence a l'image 6 puis suive sont cours jusqu'a
>>la dernière image (qui renvoie ensuite vers la première) ???
euh... oui ?
encore faut-il :
savoir ce qu'est le menu de la catégorie 2
connaitre le nom de l'image 6, de la 7...
et si la dernière image c'est la 10 ou la 20

>>avec éventuellement un préload de la suivante
très souvent nuisible, mais ici ce serait
simplement totalement inutile

@+
0
CosmicAline
Messages postés
13
Date d'inscription
dimanche 9 mai 2004
Statut
Membre
Dernière intervention
29 novembre 2012

27 févr. 2009 à 11:08
savoir ce qu'est le menu de la catégorie 2 
=> catégorie2 ca sera images/dessin un truc comme ca, le nom je ne suis pas fixée
connaitre le nom de l'image 6, de la 7...
=> les noms d'images seront genre 6.jpg ou 7.jpg  (il n'apparaitrons nul part)
et si la dernière image c'est la 10 ou la 20 => la dernière est 20 et redirige vers  la première (20.jpg => 1.jpg)

++
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Bul3
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
13
27 févr. 2009 à 11:53
i.src=(i.alt%5)+".jpg"; Math.floor inutile je pense ( donc j'essuie et pas que la vaisselle )
0
CosmicAline
Messages postés
13
Date d'inscription
dimanche 9 mai 2004
Statut
Membre
Dernière intervention
29 novembre 2012

27 févr. 2009 à 16:45
ok ! super, je vais faire comme ça.
bon par contre je crois que je devrais faire une iframe pour les catégorie, vu que le code devra être différent.
(si la personne sarrette a l'image 3.jpg de la catégorie 1, et qu'il clic sur catégorie2 forcément il faudra générer un code qui charge de 6 a 10 par exemple)
puis pour passe de la 20 a la 1 je trouverais bien comment changer ca.

en tout cas, merci, c'est super !

la biz
0
Bul3
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
13
27 févr. 2009 à 16:53
>>je devrais faire une iframe pour les catégorie, vu que le code devra être différent
bah...
à l'appel met quel n° où commencer : trait(1) ou trait(6) ....
dans la fonction met un paramètre   trait(debut)
et commence par initialiser alt ou la variable compteur à cette valeur
@+
0
Bul3
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
13
27 févr. 2009 à 16:54
enfin... si une seule image est visible à un instant
sinon, faut un 2ème paramètre, l'id de l'image à modifier
0
CosmicAline
Messages postés
13
Date d'inscription
dimanche 9 mai 2004
Statut
Membre
Dernière intervention
29 novembre 2012

27 févr. 2009 à 18:04
Une seul image est visible a la fois.
pour initialiser la variable compteur j'ai bien compris, pas de soucis.
par contre je ne comprend pas ce que tu veux dire par "à l'appel met quel n° où commencer : trait(1) ou trait(6)" ?

++
0
Bul3
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
13
28 févr. 2009 à 09:47
dans l'exemple mis, ça commence à 0.
tu voudrais pouvoir commencer à 1, à 6, à 11, à 16,
 tu as donc obligatoirement 4 appels à la fonction,
donc donne la valeur de départ à l'appel 1,6,11 ou 16
pour commencer là où tu veux,  et initialise le alt ou
le compteur à cette valeur.
0
CosmicAline
Messages postés
13
Date d'inscription
dimanche 9 mai 2004
Statut
Membre
Dernière intervention
29 novembre 2012

1 mars 2009 à 20:51
Salut !!
le code marche très bien !
en fait j'ai intégré le onclick a l'image ca donne ce qui est en dessous.
enssuite j'ai ajouté un lien externe pour passer de la 1er image a l'image 5 directement mais ca ne marche pas, ais-je mal initialisé le alt ?

Catégorie 2

   
    <script>
        var i=document.getElementById("i");
        function trait()
        {   var tmp=i.alt;
            tmp++;
            i.alt=tmp;
            i.src=Math.floor(i.alt%12)+".jpg";
        }
    </script>

++
0
CosmicAline
Messages postés
13
Date d'inscription
dimanche 9 mai 2004
Statut
Membre
Dernière intervention
29 novembre 2012

2 mars 2009 à 23:54
Salut !
Génial !
Voici ce que j'ai utilisé comme code pour tester.

[javascript:void(appel5()); aller directement a l'image 6]
<script>
function appel5()
{    i.alt='5';
     trait();
}
</script>

[javascript:void(appel7()); aller directement a l'image 8]
<script>
function appel7()
{    i.alt='7';
     trait();
}
</script>

   
    <script>
        var i=document.getElementById("i");
        function trait()
        {   var tmp=i.alt;
            tmp++;
            i.alt=tmp;
            i.src=Math.floor(i.alt%11)+".jpg";
        }
    </script>

après la dernière image, la première reprise, donc j'ai bien des boucles.
sous FireFox cela fonctionne très bien, les images se chargent immédiatement.
sous IE je suis obligée de cliquer plusieurs fois (2 en fait) ou d'attente que le commentaire s'affiche sur l'image, ce qui n'est pas très sexy.
Voici ce que ca donne:

http://www.hiboox.fr/go/images/informatique/123,a18a78c8e1d2e978062d32c7939dbe29.jpg.html

Je vais chercher de quoi masquer tout ca :)

Encore merci !
0