Je dois commander chacun des éléments de la galerie par ordre alphabétique. Chaque élément aurait une image et un titre.

Screenshot of the working code

Le code de la galerie:

<section id="content">
<div class="main">
   <div class="container_24">
       <div class="padding-1">
          <div class="wrapper">
              <article class="grid_24">
                  <h4 class="prev-indent-bot">Piante da interno</h4>
                           <div class="wrapper">
                               <div class="col-3 spacing-3">
                                    <div class="border">
                                        <a class="lightbox-image" href="images/Interno/Phalaenopsis_big.jpg" data-gal="prettyPhoto[gallery2]"><img src="images/Interno/Phalaenopsis_small.jpg" width="224" height="208" alt=""></a>
                                    </div>
                                    <div class="bg-title">
                                        <div class="box-padding1">
                                            <h5>Phalaenopsis</h5>
                                        </div>
                                    </div>
                               </div>
                               <div class="col-3 spacing-3">
                                    <div class="border">
                                        <a class="lightbox-image" href="images/Interno/Capelvenere_big.jpg" data-gal="prettyPhoto[gallery2]"><img src="images/Interno/Capelvenere_small.jpg" width="224" height="208" alt=""></a>
                                    </div>
                                    <div class="bg-title">
                                        <div class="box-padding1">
                                            <h5>Capelvenere</h5>
                                        </div>
                                    </div>
                               </div>
                               <div class="col-3 spacing-3">
                                    <div class="border">
                                        <a class="lightbox-image" href="images/Interno/Kalanchoe_big.jpg" data-gal="prettyPhoto[gallery2]"><img src="images/Interno/Kalanchoe_small.jpg" width="224" height="208" alt=""></a>
                                    </div>
                                    <div class="bg-title">
                                        <div class="box-padding1">
                                            <h5>Kalanchoe</h5>
                                        </div>
                                    </div>
                               </div>
                               <div class="col-3">
                                    <div class="border">
                                        <a class="lightbox-image" href="images/Interno/Nertera_big.jpg" data-gal="prettyPhoto[gallery2]"><img src="images/Interno/Nertera_small.jpg" width="224" height="208" alt=""></a>
                                    </div>
                                    <div class="bg-title">
                                        <div class="box-padding1">
                                            <h5>Nertera</h5>
                                        </div>
                                    </div>
                               </div>
                           </div>
                        </article>
                    </div>
                </div>
            </div>
        </div>
    </section>

Existe-t-il une solution simple utilisant javascript ou html?

P.S. Désolé pour mon anglais.

2
Po1s0n 17 janv. 2017 à 00:01

2 réponses

Meilleure réponse

Voici une version que j'ai testée sur le site que vous avez lié:

var articles = $('article.grid_24');
articles.each((art_idx, el)=>{
    var art = $(el);
    var boxes = art.find('.wrapper .col-3'); //Get the boxes that have the image and name

    boxes.removeClass('spacing-3'); //Trim out this, since we don't know if any given box will have this after resorting
    boxes.detach(); //Remove the entries without losing their JS attributes
    boxes.sort((a,b)=>{return ($(b).find('h5').text() < $(a).find('h5').text())?1:-1;}); //Sort by the name in the h5 title

    var wrappers = art.find('.wrapper'); //Get the rows
    var wrapper_idx = -1; //At the very first element, this will be incremented to index 0
    boxes.each((idx, box)=>{ //For each content box
        if(idx % 4 === 0) wrapper_idx++; //For each fourth content box, move to the next row
        if((idx+1) % 4) $(box).addClass('spacing-3'); //If it's not the fourth box, give it back this class
        $(box).appendTo($(wrappers[wrapper_idx])); //Add the content box into the current row
    });
});

Edit: J'ai changé cela pour garder les différents éléments triés uniquement entre leurs parents article respectifs.

Cela peut être inséré sous forme de bloc Javascript après le chargement de toutes les images. Je suis d'accord avec Josh Miller sur le fait que, idéalement, ce tri serait en fait effectué avant le rendu du contenu, mais le code ci-dessus devrait fonctionner si le contenu est déjà affiché.

1
Harris 18 janv. 2017 à 16:54

Ajoutez ce qui suit après votre HTML (en supposant que vous avez jQuery, ce que vous semblez faire dans votre nouveau lien):

  <script>
  // Create a sorting function
  function sortem(a, b){
    var aName = a.title.toLowerCase();
    var bName = b.title.toLowerCase();
    return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0));
  }

  // Perform content sort
  function sortContent() {
    var divArr = $(".wrapper.p4 > .col-3")
    var content = [];

    // Clear your content
    $('.wrapper.p4').remove();

    // Put content into an easily managed array
    divArr.each(function(idx,el){
      content.push({
        title: $(el).find('h5').text(),
        html: $(el)
      });
    });

    // Call the sorting function
    content.sort(sortem);

    // Re-render the content
    grid = $("<div></div>");
    for(var i=0;i<content.length;i++){

      if((i+1)%4===0){
        h = content[i].html.removeClass('spacing-3');
      }else{
        h = content[i].html.addClass('spacing-3');
      }

      if(i%4===0){
        grid.append("<div class='wrapper p4'></div>");
      }
      grid.find(".wrapper.p4").last().append(h);
    }

    $('.wrapper article.grid_24 .box-2').after(grid);
  }

  $(document).ready(function(){
    sortContent();
  });
  </script>

Je voudrais ajouter que ce n'est pas un problème qui est idéalement résolu par JavaScript, mais plutôt par votre requête de base de données (en supposant qu'il y en ait une). Plutôt que de trier côté client, il serait plus judicieux de trier pendant la demande de base de données pour éliminer la surcharge de réorganisation sur le front-end.

SELECT title, image
FROM product_table
ORDER BY title ASC

Ce serait beaucoup plus efficace que le tri avec JavaScript - d'autant plus que la valeur que vous souhaitez trier est profondément imbriquée dans le HTML.

1
Josh Miller 17 janv. 2017 à 17:47