新的很棒的jQuery照片库– Skitter

New Great jQuery Photo Gallery – Skitter Building photo gallery with Skitter. Today we will continue overviews of available photo galleries. Next gallery is Skitter. This is jQuery gallery. This gallery switch images using different transition effects. At current moment it able to manage with 22 different effects. Plus what important – this is cross platform gallery. Sure that your members will love it. By default that gallery expect already prepared html data (of all images). But its ok, we will force loading of necessary images when page finish loading (as you know – we always can use jQuery functions – so we will load our images dinamically, using $.load function). We will use PHP to generate list of necessary images. In result, this will applicable during creating new photo gallery for any CMS (or another script).

新的很棒的jQuery照片库– Skitter与Skitter建立照片库。 今天我们将继续概述可用的照相馆 。 下一个画廊是Skitter。 这是jQuery画廊。 该图库使用不同的过渡效果切换图像。 目前，它可以管理22种不同的效果。 还有重要的一点–这是跨平台画廊。 确保您的成员会喜欢它。 默认情况下，图库期望(所有图像的)已经准备好的html数据。 没关系，当页面完成加载时，我们将强制加载必要的图像(如您所知–我们始终可以使用jQuery函数–因此我们将使用$ .load函数以动态方式加载图像)。 我们将使用PHP生成必要图像的列表。 因此，这将适用于为任何CMS(或其他脚本)创建新的照片库。

Here are samples and downloadable package:

以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and 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" href="css/main.css" type="text/css" />
<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.skitter.min.js"></script>
<script src="js/main.js"></script>
<div class="example">
    <h3><a href="#">Skitter example</a></h3>
    <div class="border_box">
        <div class="box_skitter box_skitter_large">
            <ul class="box_skitter_ul"></ul>
        </div>
    </div>
</div>

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.skitter.min.js"></script>
<script src="js/main.js"></script>
<div class="example">
    <h3><a href="#">Skitter example</a></h3>
    <div class="border_box">
        <div class="box_skitter box_skitter_large">
            <ul class="box_skitter_ul"></ul>
        </div>
    </div>
</div>

As I hope – all clean here, no need explain it

我希望–一切都干净，无需解释

步骤2. CSS (Step 2. CSS)

Here are single CSS file with all necessary styles:

