Mellieurs plugins pour CMS Portefeuille de boites multimediasMellieurs plugins pour CMS Portefeuille de boites multimedias

Voir la démoAcheter $17

- Voir Plus d'information - le script

Galerie adaptative à la grille automatique

Portefeuille de boîtes multimédias - Plugin jQuery Grid Gallery - 2

Portefeuille de boîtes multimédias - Plugin jQuery Grid Gallery - 3

Media Boxes Portfolio est un plugin de grille jQuery en vedette qui vous permet d’afficher tout type de contenu dans une grille très puissante. Utilisez-le pour les articles de blog, les supports d’affichage, les clients, les portefeuilles, les paniers d’achat, les galeries et tout ce que vous pouvez imaginer.

il est livré avec un puissant système de filtrage, de tri et de recherche!

Vous pouvez mettre le plugin dans votre HTML / CSS existant et il s’adaptera automatiquement à son conteneur, vous pouvez également le personnaliser rapidement via CSS et HTML afin qu’il s’adapte à vos besoins.

système de filtration très puissant

Le plugin vous offre des tonnes d’options pour le filtrage:

  • Définissez votre propre balisage HTML pour le filtre
  • Appliquez votre propre style CSS au filtre
  • Ajoutez n’importe quel nombre de filtres
  • Cibler plusieurs boîtes
  • Ciblez certaines cases et excluez d’autres
  • Ajouter plusieurs catégories aux boîtes (appartenir à plusieurs catégories)
  • Utilisez n’importe quel sélecteur jQuery
  • Filtres multiples, combinés à la fonction de recherche et de tri

système de recherche

Le plugin vous offre la possibilité de rechercher dans la mise en page actuelle afin que vous puissiez trouver des éléments très rapidement, spécifiez simplement les éléments que vous souhaitez cibler avec la recherche.

Si vous avez un filtre, il fonctionnera avec la fonction de recherche, le popup et la fonction de chargement de plus prendront également en compte ce filtrage.

système de tri

Triez la mise en page en temps réel, vous pouvez utiliser du texte, des chiffres et même l’étendre selon vos propres envies. Créez vos propres options de tri, il n’y a pas de limite.

Spécifiez le ratio de vos vignettes

Vous pouvez spécifier pour chaque vignette que pour certains largeur tu veux certain la taille et le plugin coupera la hauteur pour vous (en fonction de la résolution, cela fonctionne comme le ratio). Ceci est très pratique lorsque vous souhaitez que toutes vos vignettes aient les mêmes dimensions.

Arrêtez d'attendre le chargement de toutes les vignettes

Si vous spécifiez le rapport des vignettes (largeur x hauteur), le plugin vous montrera la mise en page et le contenu sans aucun délai, puis il chargera chaque vignette séparément (montrant une roue de chargement) afin que vous ayez l’impression que le plugin se charge plus rapidement ( comme dans la démo).

L'une des grilles les plus rapides du marché

Le plugin utilise Isotope v2 qui est actuellement l’un des systèmes de grille les plus rapides avec le filtrage. En outre, il utilise les meilleures fonctionnalités du navigateur lorsqu’elles sont disponibles (transitions CSS3 et accélération GPU) et une animation de secours simple pour les navigateurs plus anciens

Configurer la mise en page pour différentes résolutions

Vous pouvez définir la disposition de la grille (le nombre de colonnes ou la largeur) pour différentes résolutions, par exemple vous ne voulez peut-être qu’une seule colonne pour une résolution mobile, 3 colonnes pour une résolution de tablette et 5 colonnes pour une résolution de bureau.

Colonnes multiples

Une boîte peut s’étendre sur plusieurs colonnes (généralement 2), il vous suffit de la spécifier, mais jouez bien avec cette option car dans certaines résolutions, vous pouvez trouver des espaces entre les cases car elle peut ne pas s’adapter parfaitement tout le temps (selon la logique isotopique).

L'une des meilleures fenêtres contextuelles - Lightbox

Le plugin utilise Fancybox et le Magnific Popup qui sont des lightboxes / popups très populaires et puissants.

Vous pouvez charger beaucoup de choses dans la fenêtre contextuelle comme des images, des vidéos, des sons, des iframes, du texte HTML, des cartes Google et du contenu ajax (il ne prend pas en charge la vidéo / le son des dossiers comme .mp4 ou .mp3, ils doivent être basés sur iframe, comme dans Youtube ou SoundCloud)

Vous pouvez trouver beaucoup de support dans google car il s’agit d’un popup très populaire, par exemple pour ajouter un support de balayage ou de nombreuses autres fonctionnalités.

