Affiche le diaporama à partir d'un seul nœud

J'essaie de réaliser un diaporama fonctionnel à partir d'images en un seul nœud. Les images sont téléchargées à partir du champ d'image. C'est drupal 7. J'ai créé un nouveau type de contenu et tout ce que j'ai fait maintenant est un diaporama à partir de plusieurs nœuds (avec une image dans chaque nœud). Cela fonctionne bien mais c'est trop problématique pour ajouter un nouveau nœud pour chaque image.

Dans les paramètres de champ d'image des vues, sous Paramètres de champ multiples , il y a une case à cocher pour "Afficher toutes les valeurs dans la même ligne" qui est cochée par défaut. Si vous décochez cette case, chaque image sera placée dans une nouvelle ligne et cela fonctionnera selon vos besoins. Je sais que les vues ont cette fonctionnalité depuis au moins la version 2, mais on pourrait l'appeler quelque chose de légèrement différent dans les anciennes versions.

J'aime le faire de cette façon pour les diaporamas simples, je peux réorganiser toutes les images sur un nœud / page d'édition. Mais pour les diaporamas plus complexes, comme où chaque image est liée quelque part ou contient un texte alternatif, votre meilleur pari est probablement d'utiliser un nœud par ligne.

Le module Field Slideshow est exactement ce dont vous avez besoin. Toutes les images sont contenues dans le nœud (pas de gonflement du nœud) et il utilise un cycle jquery (identique au diaporama de vues) pour produire une galerie et un diaporama dynamiques.

J'ai récemment construit un site avec des galeries simples et j'ai fini par ne pas utiliser du tout de modules de diaporama supplémentaires. Tout ce dont j'avais besoin était jQuery Cycle et un peu de javascript, ajouté à mon thème personnalisé. Ce site a un type de contenu «photo» et un vocabulaire «album» pour attribuer des photos à différents albums. Une vue crée une liste de photos filtrées par album. Dans mon thème, j'ai un fichier js qui ressemble à ceci:

(function($){

Drupal.behaviors.myAlbumSlideshow = {
  attach: function(){
    var slideshowContent = $('.view-fotoalbum.view-display-id-page_1>.view-content');

    slideshowContent.before('<div id="slideshow-prev">&lt;</div><div id="slideshow-next">&gt;</div>');

    slideshowContent.cycle({
      fx:       'scrollHorz',
      next:     '#slideshow-next',
      prev:     '#slideshow-prev',
      timeout:  0
    });

    var slideshowHeight = slideshowContent.height() + 'px';
    $('#slideshow-prev, #slideshow-next').css('lineHeight', slideshowHeight);
  }
}

})(jQuery)

Une touche de CSS le termine:

.view-fotoalbum {
  width: 710px;
  margin-right: 10px;
}

.view-fotoalbum #slideshow-prev {
  color: #808080;
  border-right: 1px solid #808080;
  cursor: pointer;
  float: left;
  line-height: 300px;
  margin-left: -40px;
  text-align: center;
  width: 30px;  
}

.view-fotoalbum #slideshow-next {
  color: #808080;
  border-left: 1px solid #808080;
  cursor: pointer;
  float: right;
  line-height: 300px;
  margin-right: -40px;
  text-align: center;
  width: 30px;
}

PS. À mon humble avis, il n'est pas toujours préférable d'avoir un seul nœud par image. Il est vrai que cette approche offre une plus grande flexibilité (par exemple, l'ajout d'une image à plusieurs diaporamas), mais pour certains utilisateurs finaux, une flexibilité inutile n'est qu'une complexité inutile.

Vous pourriez envisager d'utiliser le module Galleria . Il utilise un seul nœud et affiche les images de celui-ci sous forme de diaporama.

J'ai découvert un bon moyen d'avoir plusieurs images et plusieurs liens par image dans un seul nœud:

Ce que vous voudrez faire est de vous assurer que les champs image et lien sont définis sur illimité dans le type de contenu. Lorsque vous créez votre vue, assurez-vous également que "Afficher toutes les valeurs dans la même ligne" n'est PAS coché. Ajoutez un champ delta pour votre image et pour votre lien. Ajoutez un filtre Global: PHP et définissez le code du filtre comme suit: return (! $ Row-> delta == $ row-> delta_1);

Ça devrait le faire. Vous devrez avoir installé le module Views PHP pour utiliser PHP comme filtre.

Pour afficher plusieurs images d'un nœud unique dans le curseur, utilisez le module de bloc d'affichage dynamique et lisez le paramètre de configuration. Dans ce cas, lorsque vous créez une vue pour afficher le bloc de curseur, veuillez ne pas cocher la case lors de l'ajout d'une image avec "Afficher plusieurs paramètres de champ" si elle est déjà cochée, veuillez la décocher.

Je recommande le module Colorbox

Jetez également un œil au didacticiel vidéo suivant: Colorbox pour Drupal 7, partie 1: installation et intégration du champ d'image

Comme presque tout dans Drupal, il existe un tas de solutions différentes à cela, mais je veux en partager une simple que je n'ai encore rencontrée nulle part.

Fondamentalement, je cherchais un moyen d'afficher un tas de champs différents - tous attachés à un seul nœud - dans un diaporama. Ces champs comprenaient des champs d'image et de texte. Ainsi, afin d'afficher tous les champs attachés à un seul nœud dans un diaporama:

1. Créez une vue pour votre diaporama. Utilisez le format "Liste non formatée".
2. Définissez la vue pour afficher un seul élément, de sorte que vous ne traitez qu'avec un seul nœud (ou utilisez le filtre contextuel: NID)
3. Ajoutez tous les champs que vous souhaitez voir apparaître dans le diaporama. Exclure tous les champs de l'affichage.
4. Ajoutez un champ personnalisé (assurez-vous que ce champ s'affiche après tous les champs que vous avez exclus de l'affichage). C'est là que vous allez créer le balisage de base pour votre diaporama. En utilisant les modèles de remplacement disponibles, définissez chaque champ disponible dans un liélément comme celui-ci:

   
   <ul id="slider">
   <li>[text_field_1]</li>
   <li>[image_field_1]</li>
   <li>[text_field_2]</li>
   <li>[image_field_2]</li>
   </ul>
   
   

5. Ensuite, vous pouvez exécuter votre curseur jQuery préféré. Si vous avez déjà installé le plugin jQuery Cycle , vous pouvez l'exécuter très facilement sur le curseur. Assurez-vous simplement que le plugin est chargé sur la page avec votre curseur, puis exécutez-le sur votre nouvellement créé ul:

   
   (function ($, Drupal, window, document, undefined) {
   
       $(document).ready(function() {
           $('#slider').cycle({
           // choose your options
       });
       });
   
   })(jQuery, Drupal, this, this.document);
   
   

Et vous devriez être prêt à partir.

Il existe un https://www.drupal.org/project/field_slideshow moduel qui est fait pour créer un diaporama à partir d'un seul nœud.

Personnellement, je pense que ce serait une grande utilisation d'un modèle de type nœud, puis chaque nœud de ce type serait formaté sous forme de diaporama avec un haut degré de contrôle, comme où présenter le reste des champs pour cela nœud...