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