Sujet : galerie slide

Re : galerie slide

Salut,

Tu as l'air bien parti dans tes recherches, donc je ne vais pas te donner une solution toute faite, je vais plutôt t'orienter dans tes recherches:

Regarde du coté des fonctions .next() et .prev() de jQuery smile

Re : galerie slide

hello, merci pour ta réponse MaitreKabba.

Alors effectivement j'ai regarder ces 2 fonctions. mais je pense que mon souvi ne vient pas de la, je pense plûtot qu'il vient que quand je clic sur ma vignette pour qu'il affiche la photo en plus grand, je n'ai pas les autres images en dessous, donc je ne sais pas faire défiler les images comme j'aimerais. j'ai encore chercher un bonne partie de la soirée d'hier ne trouve pas de solution.

si vraiment tu en as une elle serait la bienvenue.

Merci a toi et bonne journée

4

Re : galerie slide

Bonjour,

En espérant ne pas trop me tromper en te répondant à froid le matin et n'ayant pas fait d'effect/animation et jquery depuis un petit moment.
Plusieurs solutions sont possible, tout dépend du rendu que tu souhaite.

Tu peut utiliser next et prev pour passer d'un élément à l'autre. Donc tu sais sur qu'elle image tu es actuellement (dans ton div principal) tu fais un next tu récupère le src et ensuite tu peux modifier image de ton slider.

Bon sur le coup, ca va changer sans effect. Si tu souhaite un slide ou un fade regarde autour de la fonction animate.

Une autre méthode, il faudrait que tu es dans ton slider toutes tes images à touche touche avec un petit overflow, ce qui te permettait de faire un slide simple.

Voila, j'espère t'avoir éclairé, et même si j'ai dis n'importe quoi, ça pourrait peut-être te donner des pistes tongue

Re : galerie slide

Hello, merci pour ta réponse,

le problème que j'ai pour le moment, c'est que justement je ne sais pas comment aller rechercher les image qui défile avec le next() ou le prev().

car quand je clic sur ma vignette, je l'affiche ds un nouveau div qui cache tout le reste. et c'est la que je bloque vu que je n'ai qu'une image afficher et que les autres images ne sont pas la.

enfin je sais pas si je me fais bien comprendre. :s

6

Re : galerie slide

Sisi, j'ai bien compris, tu connais identifiant de ton div "principal" celui ou tu as toute tes images. Ton div "miniGalerie" ou tu as tes évènements ton carousel. Ben tu enregistre dans ton plugin ou plus simplement en ajoutant une class (active/etc..), l'image "actuellement" affiché sur le slider.

Tu pourra ainsi savoir quelle image est affiché, et pouvoir faire un next pour récupérer la suivante. Il te faudra peut etre remonter de quelque "div" pour pouvoir faire un next et redescendre jusqu'a ton img.

En espérant te bloquer, sans te donner la solution exact smile

Cdlt,
Lochar

Re : galerie slide

Merci pour l'info smile

je vais étudier ca, et te tiendrai au courant.

Bonne journée a toi

Re : galerie slide

Bon ben suis perdu, comment fait on pour ajouter une class (active). j'ai beau chercher et sur les exemples que je trouve, je ne comprend pas.

je crois que ce qui me perturbe c'est que je dois aller rechercher l'image suivante dans mon div miniGalerie alors que mon image actuelle se trouve dans mon div imageBig sad

9

Re : galerie slide

10

Re : galerie slide

Encore merci pour ta réponse,

En fait je cherche depuis hier après midi, mais je me décourage pas. j'aimerais bien comprendre. donc je fais encore chercher avec les explication que tu de me donné smile

En tout cas merci bcp pour ton aide, c'est vraiment gentil

11 Dernière modification par gabi1202 (16-02-2012 15:04:24)

Re : galerie slide

Bon je suis complétement à coté de la plaque.

si tu pouvais juste me montrer un code en m’expliquant exactement ce que tu fais pour que je puisse comprendre, ça m'aiderais je pense.

Merci à toi

12

Re : galerie slide

HELP-me tongue

j'ai passé ma soirée a essayer de comprendre comment children() et parents() fonctionnais. effectivement en les utilisants ds la condole pour tester je vois bien l’arborescence mais je ne comprend après comment aller les rechercher?

