jquery 滑块

Slider kit tutorial. Today we continue overviews of available photo galleries. Next gallery will Slider Kit. This is free jQuery photo gallery. This gallery have 4 different views (standard, with captions, vertical and minimalistic). Important notes – that it compatible with all browsers (this can work even in IE6) and have very light weight (packed version of library less 8kb). You can navigate through images using your mouse, mouse wheel, and even keyboard. The result – we will have a beautiful gallery with an intuitive interface. Today I will tell you about how to implement this gallery (you even will able to use this in any CMS as gallery of your member’s photos). By default this gallery expect already prepared html data (with all images and thumbs). So it can be difficult to load dinamic content in it (different photos of different members). But its ok, we will force loading of necessary images when page finish loading using jQuery (we will load our images dinamically, using $.get function). We will use PHP to generate lists of necessary images and thumbs.

滑块工具包教程。 今天，我们继续概述可用的照相馆。 下一个画廊将是Slider Kit 。 这是免费的jQuery照片库。 该画廊有4个不同的视图(标准，带字幕，垂直和简约)。 重要说明–它与所有浏览器兼容(即使在IE6中也可以使用)，并且重量非常轻(库的压缩版本少于8kb)。 您可以使用鼠标，鼠标滚轮甚至键盘浏览图像。 结果–我们将拥有一个带有直观界面的漂亮画廊。 今天，我将向您介绍如何实现此图片库(您甚至可以在任何CMS中将其用作会员照片的图片库)。 默认情况下，此库期望已准备好的html数据(带有所有图像和缩略图)。 因此，可能很难在其中加载动态内容(不同成员的不同照片)。 没关系，当使用jQuery完成页面加载时，我们将强制加载必要的图像(我们将使用$ .get函数以动态方式加载图像)。 我们将使用PHP生成必要图像和缩略图的列表。

Ok, lets start, and lets check prepared demos and download ready package:

好的，让我们开始，然后检查准备好的演示并下载准备好的软件包：

现场演示1

现场演示2

现场演示3

Lets start coding !

让我们开始编码！

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML. This is source code of our sample:

和往常一样，我们从HTML开始。 这是我们示例的源代码：

index.html (index.html)

<link rel="stylesheet" type="text/css" href="css/sliderkit-core.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="css/sliderkit-demos.css" media="screen, projection" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/sliderkit-demos-ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/sliderkit-demos-ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/sliderkit-demos-ie8.css" />
<![endif]-->
<script src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.sliderkit.1.5.1.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<div class="example"><h3><a href="#">Slider Kit example</a></h3><div class="sliderkit photosgallery-std" id="sliderkit_galery"><div class="sliderkit-nav"><div class="sliderkit-nav-clip"><ul></ul></div><div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a rel="nofollow" href="#" title="Previous line"><span>Previous line</span></a></div><div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a rel="nofollow" href="#" title="Next line"><span>Next line</span></a></div><div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Previous photo"><span>Previous photo</span></a></div><div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Next photo"><span>Next photo</span></a></div></div><div class="sliderkit-panels"><div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Previous"><span>Previous</span></a></div><div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Next"><span>Next</span></a></div></div></div>
</div>

<link rel="stylesheet" type="text/css" href="css/sliderkit-core.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="css/sliderkit-demos.css" media="screen, projection" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/sliderkit-demos-ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/sliderkit-demos-ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/sliderkit-demos-ie8.css" />
<![endif]-->
<script src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.sliderkit.1.5.1.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<div class="example"><h3><a href="#">Slider Kit example</a></h3><div class="sliderkit photosgallery-std" id="sliderkit_galery"><div class="sliderkit-nav"><div class="sliderkit-nav-clip"><ul></ul></div><div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a rel="nofollow" href="#" title="Previous line"><span>Previous line</span></a></div><div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a rel="nofollow" href="#" title="Next line"><span>Next line</span></a></div><div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Previous photo"><span>Previous photo</span></a></div><div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Next photo"><span>Next photo</span></a></div></div><div class="sliderkit-panels"><div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Previous"><span>Previous</span></a></div><div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Next"><span>Next</span></a></div></div></div>
</div>

You can notice, that currently we have empty UL inside ‘sliderkit-nav’. We will load its units on ‘jQuery(window).load’ event. Also, by default ‘sliderkit-panels’ should contain ready set of images too, we will load it after too. So currently we just prepared skeleton – interface elements (panels and buttons).

