Discussion :

[tontonlogic]

Bonjour,

Sur une de mes pages, un portfolio de photographies d'art quelque peu déshabillées : https://www.audacieuse-galerie.ch/ph...age/1#id_tab=2
... j'ai une navigation sur les photographies à droite qui fonctionne bien, mais qui chagrine mes produits en pied de page. Mes produits en pied de page s'affichent mal à l'ouverture. Les boutons "Grille ou Liste" corrigent l'affichage et ajoute quelques lignes et class nécessaires. Lors de l'ouverture de la page, je n'arrive pas à appeler la fonction javascript qui permet l'affichage grille ou liste. J'ai tenté d'ajouter le code ci-dessous à même le body, mais la syntaxe exacte doit être fausse.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
	<script>
			$(document).ready( function bindGrid { var view = 'list' });
 
...

Pouvez-vous m'aider pour cet affichage ?

je vous remercie.

[SpaceFrog]

Je suppose que binGrid est un plugin ???
je suppose également que pour l'initialiser il faut lui passer un json de paramètres ?

Peut être peut être plutôt un truc du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(document).ready( bindGrid({ view: 'list' }) );

[tontonlogic]

Merci pour votre réponse.


Bingrid est une fonction de mon fichier global.js. Elle est appelée par les boutons grille et liste en milieu de page, me semble-t-il. On retrouve un event avec l'inspecteur sur ces boutons.
J'ai ajouté la ligne en question autant sur le "on clic" des images de droite, autant sur le document ready. bindGrid({ view: 'list' }
Rien ne change. Dès que l'on clique sur les images de droite, cela bug l'affichage des photos en pied de page.

[SpaceFrog]

Si ça marche au click sur un boutn, essaye de faire un trigger du click sur le bouton sur le ready

[tontonlogic]

Merci de votre retour,

C'est un bug tordu. On dirait que la fonction est parfois bien appelée, mais qu'elle agit sur une première liste des œuvres uniquement.
La fonction ne complète pas l'affichage des autres listes des œuvres cachées. (Il y a un Tab actifs et d'autres cachés.) Lorsque je navigue une première fois en mode liste tout va bien. La fonction est donc bien appelée.
Si j'appuie sur grille, la liste est bien changée en grille. Mais si je change de série (clic sur une image de droite), l'affichage en bas plante et les images s'empilent.
Faut aller sur la page pour essayer. https://www.audacieuse-galerie.ch/ph...age/1#id_tab=2

Peut-être la fonction est limitée à un ID et s'arrête au premier contenu trouvé, … je ne sais pas trop.
Votre avis?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
function bindGrid() {
  var storage = false;
  if (typeof(getStorageAvailable) !== 'undefined') {
    storage = getStorageAvailable();
  }
 
  if (!storage) {
    return;
  }
 
  var view = $.totalStorage('display');
 
  if (!view && (typeof displayList != 'undefined') && displayList) {
    view = 'list';
  }
 
  if (view && view != 'grid') {
    display(view);
  } else {
    $('.display').find('li#grid').addClass('selected');
  }
 
  $(document).on('click', '#grid, #list', function (e) {
    e.preventDefault();
    if (!$(this).hasClass('selected')) {
      display($(this).attr('id'));
    }
  });
}
 
function display(view) {
  'use strict';
  if (view == 'list') {
    $('ul.product_list').removeClass('grid').addClass('list');
    $('.product_list > li:visible').removeAttr('class').removeAttr('style').addClass('ajax_block_product');
    $('.product_list > li:visible').each(function (index, element) {
      $(element).html('' +
        '<div class="product-container" itemscope="" itemtype="https://schema.org/Product">' +
        '<div class="row">' +
        '<div class="left-block col-xs-3">' +
        $(element).find('.product-image-container').wrap('<div>').parent().html() +
        '</div>' +
        '<div class="center-block col-xs-4">' +
        $(element).find('h5').wrap('<div>').parent().html() +
        $(element).find('.product-flags').wrap('<div>').parent().html() +
        $(element).find('.content_price').wrap('<div>').parent().html() +
        $(element).find('.product-desc').wrap('<div>').parent().html() +
        '</div>' +
        '<div class="right-block col-xs-5">' +
        $(element).find('.color-list-container').wrap('<div>').parent().html() +
        $(element).find('.button-container').wrap('<div>').parent().html() +
        $(element).find('.functional-buttons').wrap('<div>').parent().html() +
        '</div>' +
        '</div>' +
        '</div>');
    });
    afterRender('list');
  } else {
    $('ul.product_list').removeClass('list').addClass('grid');
    $('.product_list > li:visible').removeAttr('class').removeAttr('style').addClass('ajax_block_product');
    $('.product_list > li:visible').each(function (index, element) {
      $(element).html('' +
        '<div class="product-container" itemscope="" itemtype="https://schema.org/Product">' +
        '<div class="left-block">' +
        $(element).find('.product-image-container').wrap('<div>').parent().html() +
        $(element).find('.functional-buttons').wrap('<div>').parent().html() +
        '</div>' +
        '<div class="right-block">' +
        $(element).find('h5').wrap('<div>').parent().html() +
        $(element).find('.product-desc').wrap('<div>').parent().html() +
        $(element).find('.content_price').wrap('<div>').parent().html() +
        $(element).find('.button-container').wrap('<div>').parent().html() +
        $(element).find('.color-list-container').wrap('<div>').parent().html() +
        $(element).find('.product-flags').wrap('<div>').parent().html() +
        '</div>' +
        '</div>');
    });
    afterRender('grid');
  }
 
  function afterRender(type) {
    var $display = $('.display');
 
    if (type == 'grid') {
      $display.find('li#grid').addClass('selected');
      $display.find('li#list').removeAttr('class');
      $.totalStorage('display', 'grid');
    } else if (type == 'list') {
      $display.find('li#list').addClass('selected');
      $display.find('li#grid').removeAttr('class');
      $.totalStorage('display', 'list');
    }
 
    listTabsAnimate('ul.product_list>li');
 
    if ($('.product_list li div.wishlist').length) {
      WishlistButton();
    }
 
    adaptiveSizeGrid();
  }
}

[tontonlogic]

Bonjour,

Je confirme, avec les modifications, l'appel de la fonction fonctionne bien en mode liste, mais pas en mode grille. Vu que les deux affichages sont différents, je pense que c'est au onclic sur les séries que cela doit se jouer. Il y a cette fonction qui conserve le mode grille ou liste. Comment puis-je l'appeler ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  function bindGrid() {
  var storage = false;
  if (typeof(getStorageAvailable) !== 'undefined') {
    storage = getStorageAvailable();
  }
 
  if (!storage) {
    return;
  }
 
  var view = $.totalStorage('display');
 
  if (!view && (typeof displayList != 'undefined') && displayList) {
    view = 'list';
  }

Merci de vos retours

[tontonlogic]

le bug a été résolu par un appel commun aux grille et liste.Merci