Donc je deviens un peux fou de resté bloqué lol, le pire c'est que je suis sur qu'une fois que tu as compris ca deviens simple. Mais bon faut comprendre ^^.

Donc je vous appel à l'aide afin de me sortir de cette impasse.

Gabi

13 Dernière modification par Lochar (17-02-2012 10:39:15)

Re : galerie slide

Ah scuse, j'avais commencé à te répondre hier, mais le boulot est arrivé et j'ai pas fini.
Du coup, je t'ai refait un bout de code, mais je me suis dépéché, il se peux qu'il manque des fermeture de parenthèse ou points virgules, désolé je repasserai entre midi deux. Mais ça doit pouvoir te donner un peu la démarche.

<div id="miniGalerie">
    <div>
        <img class="img" src="toto-1.jpg"/>
    </div>
    <div>
        <img class="img" src="toto-2.jpg"/>
    </div>
    <div>
        <img class="img" src="toto-3.jpg"/>
    </div>
</div>

<div id="imageBig">
    <img src="">
    <div id="prev"></div>
    <div id="next"></div>
</div>

<script>
    $('#miniGalerie.img').click(function() {
        $('#slider img').attr('src', $(this).attr('src'));
        $(this).addClass('active');
    });
    $('#next').click(function() {
        var img_active = $('#miniGalerie .active');
        var div_parent = $(img_active).parent();
        var next_div = $(div_parent).next();
        var next_img = $('.img', next_div);
        
        $(img_active).removeClass('active');
        $('#imageBig img').attr('src', $(next_img).attr('src'));
        $(next_img).addClass('active');
    });
</script>

14

Re : galerie slide

Merci a toi, je vais essayer de comprendre ton code.  smile

Encore merci de prendre le temps de m'aidé

15

Re : galerie slide

Donc lorsque je clic sur ma vignette nomé .miniDiapo

j'ajoute la classe a la ligne que j'ai mi avec un commentaire si dessou ?

$('.miniDiapo').click(function() {
    
    $('#miniGalerie').caroufredsel({ //Arret du carroussel miniDiapo lors du click sur .miniDiapo
            width : 1024,
            auto : false
    });
    
    $('#imageBig').fadeTo(1000,1);
    
    $('#imageBig').html('<div class="divImageBig"><img src="'+ $(this).attr('src') +'" alt="" /></div>');
    
    $('#imageBig .divImageBig img').addClass('active'); //-------> Ajouter cette classe <---------
});

ensuite lors du click sur ma fleche nommée .suivant

j'ajoute se script

.
$('.suivant').click(function(){

    var img_active = $('#imageBig .active');
        var div_parent = $(img_active).parent();
        var next_div = $(div_parent).next();
        var next_img = $('.miniDiapo', next_div);
        
        $(img_active).removeClass('active');
        $('#imageBig img').attr('src', $(next_img).attr('src'));
        $(next_img).addClass('active');
            
});

c'est bien ca?

16 Dernière modification par Lochar (17-02-2012 10:47:45)

Re : galerie slide

Ah excuse moi, je me suis tromper avec le nom des divs. J'ai rectifié le tire sur mon précédent message.

$('#imageBig .divImageBig img').addClass('active');
Ce n'est pas dans "imageBig " mais "miniGalerie", qu'il faut ajouter la class.

17

Re : galerie slide

Bon je pense que pour un premier script j'ai voul aller un peux trop loin.

La je suis plus que perdu sad

je pense que je vais abandonné la.

ça m’embête un peux car j'étais presque au bout, mais je me décourage, presque 3jours que je suis sur se petit script et complétement perdu.

Dommage ça aurait pu donné pas mal, mais faut que je me rend a l'évidence, il aurait fallu que je commence par quelque chose de plus petit.

En tous cas merci de m'avoir aidé, je vais pas t’embêter plus longtemps.

18

Re : galerie slide

Bon en essayant de reprendre exactement de code, ça donne ça.

$('.miniDiapo').click(function() {
    
    ...
    
    $(this).addClass('active'); //-------> Ajouter cette classe <---------
    
    ...
});

$('.suivant').click(function(){

    var img_active = $('.miniDiapo.active');
    var div_parent = $(img_active).parent().parent();
    var next_div = $(div_parent).next();
    var next_img = $('.miniDiapo', next_div);
    
    $(img_active).removeClass('active');
    $('#imageBig img').attr('src', $(next_img).attr('src'));
    $(next_img).addClass('active');
            
});

