How to use the image display plug-in highslide.js in jQuery-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to use the image display plug-in highslide.js in jQuery

Jun 02, 2018 pm 02:08 PM

javascript jquery

This time I will show you how to use the image display plug-in highslide.js in jQuery. What are the precautions for using the image display plug-in highslide.js in jQuery? The following is a practical case, let’s take a look. .

Preface

Today I used a picture display plug-in, highslide.js. It feels very comfortable to use and there is almost no need to write code. , you just need to know how to write parameters.

So how should we use such an awesome plug-in? I will explain it to you below.

1. Introduction

First we use the absolute path to introduce. This is usually a method cited in actual projects. When we download There is a file package that contains style files and script files.

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　] by

Just import these two files, and then write this in the code:

&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;&lt;%=controller.getStaticPath(request)%&gt;/js/highslide.css&quot; rel=&quot;external nofollow&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;&lt;%=controller.getStaticPath(request)%&gt;/js/highslide-with-gallery.js&quot;&gt;&lt;/script&gt;

Copy after login

My project is a jsp file, so the way to introduce the root directory is different. Friends can specifically introduce it according to their own projects.

Then what we have to do is call our plug-in and pass in the parameters:

##The above is my parameter configuration diagram

hs.graphicsDir = &#39;&lt;%=controller.getStaticPath(request)%&gt;/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
   }
  });

Copy after login

The above code except that the file address needs to be configured according to its own path, the other No need to change.

3. How to display

Once the plug-in is equipped, how can we display our pictures? This is simpler.

The directions indicated by the arrows in the above picture must be configured.

1. If the class name of the outermost layer p is highslide-gallery, then the image display we complete will display all the pictures in this layer of p in a carousel.

#2. The outer layer of the picture should be wrapped with an A tag, and the address of the A tag should be the address of the real big picture, that is, the address of the picture to be displayed. Then give A price click event

onclick="return hs.expand(this)

, if not added, the click will have no effect.

Remember The way of writing the click event is

return hs.expand(this)

. In fact, this can complete the interactive effect of clicking on a small picture to display the playback of the large picture. Of course, you can also change the picture into text or other words, so that It can complete the click display function. Let me show you the final effect below.

4. Display effect

This is before the click

It’s very easy to use.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Recommended reading:

How to implement Vue scrolling to the bottom of the page to infinitely load data

How to use JS to implement Huffman coding

The above is the detailed content of How to use the image display plug-in highslide.js in jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn