So verwenden Sie das Bildanzeige-Plugin highslide.js in jQuery

Dieses Mal zeige ich Ihnen, wie Sie das Bildanzeige-Plugin highslide.js in jQuery verwenden. Welche Vorsichtsmaßnahmen sind bei der Verwendung des Bildanzeige-Plugins highslide.js in jQuery zu beachten? Werfen wir einen Blick darauf.

VorwortHeute habe ich ein Bildanzeige-Plug-in verwendet, highslide.js. Es fühlt sich sehr angenehm an und ist kaum nötig Wenn Sie einen beliebigen Code schreiben möchten, müssen Sie nur wissen, wie man Parameter schreibt.

Wie sollten wir so ein tolles Plug-in verwenden? Ich werde es Ihnen unten erklären.

1. EinführungZuerst verwenden wir den absoluten Pfad zum Importieren, was im Allgemeinen eine Methode ist, die in tatsächlichen Projekten verwendet wird ist ein Dateipaket, das Stildateien und Skriptdateien enthält.

　　　　　

　　　　　　

Bei der Verwendung importieren Sie einfach diese beiden Dateien und schreiben dann Folgendes in den Code:

<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>

Mein Projekt ist eine JSP-Datei, daher ist die Art und Weise, das Stammverzeichnis einzuführen, unterschiedlich. Freunde können es entsprechend ihren eigenen Projekten einführen.

Dann müssen wir unser Plug-in aufrufen und die Parameter übergeben:

　　　

2. Konfigurationsparameter

Das Obige ist mein Parameterkonfigurationsdiagramm

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
   }
  });

Zusätzlich zur Dateiadresse muss der obige Code vorhanden sein entsprechend seinem eigenen Pfad konfiguriert.

3. Wie zeigen wir unsere Bilder an, nachdem das Plug-in ausgestattet ist?

Die durch die Pfeile im Bild oben angezeigten Richtungen müssen konfiguriert werden.

1. Wenn der Klassenname der äußersten Ebene p „highslide-gallery“ lautet, zeigt die von uns abgeschlossene Bildanzeige alle Bilder in dieser Ebene von p in einem Karussell an.

2. Die äußere Ebene des Bildes sollte mit einem A-Tag umschlossen sein, und die Adresse des A-Tags sollte die Adresse des wirklich großen Bildes sein , die Adresse, an der das Bild angezeigt werden soll. Fügen Sie dann das Klickereignis

zum Preis von A hinzu. Wenn Sie es nicht hinzufügen, hat der Klick keine Auswirkung.

Denken Sie daran, wie man Klickereignisse schreibt

Tatsächlich können Sie auf diese Weise den interaktiven Effekt des Klickens auf ein kleines Bild vervollständigen, um die Wiedergabe eines großes Bild. Natürlich können Sie das Bild auch in Text oder andere Wörter umwandeln, sodass Sie auch die Klickanzeigefunktion abschließen können. Lassen Sie mich Ihnen unten den endgültigen Effekt zeigen. onclick="return hs.expand(this)

4. Anzeigeeffekt

return hs.expand(this)

　　　

Dies geschieht vor dem Klicken

Das ist nach dem Klicken, ist es nicht ganz einfach? Tatsächlich liegt die Schwierigkeit in der Konfiguration der Parameter, aber ich habe sie bereits konfiguriert, sodass Sie sie problemlos verwenden können.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So scrollen Sie unter Vue zum Ende der Seite, um Daten unbegrenzt zu laden

Anleitung Verwenden Sie JS, um die Huff-Mann-Codierung zu implementieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Bildanzeige-Plugin highslide.js in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!