Je n'ai pas récupéré ta page, tes scripts etc pour tester. Mais je suis aller voir dans le code.
Je te donnais le cheminement par rapport à mon exemple, il fallait l'adapter un peu à ton code.
J'espère qu'avec celui ci tout marchera bien. J'ai essayé de reprendre ton architecture. Si ça ne marche toujours pas ce soir, je testerai et débuggerai bien chez moi, si je t'ai mal aiguiller.

Et puis ne te démoralise pas, c'est pas mal de t'avoir trouvé un sujet pour apprendre jquery, c'est comme cela que l'on apprend le mieux. Je suis sur que tu as appris pas mal de truc déjà, et dans quelques temps, quand tu reprendras ce code, tu verras que tu comprendras ou était ton blocage facilement. En attendant, la communauté est la pour te débloquer smile

Lochar,

19

Re : galerie slide

Merci c'est vraiment sympa,

voila ce que ca donne pour le moment, on doit pas être loin du bon resultat.

du ma remotivé la, je vais continuer a chercher smile

20

Re : galerie slide

$('#imageBig img').attr('src', $(next_img).attr('src'));

21

Re : galerie slide

Re,
Tu fait beaucoup de chose dans ton $('.miniDiapo').click(...), regarde de ce côté ci, certaines doivent être appelé également au next à tout les coups.
Ensuite dans $('.suivant').click(..) quand tu fais le next et que tu récupère le next_div, il faut tester si il n'est pas null. Si il est null, tu es arrivé au bout. Donc il va falloir aller chercher le premier élément de la liste. Soit :

$(div_parent).parent().first()

On a le div parent de l'image actuellement affiché, on récupère son parent, qui correspond au container avec la liste de tes images. Et ensuite on peut récupérer le premier, et ainsi repartir à zero.
Inversement à .last()

Bonne chance.

22

Re : galerie slide

ok je vais déjà essayer de regarder pour le redimensionnement des images, je verrai la suite après.

Encore merci pour tout.

23

Re : galerie slide

Re,

Est-ce normale que je doive refaire toutes mes fonctions, qui se trouve dans

$('.miniDiapo').click(function() {

pour le redimensionnement d'image et les remettre dans

$(.suivant').click

si c'est le cas, je vais devoir les refaire aussi dans

$('.precedent').click

???

c'est pas possible quand même lol, il doit avoir une autre solution ou il fallait que je travail autrement?

24

Re : galerie slide

Hello,

Je ne peux te dire si c'est normal, je n'ai pas regarder exactement ce que tu fais. Mais si tu redimensionne pour quelle ne soit pas trop grande et que tu la re center, je dirais oui.
Mais tu peux mettre tous ça dans une fonction, que tu pourrais appeler sur tes 3 évènements. Tu n'aurais pas à dupliquer plusieurs fois les mêmes lignes.

N'essai pas d'avoir un truc parfais, essai de comprendre ce que tu fais et pourquoi. Ce que tu fais est très bien pour apprendre, c'est un ayant des mini-projet comme celui-ci que tu apprendras le plus. Le meilleur conseille que je puisse te donner (ce n'est pas forcément l'avis de tous), c'est de ne pas vouloir atteindre la perfection avec ton premier code/plugin ou autre. Mais de te retrouver un mini-projet comme celui-ci et de te fixer un objectif.

Ta galerie actuelle, on pourrait lui coder plein d'autres trucs, mais à mon avis, il te sera beaucoup plus profitable de passer sur un autre projet et d'y revenir plus tard à ta galerie. Quite à la refaire entièrement avec ce que tu auras appris de nouveau, et en ajoutant d'autres fonctionnalités.

Enfin moi c'est comme ça que je fonctionne en général. J'ai beaucoup appris en auto apprentissage, et c'est en refaisant 2-3 fois la même chose, que j'apprenais de plus en plus. Mais c'était jamais la même chose et forcément je faisait de mieux en mieux et de plus en plus vite.
Mais il faut arriver avoir un autre projet ou 2 entre les 2, pour apprendre de nouvelle chose, et avoir une vision différentes. Et c'est pas forcément évident de se dire qu'on fait 3 fois la même chose.

Bonne chance à toi pour la suite,
Cdlt, Lochar,

25

Re : galerie slide

Merci pour tes encouragement et tes explications smile