Liens profonds

Créez un lien direct vers la fenêtre contextuelle afin de pouvoir partager le contenu de la fenêtre contextuelle avec vos amis ou dans votre réseau social, copiez et collez simplement l’URL générée lorsque vous ouvrez la fenêtre contextuelle.

ce que disent les clients

liste des fonctionnalités

  • Grille et popup entièrement réactifs
  • Liens profonds
  • Fonction de chargement différé
  • L’une des grilles les plus rapides du marché
  • Configurer la mise en page pour différentes résolutions
  • Colonnes multiples
  • Nombre illimité d’articles
  • La fenêtre contextuelle prend en charge les images, les vidéos, les sons, les iframes, le texte HTML, les cartes Google et le contenu ajax de toutes dimensions et gardera les bonnes proportions
  • Système de filtrage puissant
  • Système de recherche
  • Fonction de tri
  • Icônes prêtes pour la rétine
  • Définissez le nombre de boîtes à charger au début et lorsque vous cliquez sur le bouton «Charger plus»
  • Prend en charge les miniatures pour la grille uniquement pour les images dont vous souhaitez améliorer les performances
  • Définissez le ratio de vos vignettes
  • Coupe automatiquement la hauteur des vignettes avec des techniques CSS (si le ratio est défini)
  • Pleine largeur, la grille s’adaptera à 100% de son conteneur si vous définissez la largeur de chaque colonne sur ‘auto’
  • Vous pouvez spécifier une largeur statique pour chaque colonne ou spécifier le nombre de colonnes
  • Modifier la disposition du portefeuille pour différentes résolutions
  • Effets CSS3 et accélération GPU
  • Des tonnes d’effets de superposition
  • Implémentation facile
  • Compatible avec Twitter Bootstrap
  • Désactiver et activer les fonctionnalités via les options Javascript
  • Entièrement personnalisable et adaptable à vos besoins
  • Assistance technique gratuite

crédits

J’ai utilisé les icônes et scripts suivants

  • Police géniale
  • Isotope v2 (licence développeur de 25 $)
  • Magnifique Popup
  • Autres scripts JS que vous pouvez trouver dans le dossier JS

changelog

v3.6 – 01 février 2020

  • Mise à jour du fichier JS, nettoyage du code
  • Correction d’un bug étrange avec le premier élément lorsqu’un filtre par défaut autre que tout était sélectionné
  • Les waypoints ne sont plus nécessaires, vous devez maintenant inclure un fichier JS nommé «jquery.visible.min.js»

v3.5 – 26 mars 2019

  • Maintenant, les vignettes qui ont un ratio spécifié s’adapteront à 100% du conteneur, donc plus de barres noires en haut et en bas
  • Mise à jour de tous les composants vers la dernière version
  • Améliorations mineures de JS

v3.3 – 10 août 2017

  • Nouveau popup / lightbox arrivé dans les Media Boxes, qui est très tactile et est livré avec des fonctionnalités impressionnantes (comme la vue miniature, le plein écran, etc.), vous pouvez toujours utiliser Magnific Popup, vous avez donc 2 plugins popup maintenant, choisissez celui tu préfères!
  • Nouveaux outils de recherche de tri
  • Mise à jour de certains composants
  • Améliorations mineures de JS

v3.2 – 10 mars 2017

  • Ajout d’une accélération aux effets et correction de certains scintillements
  • Nouvelles méthodes JS pour insérer et actualiser la grille, consultez-les ici
  • La logique JS pour le filtre de liste déroulante se trouve maintenant sur un fichier différent nommé «jquery.mediaBoxes.dropdown.js» donc c’est plus facile à maintenir, vous n’aurez qu’à l’ajouter avec les autres fichiers, vérifiez-le ici

v3.1 – 3 novembre 2016

  • Correction et problème avec le popup lors de l’ajout de boîtes via JS / Ajax

v3.1 – 29 octobre 2016

  • Correction et problème avec la fonctionnalité iframe-on-grid dans l’exemple media_grid

v3.1 – 30 septembre 2016

  • Si vous souhaitez que le menu déroulant (celui utilisé pour le filtrage ou le tri) s’ouvre lorsque vous cliquez dessus au lieu de passer la souris dessus, vous devez ajouter cet attribut: data-event = « click » au div avec la classe « media-boxes-drop-down »
  • Maintenant, vous pouvez également utiliser la logique OR lors de l’utilisation de plusieurs filtres, vous pouvez le définir avec une nouvelle option JS nommée « multipleFilterLogic » (consultez la documentation)
  • Lorsque vous utilisez plusieurs filtres, si vous voulez qu’ils soient indépendants les uns des autres, ajoutez cette paix de JS AVANT l’initialisation JS des media box et APRÈS jQuery:
    $('*[data-filter]:not(*[data-filter="*"]').on('click', function(e){
        var current_all_filter = $(this).parents('ul').find('*[data-filter="*"]');
        $('*[data-filter="*"]').not(current_all_filter).trigger('click');
    });
    