您会注意到，当前在“ sliderkit-nav”中有空的UL。 我们将在'jQuery(window).load'事件中加载其单元。 另外，默认情况下，“ sliderkit-panels”也应包含一组可用的图像，我们也将在以后加载它。 因此，当前我们仅准备骨架–界面元素(面板和按钮)。

Now, make attention to class of our main gallery ‘photosgallery-std’. This class will determinate gallery view. For first example we using Standard view (‘photosgallery-std’, where ‘std’ – Standard shortly). Here are another possible classes: ‘photosgallery-captions’ (will display custom captions at images), ‘photosgallery-vertical’ (will display captions and make gallery vertically) and ‘photosgallery-minimalistic’ (minimalistic set, nothing). Another point, no need generate navigation buttons in case if you going to use ‘minimalistic’, they don`t will display anyway :)

现在，请注意我们主画廊“ photosgallery-std”的类。 此类将确定画廊的视野。 对于第一个示例，我们使用“标准”视图(“ photosgallery-std”，其中“ std” –简称“标准”)。 这是另一种可能的类别：“ photosgallery-captions”(将在图像上显示自定义标题)，“ photosgallery-vertical”(将显示标题并垂直放置图库)和“ photosgallery-minimalistic”(minimistic set，不显示任何内容)。 还有一点，如果您要使用“极简主义”，则无需生成导航按钮，它们无论如何都不会显示:)

In our package you will find ‘index2.html’ and also ‘index3.html’. This is just different gallery views.

在我们的软件包中，您会找到“ index2.html”和“ index3.html”。 这只是不同的画廊视图。

步骤2. CSS (Step 2. CSS)

Here are used CSS files:

以下是使用CSS文件：

css / main.css (css/main.css)

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

As usual – our main file for demo layout – very easy. But of course, pur new gallery have own css files:

像往常一样-我们用于演示布局的主文件-非常容易。 但是，当然，pur new gallery具有自己的css文件：

css / sliderkit-core.css，css / sliderkit-demos-ie6.css，css / sliderkit-demos-ie7.css，css / sliderkit-demos-ie8.css和css / sliderkit-demos.css (css/sliderkit-core.css, css/sliderkit-demos-ie6.css, css/sliderkit-demos-ie7.css, css/sliderkit-demos-ie8.css and css/sliderkit-demos.css)

All these files you will able to find in package (they are large enough to include them in the article)

您可以在软件包中找到所有这些文件(它们足够大，可以在文章中包含它们)

步骤3. JS (Step 3. JS)

Here are all JS files:

这是所有JS文件：

js / main.js (js/main.js)

//jQuery(window).load() must be used instead of jQuery(document).ready() because of Webkit compatibility
jQuery(window).load(function() {$.get('feed.php', function(data){$('.sliderkit-nav-clip ul').append(data.thumbs);$('.sliderkit-panels').append(data.images);jQuery('#sliderkit_galery').sliderkit({mousewheel:true,keyboard:true,shownavitems:4,panelbtnshover:true,auto:true,circular:true,navscrollatend:true});});
});

//jQuery(window).load() must be used instead of jQuery(document).ready() because of Webkit compatibility
jQuery(window).load(function() {$.get('feed.php', function(data){$('.sliderkit-nav-clip ul').append(data.thumbs);$('.sliderkit-panels').append(data.images);jQuery('#sliderkit_galery').sliderkit({mousewheel:true,keyboard:true,shownavitems:4,panelbtnshover:true,auto:true,circular:true,navscrollatend:true});});
});

So, when page loaded, I start loading extra info (about using thumbs and images) from feed.php using jQuery. After, appending received info (JSON) to the pending objects. And then – perform initialization of our gallery with necessary params. First demo will using mousewheel, keyboard, will display 4 elements in navigation, have auto scrolling. Full list of possible option I will put in end of article. Next file

因此，在页面加载后，我开始使用jQuery从feed.php加载额外的信息(关于使用拇指和图像)。 之后，将接收到的信息(JSON)附加到挂起的对象。 然后–用必要的参数对我们的画廊进行初始化。 第一个演示将使用鼠标滚轮，键盘，将在导航中显示4个元素，并具有自动滚动功能。 我将在文章末尾列出所有可能的选项。 下一个档案

js / main2.js (js/main2.js)

have similar structure, but another set of properties:

具有相似的结构，但具有另一组属性：

jQuery(window).load(function() {$.get('feed.php', function(data){$('.sliderkit-nav-clip ul').append(data.thumbs);$('.sliderkit-panels').append(data.images);jQuery('#sliderkit_galery').sliderkit({mousewheel:true,keyboard:true,shownavitems:4,auto:true,circular:true,navscrollatend:true,verticalnav:true,navclipcenter:true,navitemshover:true,panelfxspeed: 2000});});
});

jQuery(window).load(function() {$.get('feed.php', function(data){$('.sliderkit-nav-clip ul').append(data.thumbs);$('.sliderkit-panels').append(data.images);jQuery('#sliderkit_galery').sliderkit({mousewheel:true,keyboard:true,shownavitems:4,auto:true,circular:true,navscrollatend:true,verticalnav:true,navclipcenter:true,navitemshover:true,panelfxspeed: 2000});});
});

And here are code for our third sample:

这是我们第三个示例的代码：

js / main3.js (js/main3.js)

jQuery(window).load(function() {$.get('feed.php', function(data){$('.sliderkit-nav-clip ul').append(data.thumbs);$('.sliderkit-panels').append(data.images);jQuery('#sliderkit_galery').sliderkit({mousewheel:true,keyboard:true,shownavitems:4,auto:true,circular:true,navscrollatend:true});});
});

jQuery(window).load(function() {$.get('feed.php', function(data){$('.sliderkit-nav-clip ul').append(data.thumbs);$('.sliderkit-panels').append(data.images);jQuery('#sliderkit_galery').sliderkit({mousewheel:true,keyboard:true,shownavitems:4,auto:true,circular:true,navscrollatend:true});});
});

js / jquery-1.5.2.min.js，js / jquery.easing.1.3.min.js，js / jquery.mousewheel.min.js和js / jquery.sliderkit.1.5.1.pack.js (js/jquery-1.5.2.min.js, js/jquery.easing.1.3.min.js, js/jquery.mousewheel.min.js and js/jquery.sliderkit.1.5.1.pack.js)

This is list of all another used JS files (jquery library with gallery). Available in our package.

这是所有其他使用的JS文件(带有库的jQuery库)的列表。 在我们的包装中可用。

步骤4. PHP (Step 4. PHP)

Here are source code of our generator of images:

这是我们图像生成器的源代码：

feed.php (feed.php)

<?
$sThumbTemplate = <<<HTML
<li><a href="#" rel="nofollow" title="{title}"><img src="{fileurl}" alt="{title}" /></a></li>
HTML;
$sImageTemplate = <<<HTML
<div class="sliderkit-panel"><img src="{fileurl}" alt="{title}" /><div class="sliderkit-panel-textbox"><div class="sliderkit-panel-text"><h4>{title}</h4><p>{description}</p></div><div class="sliderkit-panel-overlay"></div></div>
</div>
HTML;
$sThumbs = $sImages = '';
$sFolder = 'data_images/';
$aUnits = array('pic1.jpg' => 'Image 1', 'pic2.jpg' => 'Image 2', 'pic3.jpg' => 'Image 3', 'pic4.jpg' => 'Image 4','pic5.jpg' => 'Image 5', 'pic6.jpg' => 'Image 6', 'pic7.jpg' => 'Image 7', 'pic8.jpg' => 'Image 8','pic9.jpg' => 'Image 9', 'pic10.jpg' => 'Image 10'
);
foreach ($aUnits as $sFileName => $sTitle) {$sThumbs .= strtr($sThumbTemplate, array('{fileurl}' => $sFolder . 't_' . $sFileName, '{title}' => $sTitle));$sImages .= strtr($sImageTemplate, array('{fileurl}' => $sFolder . $sFileName, '{title}' => $sTitle, '{description}' => $sTitle . ' photo description here'));
}
header("Content-Type: application/json");
require_once('Services_JSON.php');
$oJson = new Services_JSON();
echo $oJson->encode(array('thumbs' => $sThumbs, 'images' => $sImages));
?>

<?
$sThumbTemplate = <<<HTML
<li><a href="#" rel="nofollow" title="{title}"><img src="{fileurl}" alt="{title}" /></a></li>
HTML;
$sImageTemplate = <<<HTML
<div class="sliderkit-panel"><img src="{fileurl}" alt="{title}" /><div class="sliderkit-panel-textbox"><div class="sliderkit-panel-text"><h4>{title}</h4><p>{description}</p></div><div class="sliderkit-panel-overlay"></div></div>
</div>
HTML;
$sThumbs = $sImages = '';
$sFolder = 'data_images/';
$aUnits = array('pic1.jpg' => 'Image 1', 'pic2.jpg' => 'Image 2', 'pic3.jpg' => 'Image 3', 'pic4.jpg' => 'Image 4','pic5.jpg' => 'Image 5', 'pic6.jpg' => 'Image 6', 'pic7.jpg' => 'Image 7', 'pic8.jpg' => 'Image 8','pic9.jpg' => 'Image 9', 'pic10.jpg' => 'Image 10'
);
foreach ($aUnits as $sFileName => $sTitle) {$sThumbs .= strtr($sThumbTemplate, array('{fileurl}' => $sFolder . 't_' . $sFileName, '{title}' => $sTitle));$sImages .= strtr($sImageTemplate, array('{fileurl}' => $sFolder . $sFileName, '{title}' => $sTitle, '{description}' => $sTitle . ' photo description here'));
}
header("Content-Type: application/json");
require_once('Services_JSON.php');
$oJson = new Services_JSON();
echo $oJson->encode(array('thumbs' => $sThumbs, 'images' => $sImages));
?>

Firstly, I defined 2 templates which going to use for generation of necessary info about using images and for thumbs and for images. Also will use JSON to be able to send both strings in one time (inside array). All our custom images located in ‘data_images’ directory. All thumbs – have prefix ‘t_’. Easy enough :)

首先，我定义了2个模板，这些模板将用于生成有关使用图像，拇指和图像的必要信息。 也将使用JSON一次发送两个字符串(在数组内部)。 我们所有的自定义图像都位于“ data_images”目录中。 所有的大拇指–都带有前缀“ t_”。 很简单：)

步骤5.图片 (Step 5. Images)

Our Slider Kit gallery using next images:

我们的Slider Kit画廊使用下一张图片：

最后–列出此图库所有可能参数的表格： (And at last – table with all possible params (to current moment) of this gallery:)

Param	Type	Default	Description
cssprefix	string	sliderkit	The prefix to use on every CSS class names
start	int	0	Set the start position. First is 0.
auto	boolean	true	Activate auto-scrolling
autospeed	int	4000	Set the auto-scrolling speed (ms)
mousewheel	boolean	false	Activate the mousewheel navigation
keyboard	boolean	false	Activate the keyboard navigation. Very basic for now (left/right arrows only)
panelclick	boolean	false	Activate the 1-click navigation
circular	boolean	false	Activate the infinite nav scroll
shownavitems	int	5	Defines how many thumbnails to display in the nav clip
navitemshover	boolean	false	If set the panels will slide on nav thumbnails mouseover (by default panels slide on click)
navclipcenter	boolean	false	Defines if the nav clip must be center-aligned in the nav container
navcontinuous	boolean	false	If set to true, will make the carousel scroll continuously (use this option with a “linear” scrolleasing)
navscrollatend	boolean	false	If set to ‘true’, will make the carousel scroll if a line first or last thumbnail is clicked
navfx	string	sliding	Define the carousel transition effect. Possible values: “sliding”, “none”
scroll	int	equal to ‘shownavitems’ option value	Defines how many nav thumbnails must be scrolled when nav buttons are clicked. Can’t be greater than the ‘shownavitems’ option value
scrollspeed	int	600	Set the nav scroll speed (ms)
scrolleasing	string	swing	Add an easing effect to the nav slide transition. Default jQuery easing functions are “swing” or “linear”.
swing	string	fading	Define the panels transition effect. Possible values: “fading”, “sliding”, “none”
panelfxspeed	int	700	Set the panel slide transition effect speed (ms)
panelfxeasing	string	swing	Add an easing effect to the panel slide transition. Default jQuery easing functions are “swing” or “linear”
panelfxfirst	string	none	Add a transition effect on the first displayed item. There are only 2 possible values for the moment: “fading” or “none”
panelfxbefore	function	function(){}	The function called before the panel transition start
panelfxafter	function	function(){}	The function called when panel transition is over
panelbtnshover	boolean	false	If set to true, go buttons will fade in/out on panel mouseover
verticalnav	boolean	false	Set the nav clip direction to vertical
verticalslide	boolean	false	Set the panel sliding direction to vertical (only if “panelfx” is defined as “sliding”)
tabs	boolean	false	Required to build a tabs menu
freeheight	boolean	false	Use panels with no fixed height (in this case, ‘panelfx’ value can’t be “sliding”)
fastchange	boolean	true	By default the user can slide to the next content even if the slider is still running. You can stop this behavior by setting the “fastchange” option to false
debug	boolean	false	If set to true, the script will stop on errors and return error code values. Check documentation

参数	类型	默认	描述
cssprefix	串	滑盖套件	每个CSS类名称上使用的前缀
开始	整型	0	设置开始位置。 首先是0。
汽车	布尔值	真正	激活自动滚动
自动速度	整型	4000	设置自动滚动速度(毫秒)
鼠标滚轮	布尔值	假	激活鼠标滚轮导航
键盘	布尔值	假	激活键盘导航。 目前非常基本(仅向左/向右箭头)
面板点击	布尔值	假	激活一键式导航
圆	布尔值	假	激活无限导航滚动
显示的视频	整型	5	定义在导航剪辑中显示多少个缩略图
导航器	布尔值	假	如果设置，则面板将在导航缩略图鼠标悬停时滑动(默认情况下，面板在单击时滑动)
导航中心	布尔值	假	定义导航剪辑是否必须在导航容器中居中对齐
连续的	布尔值	假	如果设置为true，将使旋转木马连续滚动(将此选项与“线性”滚动使用配合使用)
导航卷尾	布尔值	假	如果设置为“ true”，则在单击第一个或最后一个缩略图行时将使轮播滚动
导航	串	滑行	定义轮播过渡效果。 可能的值：“滑动”，“无”
滚动	整型	等于'shownavitems'选项值	定义单击导航按钮时必须滚动多少个导航缩略图。 不能大于'shownavitems'选项值
滚动速度	整型	600	设置导航滚动速度(毫秒)
滚动	串	摇摆	向导航幻灯片过渡添加缓动效果。 默认的jQuery缓动函数是“ swing”或“ linear”。
摇摆	串	衰退	定义面板过渡效果。 可能的值：“褪色”，“滑动”，“无”
面板速度	整型	700	设置面板滑动过渡效果速度(毫秒)
面板化	串	摇摆	向面板幻灯片过渡添加缓动效果。 默认的jQuery缓动函数是“ swing”或“ linear”
panelfxfirst	串	没有	在第一个显示的项目上添加过渡效果。 目前只有2种可能的值：“褪色”或“无”
panelfx之前	功能	功能(){}	面板转换开始之前调用的函数
panelfxafter	功能	功能(){}	面板过渡结束时调用的函数
小组讨论	布尔值	假	如果设置为true，则转到按钮将在面板鼠标悬停时淡入/淡出
垂直导航	布尔值	假	将导航剪辑方向设置为垂直
垂直滑道	布尔值	假	将面板滑动方向设置为垂直(仅当“ panelfx”定义为“滑动”时)
标签	布尔值	假	建立标签菜单所必需
自由身高	布尔值	假	使用没有固定高度的面板(在这种情况下，“ panelfx”值不能“滑动”)
快速变化	布尔值	真正	默认情况下，即使滑块仍在运行，用户也可以滑动到下一个内容。 您可以通过将“ fastchange”选项设置为false来停止此行为
调试	布尔值	假	如果设置为true，则脚本将在错误时停止并返回错误代码值。 检查文件

现场演示1

现场演示2

现场演示3

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

结论 (Conclusion)

Today we explained how to build new jQuery gallery, even several. Sure that you will happy to use it in your projects. Good luck!

今天，我们解释了如何构建新的jQuery库，甚至其中的几个。 确保您将乐于在项目中使用它。 祝好运！

翻译自: https://www.script-tutorials.com/how-to-create-photo-gallery-using-slider-kit-jquery/

jquery 滑块