Galerie simple. (Besoin d'un coup de pouce) [Résolu]

Signaler
Messages postés
13
Date d'inscription
dimanche 9 mai 2004
Statut
Membre
Dernière intervention
29 novembre 2012
-
Messages postés
13
Date d'inscription
dimanche 9 mai 2004
Statut
Membre
Dernière intervention
29 novembre 2012
-
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

Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
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 )
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
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...
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
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

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

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)

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

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
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
>>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
@+
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
enfin... si une seule image est visible à un instant
sinon, faut un 2ème paramètre, l'id de l'image à modifier
Messages postés
13
Date d'inscription
dimanche 9 mai 2004
Statut
Membre
Dernière intervention
29 novembre 2012

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)" ?

++
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
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.
Messages postés
13
Date d'inscription
dimanche 9 mai 2004
Statut
Membre
Dernière intervention
29 novembre 2012

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>

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

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 !