这是具有所有必要样式的单个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:800px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
/* skitter styles */
.box_skitter{position:relative;width:800px;height:300px;background:#000;overflow:hidden}
.box_skitter .image{overflow:hidden}
.box_skitter .box_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20}
.box_skitter .box_clone img{position:absolute;top:0;left:0;z-index:20}
.box_skitter .prev_button{position:absolute;top:50%;left:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(../images/prev.png) no-repeat left top}
.box_skitter .next_button{position:absolute;top:50%;right:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(../images/next.png) no-repeat left top}
.box_skitter .info_slide{position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:bold 11px arial;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.75;padding:5px 0 5px 5px}
.box_skitter .image_number{background:#333;float:left;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;margin:0 5px 0 0;padding:2px 10px}
.box_skitter .image_number_select{background:#c00;float:left;margin:0 5px 0 0;padding:2px 10px}
.box_skitter .info_slide_thumb{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;opacity:1.0;padding:5px}
.box_skitter .info_slide_thumb .image_number{overflow:hidden;width:70px;height:40px;position:relative}
.box_skitter .info_slide_thumb .image_number img{position:absolute;top:-50px;left:-50px}
.box_skitter .box_scroll_thumbs{padding:0 10px}
.box_skitter .box_scroll_thumbs .scroll_thumbs{position:absolute;bottom:60px;left:50px;background:0 to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;cursor:pointer;border:1px solid #333}
.box_skitter .label_skitter{z-index:150;position:absolute;bottom:0;left:0;display:none}
.loading{position:absolute;top:50%;right:50%;z-index:10000;color:#fff;text-indent:-9999em;overflow:hidden;background:url(../images/ajax-loader.gif) no-repeat left top;width:32px;height:32px;margin:-16px}
.box_skitter ul,.box_skitter .image img{display:none}
.box_skitter_large{width:800px;height:600px}
.box_skitter .image img{width:800px}
.label_skitter{background:url(../images/back-box-label-black.png) repeat-x scroll left top transparent;border-top:1px solid #000;bottom:0;color:#FFF;display:none;left:0;position:absolute;z-index:150}
.label_skitter p{font:22px arial,tahoma;letter-spacing:-1px;margin:0;padding:10px}

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:800px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
/* skitter styles */
.box_skitter{position:relative;width:800px;height:300px;background:#000;overflow:hidden}
.box_skitter .image{overflow:hidden}
.box_skitter .box_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20}
.box_skitter .box_clone img{position:absolute;top:0;left:0;z-index:20}
.box_skitter .prev_button{position:absolute;top:50%;left:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(../images/prev.png) no-repeat left top}
.box_skitter .next_button{position:absolute;top:50%;right:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(../images/next.png) no-repeat left top}
.box_skitter .info_slide{position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:bold 11px arial;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.75;padding:5px 0 5px 5px}
.box_skitter .image_number{background:#333;float:left;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;margin:0 5px 0 0;padding:2px 10px}
.box_skitter .image_number_select{background:#c00;float:left;margin:0 5px 0 0;padding:2px 10px}
.box_skitter .info_slide_thumb{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;opacity:1.0;padding:5px}
.box_skitter .info_slide_thumb .image_number{overflow:hidden;width:70px;height:40px;position:relative}
.box_skitter .info_slide_thumb .image_number img{position:absolute;top:-50px;left:-50px}
.box_skitter .box_scroll_thumbs{padding:0 10px}
.box_skitter .box_scroll_thumbs .scroll_thumbs{position:absolute;bottom:60px;left:50px;background:0 to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;cursor:pointer;border:1px solid #333}
.box_skitter .label_skitter{z-index:150;position:absolute;bottom:0;left:0;display:none}
.loading{position:absolute;top:50%;right:50%;z-index:10000;color:#fff;text-indent:-9999em;overflow:hidden;background:url(../images/ajax-loader.gif) no-repeat left top;width:32px;height:32px;margin:-16px}
.box_skitter ul,.box_skitter .image img{display:none}
.box_skitter_large{width:800px;height:600px}
.box_skitter .image img{width:800px}
.label_skitter{background:url(../images/back-box-label-black.png) repeat-x scroll left top transparent;border-top:1px solid #000;bottom:0;color:#FFF;display:none;left:0;position:absolute;z-index:150}
.label_skitter p{font:22px arial,tahoma;letter-spacing:-1px;margin:0;padding:10px}

步骤3. JS (Step 3. JS)

Here are all JS files:

这是所有JS文件：

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

$(document).ready(function(){
    $('ul.box_skitter_ul').load('feed.php',
        function() {
            $('.box_skitter_large').skitter();
        }
    );
});

$(document).ready(function(){
    $('ul.box_skitter_ul').load('feed.php',
        function() {
            $('.box_skitter_large').skitter();
        }
    );
});

Everything is quite simple – when the page loads I loading to our empty UL element its constituents – LI elements (the list of gallery images). And then – initialize the gallery by calling the function skitter(). Of course, this function can take different optional params, at the end of this article I will show a table with these params.

一切都非常简单–当页面加载时，我将其组成部分– LI元素(图库图像列表)加载到我们的空UL元素中。 然后–通过调用函数skitter()初始化画廊。 当然，此函数可以采用不同的可选参数，在本文的结尾，我将显示带有这些参数的表。

js / jquery-1.5.2.min.js，js / jquery-ui.min.js和js / jquery.skitter.min.js (js/jquery-1.5.2.min.js, js/jquery-ui.min.js and js/jquery.skitter.min.js)

This is necessary libraries – jQuery, UI and Skitter. Available in our package.

这是必需的库– jQuery，UI和Skitter。 在我们的包装中可用。

步骤4. PHP (Step 4. PHP)

Here are code of our generator of gallery images:

以下是我们画廊图片生成器的代码：

feed.php (feed.php)

<?
$sCode = '';
$sTemplate = <<<HTML
<li>
    <a href="#"><img src="{fileurl}" class="{effect}" /></a>
    <div class="label_text"><p>{title}</p></div>
</li>
HTML;
$sFolder = 'data_images/';
$aEffects = array(
    'cube', 'cubeRandom', 'block', 'cubeStop', 'cubeHide', 'cubeSize', 'horizontal', 'showBars',
    'showBarsRandom', 'tube', 'fade', 'fadeFour', 'paralell', 'blind', 'blindHeight', 'blindWidth',
    'directionTop', 'directionBottom', 'directionRight', 'directionLeft', 'cubeStopRandom', 'cubeSpread'
);
$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) {
    $sFilePath = $sFolder . $sFileName;
    list ($iWidth, $iHeight, $vType, $vAttr) = getimagesize($sFilePath);
    $sCode .= strtr($sTemplate, array('{fileurl}' => $sFilePath, '{title}' => $sTitle, '{width}' => $iWidth, '{height}' => $iHeight, '{effect}' => $aEffects[array_rand($aEffects)]));
}
echo $sCode;
?>

<?
$sCode = '';
$sTemplate = <<<HTML
<li>
    <a href="#"><img src="{fileurl}" class="{effect}" /></a>
    <div class="label_text"><p>{title}</p></div>
</li>
HTML;
$sFolder = 'data_images/';
$aEffects = array(
    'cube', 'cubeRandom', 'block', 'cubeStop', 'cubeHide', 'cubeSize', 'horizontal', 'showBars',
    'showBarsRandom', 'tube', 'fade', 'fadeFour', 'paralell', 'blind', 'blindHeight', 'blindWidth',
    'directionTop', 'directionBottom', 'directionRight', 'directionLeft', 'cubeStopRandom', 'cubeSpread'
);
$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) {
    $sFilePath = $sFolder . $sFileName;
    list ($iWidth, $iHeight, $vType, $vAttr) = getimagesize($sFilePath);
    $sCode .= strtr($sTemplate, array('{fileurl}' => $sFilePath, '{title}' => $sTitle, '{width}' => $iWidth, '{height}' => $iHeight, '{effect}' => $aEffects[array_rand($aEffects)]));
}
echo $sCode;
?>

Variable $sTemplate contain template of single photo object. We will use it to generate whole sequence of images in necessary format. Make attention that I using array $aEffects. This array contain all possible effects of this gallery. And I will take random values for each image. So in result you will have interesting result with random effects.

变量$ sTemplate包含单个照片对象的模板。 我们将使用它以必要的格式生成整个图像序列。 请注意，我使用数组$ aEffects。 此数组包含此图库的所有可能效果。 我将为每个图像取随机值。 因此，您将获得具有随机效果的有趣结果。

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

All our images located in ‘data_images’ folder. Of course, you can use another directory. Just don`t forget to correct feed.php in this case too. And, here are just 4 different images using in our gallery:

我们所有的图像都位于“ data_images”文件夹中。 当然，您可以使用另一个目录。 只是不要忘了在这种情况下也要更正feed.php。 而且，这只是我们画廊中使用的4种不同图像：

最后–包含该图库所有可能参数的表格(到目前为止)： (And at last – table with all possible params (to current moment) of that gallery:)

Param	Description	Def value	Sample
velocity	Velocity of animation	1	$(‘.skitter_object’).skitter({velocity: 3});
interval	Interval between transitions	2500	$(‘.skitter_object’).skitter({interval: 3500});
animation	Default animation	null or defined in <a> class	$(‘.skitter_object’).skitter({animation: ‘tube’});
numbers	Numbers display	true	$(‘.skitter_object’).skitter({numbers: false});
navigation	Navigation display	true	$(‘.skitter_object’).skitter({navigation: false});
label	Label display	true	$(‘.skitter_object’).skitter({label: false});
easing_default	Easing default	null	$(‘.skitter_object’).skitter({easing_default: ‘easeOutBack’});
animateNumberOut	Animation/style number	{backgroundColor:’#333′, color:’#fff’}	$(‘.skitter_object’).skitter({animateNumberOut: {backgroundColor:’#000′, color:’#ddd’}});
animateNumberOver	Animation/style hover number	{backgroundColor:’#000′, color:’#fff’}	$(‘.skitter_object’).skitter({animateNumberOver: {backgroundColor:’#000′, color:’#ddd’}});
animateNumberActive	Animation/style active number	{backgroundColor:’#cc3333′, color:’#fff’}	$(‘.skitter_object’).skitter({animateNumberActive: {backgroundColor:’#000′, color:’#ddd’}});
thumbs	Navigation with thumbs	false	$(‘.skitter_object’).skitter({thumbs: true});
hideTools	Hide numbers and navigation	false	$(‘.skitter_object’).skitter({hideTools: true});
fullscreen	Fullscreen mode	false	$(‘.skitter_object’).skitter({fullscreen: true});

参数	描述	防御值	样品
速度	动画速度	1个	$('。skitter_object')。skitter({velocity：3});
间隔	过渡之间的间隔	2500	$('。skitter_object')。skitter({interval：3500});
动画	默认动画	null或在<a>类中定义	$('。skitter_object')。skitter({animation：'tube'});
数字	数字显示	真正	$('。skitter_object')。skitter({numbers：false});
导航	导航显示	真正	$('。skitter_object')。skitter({navigation：false});
标签	标签展示	真正	$('。skitter_object')。skitter({label：false});
easing_default	缓和默认	空值	$('。skitter_object')。skitter({easing_default：'easeOutBack'});
animateNumberOut	动画/样式编号	{backgroundColor：'＃333'，颜色：'＃fff'}	$('。skitter_object')。skitter({animateNumberOut：{backgroundColor：'＃000'，color：'＃ddd'}});;
animateNumberOver	动画/样式悬停编号	{backgroundColor：'＃000'，颜色：'＃fff'}	$('。skitter_object')。skitter({animateNumberOver：{backgroundColor：'＃000'，color：'＃ddd'}});;
animateNumberActive	动画/样式有效号码	{backgroundColor：'＃cc3333'，颜色：'＃fff'}	$('。skitter_object')。skitter({animateNumberActive：{backgroundColor：'＃000'，color：'＃ddd'}});;
拇指	用拇指导航	假	$('。skitter_object')。skitter({thumbs：true});
hide工具	隐藏号码和导航	假	$('。skitter_object')。skitter({hideTools：true});
全屏	全屏模式	假	$('。skitter_object')。skitter({fullscreen：true});

现场演示

结论 (Conclusion)

Today we described how to build new type of jQuery photo gallery. Sure that you will be happy to use it in your projects. Good luck!

今天，我们描述了如何构建新型的jQuery照片库。 确保您将很高兴在项目中使用它。 祝好运！

翻译自: https://www.script-tutorials.com/new-great-jquery-photo-gallery-skitter/