Easily create slide tutorials with the jquery plugin Coin-slider

Today in order to make a template, to collect the slideshow plug-in, the final determination of two more appropriate. Coin-slider and Nivoslider, for this, studied the afternoon, from all aspects to experiment with the two plug-ins, which is more suitable, better.

Of course, the smart you see the topic is already known. I have to throw up my groove. Nivoslider this jquery plugin. These two plug-ins, when looking at the official demo, the plug-in effect is better than coin-slider. Take a look at the tutorial, you can customize the parameters more, seemingly more powerful function. So I first studied the use of this plug-in method. As the online tutorials are relatively small, most of them are direct copy of the official tutorial, I will directly take the official demo code to see. This look, the direct faint death. Loaded n CSS files, as well as a variety of picture files, on the spot dizzy dead. Demo inside the code, is also a lot of chaos, not afraid of many, disorderly code, afraid to cite a variety of file effects of the overlay, analysis of the exhausted individuals.

Simply follow the steps yourself, write a small demo, and see how easy this plugin is. Follow the official steps to write the image link, load the required JavaScript files, and so on. Open a look, immediately without the official demo of the beautiful and powerful, the above page, and so on, are required by the CSS definition, this is temporarily not managed, so unsightly ugly bar. The picture switch is also normal, the abnormal place is, somewhere, there is a lot of pictures of the next picture block. The principle of this switch is very simple, generate a lot of Div, each div with CSS in the background-position attribute, the whole picture into pieces, and then the transparency of each block, and so on, the effect is that you see the kind of. But now, there is a pile of blocks in the side is messy, directly without words. I have deleted the specific situation, and I am not. It is estimated that a block of CSS is not well defined, when I open the official demo CSS, and then chore, so many, so messy code. Function of the powerful, must face the difficulty of the use of upgrading, estimated this is for the expert users, I wait for small white or slip away. Studied for two or three hours and died. Turned to Coin-slider to walk.

First on the Internet to search for relevant information, a predecessor has written a tutorial, and did a demo, download down to see, the effect is very good, the code is very few. Also downloaded the official demo, open the official demo, the following instructions, said clearly. In a nutshell: Load prerequisites = "Write your own picture link =" To perform that operation. The same is true, maybe I studied Nivoslider before, and Coin-slider and its principle and operation are similar, so I quickly get started and make the effect I want. The following are explained in turn:

1, Loading prerequisites

This coin-slider is a plugin of jquery, of course, without jquery. So we're going to load three items: jquery, Coin-slider, and Coin-slider-styles.css three. The next two is the plug-in package, the last CSS file, is used to format the relevant style of the slide. I guess Nivoslider is because of the lack of a this, so it caused the chaos, it is possible that I did not find this thing. The code is as follows:

<script type= "Text/javascript" src= "Jquery.js" ></script>
<script type= "Text/javascript" src= "Coin-slider.min.js" ></script>
<link rel= "stylesheet" href= "Coin-slider-styles.css" type= "Text/css"/>

2, write your link to the picture

We first need to specify a DIV tag with an ID, so that when the third step executes, the plugin can find the image we want to broadcast. The way it's written, there are several features, that is, if you want to click on the image to jump to a link, add a tag outside, after the IMG tag, create a new span tag, the contents of which will appear as the caption text of the picture. Look directly at the code:

<div id= "Coin-slider" >
    <a href= "#" >
        
        <span>
            Description for nem<br/>odescription for nemodescription for nemodescription for nemodescription for Nemodescripti On for nemodescription for nemodescription for nemodescription for nemodescription for Nemo
        </span>
    </a>
    <a href= "#111" >
        //Loading pictures
        <span>//Picture-corresponding instructions
            Description for Nemo
        </span>
    </a>
</div>

The general framework of this code, I extracted from the official demo, here I will spit again, the official demo file, written is too irregular, the HTML tag is capitalized, and from the above IMG Src can be seen, they unexpectedly use single quotation marks! The CSS file is the same, with the code obsessive-compulsive Stalker M, took several minutes to turn most of the code into lowercase, add the appropriate number, really no language. Look at the development time, 2010 works, then XHTML should be popular, why still use uppercase wording, no language.

3, perform the operation

Once the two steps above are complete, you need to trigger the method to implement the slide function. Method of course is

    $ (document). Ready (function () {
        $ (' #coin-slider '). Coinslider ({height:248}); Use a variety of parameter configurations to augment his functionality
    });

Of course, you can also use window.onload, which makes sure that the slideshow is completely downloaded and then the slide appears.

Obviously, you can also configure a lot of parameters to make the slide function more powerful. In the above code, I added a parameter, height:248, because my photo height is 248px. Here are some other parameters, I am behind the official comments, a small translation, inaccurate words, also hope forgive me.

width:565,//Width of slider panel slide
height:290,//Height of slider panel slide
Spw:7,//squares per width slide cut out the width of the small box
Sph:5,//squares per height slide cut out the height of the small box
delay:3000,//delay between images in MS Switch picture time, millisecond units
SDELAY:30,//delay Beetwen squares in MS Small box change the time, millisecond units (these two try not to change, the official said change prone to excessive problems)
opacity:0.7,//opacity of title and navigation picture below description text background transparency
titlespeed:500,//speed of the title appereance in Ms Title disappears, millisecond units
Effect: ',//random, swirl, rain, straight transform style, random, whirlpool, rain, continuous (try it out yourself to know the effect)
Navigation:true,//prev Next and buttons show the previous and Last buttons
Links:true,//show images as links  whether to take a picture as a link
Hoverpause:true//Pause on hover when you put your mouse on it, does the picture continue to change

All we need to do is to fill in the parameters we've defined, just like this:

$ (' #coin-slider '). Coinslider ({width:900, navigation:false, delay:5000});

4, Advanced usage

In the specific use of the process, its default style, certainly does not meet my template requirements, so I need to be more detailed revision of it. That is, through the CSS, the official CSS file, you can directly modify, you can also create a new CSS file, define it. In Firefox, it's easy to see what div tags the plugin generated, along with the corresponding ID and class. Since you are a senior user, of course, I do not pour you, I just here to mention a train of thought, the specific will depend on your own to modify.

Finally, pack up the resources for this tutorial and put it up. Click to download

Easily create slide tutorials with the jquery plugin Coin-slider