Camera Slideshow Playback

Camera Slideshow is a bit similar to carousel, but there are a lot of cool playback effects when the camera slideshow is playing:

A simple introduction to how the camera plugin is used:

1, Introduce JS:

<script src= "Jquery.min.js" ></script><script type= "Text/javascript" src= "Jquery.easing.1.3.js" > </script><script type= "Text/javascript" src= "Camera.min.js" ></script>

　　Note : The jquery version here is jquery v1.7.1 that is, the high-version jquery cannot use the camera;

2, the introduction of CSS style:

<link rel= "stylesheet" href= "Camera.css" type= "Text/css" media= "All" >

Here are a few common parameters:

DATA-SRC: Picture path;

DATA-SRC: Picture path;

Data-thumb: Thumbnail path;

Data-link: Link to Picture (write path)

Data-time: Display time of picture ("can enter number directly")

Data-video: Cancel video AutoPlay ("Hide")

The above is the parameters of the picture, remember that each property is only for a picture.

The following is the JS parameters, that is, the control of the entire slide

Height: ' Slide heights

Hover: Pause mouse over Slide (true, false)

ImagePath: Catalog of pictures

Loader: Load icon (pie, bar, none)

Loadercolor: Load icon Color (' color value, for example: #eee ')

Loaderbgcolor: Load icon background color

Loaderopacity: Load the transparency of the icon ('. 8 ' default value, others can be written 0,. 1,. 2,. 3,. 4,. 5,. 6,. 7,. 8,. 9, 1)

Loaderpadding: Load icon size (fill in number, default is 2)

Navigation: Left and right arrows Show/Hide (true, false)

Navigationhover: Left and right arrows show/Hide when mouse passes (true, false)

Playpause: Pause button Show/Hide (true, false)

Pauseonclick: Pause after mouse click (True, False)

Time: Slide play times (fill in numbers)

Through the above parameters to set up, the final will achieve the effect of the camera;

Because the above parameters are just a few simple common parameters, if you want to write a better effect then go to the official website to see more detailed information;

Here's a camer simple effect: (Note the image path in the code and the jquery Reference):

<! DOCTYPE html>
The image path in the code can be arbitrarily linked;
　　
If you want to add text below the picture, you can use the following code:
　　
<div data-src= "1.jpg" data-thumb= "small1.jpg" >    <div class= "Camera_caption fadefrombottom" >        Here is the text description information    </div></div>
　　
　　
Camera Slideshow Playback