v3.0 – 04 août 2016

  • Nouveau design sur l’aperçu en direct
  • Mise à niveau vers les dernières versions de l’isotope, des imagesChargé, de la fenêtre contextuelle magnifique et de tous les composants utilisés
  • Est maintenant compatible avec jQuery v3
  • SEO sur les vignettes, il suffit de chercher la section « Ajouter SEO » dans la documentation
  • Changement du chemin vers les composants utilisés dans le plugin, donc il est plus facile de mettre à niveau, vérifiez la section « Inclure les fichiers » dans la documentation
  • L’option «showOnlyLoadedBoxesInPopup» a été remplacée par «showOnlyVisibleBoxesInPopup»
  • Modification de la spécification des images contextuelles afin que vous puissiez en avoir autant que vous le souhaitez dans une seule boîte, vérifiez la section «Popup» dans la documentation
  • La classe video-on-grid a changé d'emplacement avec les attributs de la fenêtre contextuelle, il vous suffit donc de vérifier la section « Handy Stuff » dans la documentation
  • Les paramètres JS «sort» et «filtre» ne sont plus nécessaires, car il recherche désormais automatiquement les éléments avec l’attribut «data-filter» ou «data-sort-by» et les utilise
  • Désormais, vous pouvez également utiliser un élément « sélectionner » pour le filtrage, il vous suffit de trouver la section « Utiliser une sélection comme filtre » dans la documentation
  • Changement du hachage de lien profond du popup de mb = à (grille | popup) = vous le verrez en action dans le hachage lors de l’utilisation de la nouvelle version
  • Le Deep Linking sur les filtres et la recherche est désormais possible!
    l’option JS nommée «deeplinking» a été remplacée par:

    • deepLinkingOnPopup: vrai,
    • deepLinkingOnFilter: vrai,
    • deepLinkingOnSearch: faux,
  • Vous pouvez maintenant passer les paramètres «horizontalSpaceBetweenBoxes» et «verticalSpaceBetweenBoxes» dans le paramètre de résolution JS, de sorte que vous pouvez avoir un espace différent entre les cases en fonction de la résolution que vous avez, vérifiez le paramètre «résolutions» JS dans la documentation

v2.8 – 23 août 2015

  • Correction d’un problème avec le menu déroulant sur mobile

v2.7 – 17 août 2015

  • Ajout de nouveaux exemples frais
  • Correction de quelques bugs et ajout d’une optimisation SEO

v2.6 – 11 janvier 2015

  • Correction de quelques bugs avec la fonction de chargement

v2.5 – 16 octobre 2014

  • Correction de quelques bugs avec Firefox concernant le menu déroulant
  • Correction de quelques bugs avec le filtrage et la fonctionnalité «  minimum de boîtes par filtre  »
  • Correction de la logique JS
  • Amélioration de la convivialité du menu déroulant sur les navigateurs mobiles

v2.4 – 8 juillet 2014

  • Changer les icônes d’image pour les icônes de la rétine (Font Awesome)
  • Ajout d’une liste déroulante pour le tri et le filtrage
  • Ajout d’exemples de tri

v2.3 – 7 juillet 2014

  • Ajout de la fonction de recherche
  • Ajout d’une fonction de tri

v2.2 – 2 juillet 2014

  • Ajout d’une option nommée «considerFilteringInPopup» afin que la fenêtre contextuelle ne montre que les boîtes du filtre spécifié, c’est vrai par défaut maintenant.
  • Changement de l’espace de noms du plugin imagesLoaded car il planterait avec l’ancienne version d’isotope (s’il était inclus dans la même page)

v2.1 – 28 juin 2014

  • Ajout de liens profonds

v2.0 – 25 juin 2014

  • c’est un tout nouveau plugin
  • toute la logique derrière a changé
  • Le style CSS a changé
  • Le balisage HTML a été modifié
  • options modifiées
  • assurez-vous de lire la documentation avant de mettre à niveau

v1.0 – 25 septembre 2013

  • Première version

Vous pouvez consulter la documentation ICI

Laisser un commentaire