Comment utiliser le plug-in d'affichage d'images highslide.js dans jQuery

Cette fois, je vais vous montrer comment utiliser le plug-in d'affichage d'image highslide.js dans jQuery. Quelles sont les précautions lors de l'utilisation du plug-in d'affichage d'image highslide.js dans jQuery. cas pratiques. Jetons un coup d'oeil.

Avant-propos

Aujourd'hui, j'ai utilisé un plug-in d'affichage d'images, highslide.js, il est très confortable à utiliser et il n'y en a presque pas. besoin d'écrire du code, il vous suffit de savoir écrire des paramètres.

Alors, comment devrions-nous utiliser un plug-in aussi génial, je vais vous l'expliquer ci-dessous ?

1. Introduction

Nous utilisons d'abord le chemin absolu pour importer, qui est généralement une méthode citée dans les projets réels lorsque nous téléchargeons là-bas. est un package de fichiers contenant des fichiers de style et des fichiers de script.

<link rel="stylesheet" type="text/css" href="<%=controller.getStaticPath(request)%>/js/highslide.css" rel="external nofollow" />
<script type="text/javascript" src="<%=controller.getStaticPath(request)%>/js/highslide-with-gallery.js"></script>

2. Paramètres de configuration

hs.graphicsDir = &#39;<%=controller.getStaticPath(request)%>/js/graphics/&#39;;
  hs.align = &#39;center&#39;;
  hs.transitions = [&#39;expand&#39;, &#39;crossfade&#39;];
  hs.wrapperClassName = &#39;dark borderless floating-caption&#39;;
  hs.fadeInOut = true;
  hs.dimmingOpacity = 0.75;

  // Add the controlbar
  if (hs.addSlideshow) hs.addSlideshow({
   //slideshowGroup: &#39;group1&#39;,
   interval: 5000,
   repeat: false,
   useControls: true,
   fixedControls: &#39;fit&#39;,
   overlayOptions: {
    opacity: .6,
    position: &#39;bottom center&#39;,
    hideOnMouseOut: true
   }
  });

3. Comment afficher

au prix de A. Si vous ne l’ajoutez pas, le clic n’aura aucun effet. onclick="return hs.expand(this)

En fait, de cette façon, vous pouvez compléter l'effet interactif de cliquer sur une petite image pour afficher la lecture de. une grande image. Bien entendu, vous pouvez également transformer l'image en texte ou en d'autres mots, afin de pouvoir également compléter la fonction d'affichage par clic. Laissez-moi vous montrer l'effet final ci-dessous. return hs.expand(this)

4. Effet d'affichage

C'est après avoir cliqué, n'est-ce pas très simple. En fait, la difficulté réside dans la configuration des paramètres, mais je les ai déjà configurés, vous pouvez donc l'utiliser facilement.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!