Сегодня 22 сентября, воскресенье

Какой рейтинг вас больше интересует?

получить код

Главная / Каталог блогов / Cтраница блогера wascade / Запись в блоге

	wascade Голосов: 0 Адрес блога: http://wascade.blogspot.com/ Добавлен: 2013-11-10 21:46:47

Слайдер фотографій

2013-11-08 22:47:00 (читать в оригинале)

Привіт , з вами Greed.

Вибачте що довго не писав. Просто був дуже зайнятий.
Зараз буде стаття про слайдер фотографій. Вона буде потілена на декілька частин, бо блоггер починає лагати при великій кількості тексту.

Сам я цей слайдер не робив, я його скачав і трошки переробив то ж всі права на використання слайдера належать розробнику, а я просто взяв погратись. Ну оскільки я його скачав повністю безплатно, то напевне він і є безплатним)

Я забув коли його скачав(
І щоб його знайти погугліть такі теги: Skitter - Slideshow for anytime,jquery slideshow, slides, slider, slideshow, gallery, images, effects, easing, transitions, jquery, plugin, gpl license, free, customizations, flexible. Але на всякий випадок я приведу в статті всі коди.

Матеріал статті призначений тільки для ознайомлення і за його використання автор статті не несе відповідальності.
Що ж почнемо. Але в статті я буду кидати вже відредаговані коди, бо якщо кидати всі то їх вийде дуже багато.

Спочатку створімо папку де буде розміщений наш слайдер. Наприклад папка slider.
Потім html документ отже, треба файл з розширенням .html. Немає ніякого значення як він буде названий. Наприклад new_1.html. закидаємо в нього це великий код:

<!DOCTYPE html>
<html lang="en-us">
<head>
 <title>Skitter - Slideshow for anytime!</title>

 <meta name="charset" value="utf-8" />
 <meta name="description" content="Slideshow flexible with many options for customizations. This jQuery Slideshow is free!" />
 <meta name="keywords" content="jquery slideshow, slides, slider, slideshow, gallery, images, effects, easing, transitions, jquery, plugin, gpl license, free, customizations, flexible" />
 <meta name="author" content="Thiago S.F. - http://thiagosf.net" />

 


 <link rel="shortcut icon" href="images/favicon.ico">
 <link href='http://fonts.googleapis.com/css?family=Mako' rel='stylesheet' type='text/css'>
 <link type="text/css" href="css/styles.css" media="all" rel="stylesheet" />
 <link type="text/css" href="css/skitter.styles.css" media="all" rel="stylesheet" />
 <link type="text/css" href="css/highlight.black.css" media="all" rel="stylesheet" />

 <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>

 <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

 <script type="text/javascript" src="js/jquery.animate-colors-min.js"></script>

 <script type="text/javascript" src="js/jquery.skitter.min.js"></script>
 <script type="text/javascript" src="js/highlight.js"></script>

 <script type="text/javascript" src="js/jquery.mousewheel.js"></script>

 <script type="text/javascript" src="js/page.js"></script>

 <script type="text/javascript">
 var box_skitter_large = null;
 $(document).ready(function() {
 $('.box_skitter_large').skitter({
 numbers_align: "center",
 dots: true,
 preview: true,
 focus: true,
 focus_position: "leftTop",
 controls: true,
 controls_position: "leftTop",
 progressbar: true,
 progressbar_css: {
 top:'5px',
 left:'590px',
 height:10,
 borderRadius:'2px',
 width:200,
 backgroundColor:'#000',
 opacity:.7
 },
 animateNumberOver: { 'backgroundColor':'#555' },
 enable_navigation_keys: true
,
 onLoad: function(self) {
 if (this.thumbs) $('.border-skitter').height(350);
 box_skitter_large = self;
 }
 });
 });
 </script>

</head>
<body>
 <div id="page">


 <section class="border-skitter content-width">
 <div class="box_skitter box_skitter_large">
 <ul>

 <li><a href="#cut"><img src="images/001.jpg" class="cut" /></a><div class="label_text">ваш текст</div></li>

<li><a href="#swapBlocks"><img src="images/002.jpg" class="swapBlocks" /></a><div class="label_text">ваш текст</div></li>

<li><a href="#swapBarsBack"><img src="images/003.png" class="swapBarsBack" /></a><div class="label_text">ваш текст</div></li>

<li><a href="#swapBars"><img src="images/004.jpg" class="swapBars" /></a><div class="label_text">ваш текст</div></li>

<li><a href="#hideBars"><img src="images/005.jpg" class="hideBars" /></a><div class="label_text">ваш текст</div></li>

<li><a href="#downBars"><img src="images/006.png" class="downBars" /></a><div class="label_text">ваш текст</div></li>

<li><a href="#upBars"><img src="images/007.jpg" class="upBars" /></a><div class="label_text">ваш текст</div></li>

<li><a href="#cubeShow"><img src="images/008.jpg" class="cubeShow" /></a><div class="label_text">ваш текст</div></li>

<li><a href="#circlesRotate"><img src="images/009.jpg" class="circlesRotate" /></a><div class="label_text">ваш текст</div></li>

<li><a href="#circlesInside"><img src="images/010.jpg" class="circlesInside" /></a><div class="label_text">ваш текст</div></li>
 </ul>
 </div>
 </section>

 <div id="box-config">
 <section class="content-width">


 <div id="box-all-config" class="content-width">

 <div id="box-animations" class="item-config content-width">

 </div>
 <div id="box-loading" class="item-config content-width">
 <
 </div>
 <div id="box-views" class="item-config content-width">
 <ul class="list-buttons">

 <li><a href="#" rel="mini">Mini-slides</a></li>

 <li><a href="multiple.html" rel="multiple_instances">Multiple instances</a></li>

 <li><a href="fullscreen.html" rel="fullscreen">Fullscreen</a></li>
 </ul>
 </div>
 <div id="box-your-code" class="item-config content-width">

 <pre>

<link type="text/css" href="css/skitter.styles.css" media="all" rel="stylesheet" />


<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

<script type="text/javascript" src="js/jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="js/jquery.skitter.min.js"></script>



<script>
 $(document).ready(function() {
 $(".box_skitter_large").skitter({
 numbers_align: "center",
 dots: true,
 preview: true,
 focus: true,
 focus_position: "leftTop",
 controls: true,
 controls_position: "leftTop",
 progressbar: true,
 progressbar_css: {
 top:'5px',
 left:'590px',
 height:10,
 borderRadius:'2px',
 width:200,
 backgroundColor:'#000',
 opacity:.7
 },
 animateNumberOver: { 'backgroundColor':'#555' },
 enable_navigation_keys: true
 });
 });
</script>
 </pre>
 </div>
 <div class="clear"></div>
 </div>

 </section>

 </div>
 <div id="box-banner-help">
 </div>
 </article>
 <article id="page-documentation" class="page">
 <section class="content-width">
 <h1>Documentation</h1>

 <h2>Attributes</h2>

 <dl>
 <dt>animateNumberActive</dt>
 <dd>
 Animation/style active number/dot
 Default {backgroundColor:'#cc3333', color:'#fff'}

 Accept array
 Example $('.box_skitter_large').skitter({animateNumberActive: {backgroundColor:'#000', color:'#ccc'}});
 </dd>
 </dl>
 <dl>

 <dt>animateNumberOut</dt>

 <dd>
 Animation/style number/dot
 Default {backgroundColor:'#333', color:'#fff'}
 Accept array

 Example $('.box_skitter_large').skitter({animateNumberOut: {backgroundColor:'#000', color:'#ccc'}});

 </dd>
 </dl>
 <dl>
 <dt>animateNumberOver</dt>
 <dd>

 Animation/style hover number/dot
 Default {backgroundColor:'#000', color:'#fff'}

 Accept array
 Example $('.box_skitter_large').skitter({animateNumberOver: {backgroundColor:'#000', color:'#ccc'}});

 </dd>
 </dl>
 <dl>
 <dt>animation</dt>

 <dd>
 Default animation
 Default null or defined in <a> class

 Accept cube, cubeRandom, block, cubeStop, cubeHide, cubeSize, horizontal, showBars, showBarsRandom, tube, fade, fadeFour, paralell, blind, blindHeight, blindWidth, directionTop, directionBottom, directionRight, directionLeft, cubeStopRandom, cubeSpread, cubeJelly, glassCube, glassBlock, circles, circlesInside, circlesRotate, cubeShow, upBars, downBars, hideBars, swapBars, swapBarsBack, swapBlocks, cut, random, randomSmart

 Example $('.box_skitter_large').skitter({animation: 'fade'});
 </dd>
 </dl>
 <dl>

 <dt>auto_play</dt>
 <dd>
 Sets whether the slideshow will start automatically

 Default true
 Accept false

 Example $('.box_skitter_large').skitter({ auto_play: false; });
 </dd>

 </dl>
 <dl>
 <dt>controls</dt>
 <dd>

 Option play/pause manually
 Default false

 Accept true, false
 Example $('.box_skitter_large').skitter({controls: true});

 </dd>
 </dl>
 <dl>
 <dt>controls_position</dt>

 <dd>
 Position of button controls
 Default center

 Accept center, leftTop, rightTop, leftBottom, rightBottom
 Example $('.box_skitter_large').skitter({controls_position: 'rightBottom'});

 </dd>
 </dl>
 <dl>

 <dt>dots</dt>
 <dd>
 Navigation with dots
 Default false

 Accept true, false

 Example $('.box_skitter_large').skitter({dots: true});
 </dd>
 </dl>
 <dl>
 <dt>easing_default</dt>

 <dd>

 Easing default
 Default null
 Accept null, ease type
 Example $('.box_skitter_large').skitter({easing_default: 'easeOutBack'});

 </dd>
 </dl>
 <dl>
 <dt>enable_navigation_keys</dt>
 <dd>
 Enable navigation keys
 Default false

 Accept true, false
 Example $('.box_skitter_large').skitter({enable_navigation_keys: true});
 </dd>
 </dl>
 <dl>

 <dt>focus</dt>

 <dd>
 Focus slideshow
 Default false
 Accept true, false

 Example $('.box_skitter_large').skitter({focus: true});

 </dd>
 </dl>
 <dl>
 <dt>focus_position</dt>
 <dd>

 Position of button focus slideshow
 Default center

 Accept center, leftTop, rightTop, leftBottom, rightBottom
 Example $('.box_skitter_large').skitter({focus_position: 'leftTop'});

 </dd>
 </dl>
 <dl>
 <dt>fullscreen</dt>

 <dd>
 Fullscreen mode
 Default false

 Accept true, false
 Example $('.box_skitter_large').skitter({fullscreen: true});

 </dd>
 </dl>
 <dl>

 <dt>hideTools</dt>
 <dd>
 Hide numbers and navigation
 Default false

 Accept true, false

 Example $('.box_skitter_large').skitter({hideTools: true});
 </dd>
 </dl>
 <dl>
 <dt>interval</dt>

 <dd>

 Interval between transitions
 Default 2500
 Accept integer
 Example $('.box_skitter_large').skitter({interval: 3000});

 </dd>
 </dl>
 <dl>
 <dt>label</dt>
 <dd>
 Label display
 Default true

 Accept true, false
 Example $('.box_skitter_large').skitter({label: false});
 </dd>
 </dl>
 <dl>

 <dt>mouseOutButton</dt>

 <dd>
 Function call to go out the navigation buttons
 Default function() { $(this).stop().animate({opacity:0.5}, 200); }
 Accept function() { $(this).stop().animate({opacity:0.2}, 500); }

 Example $('.box_skitter_large').skitter({ mouseOutButton: function() { $(this).stop().animate({opacity:0.2}, 500); });

 </dd>
 </dl>
 <dl>
 <dt>mouseOverButton</dt>
 <dd>

 Function call to go over the navigation buttons
 Default function() { $(this).stop().animate({opacity:0.5}, 200); }

 Accept function() { $(this).stop().animate({opacity:0.2}, 500); }
 Example $('.box_skitter_large').skitter({ mouseOverButton: function() { $(this).stop().animate({opacity:0.2}, 500); });

 </dd>
 </dl>
 <dl>
 <dt>navigation</dt>

 <dd>
 Navigation display
 Default true

 Accept true, false
 Example $('.box_skitter_large').skitter({navigation: false});

 </dd>
 </dl>
 <dl>

 <dt>numbers</dt>
 <dd>
 Numbers display
 Default true

 Accept true, false

 Example $('.box_skitter_large').skitter({numbers: false});
 </dd>
 </dl>
 <dl>
 <dt>numbers_align</dt>

 <dd>

 Alignment of numbers/dots/thumbs
 Default left
 Accept center, left, right
 Example $('.box_skitter_large').skitter({numbers_align: 'center'});

 </dd>
 </dl>
 <dl>
 <dt>onLoad</dt>
 <dd>
 Callback
 Default null

 Accept null, function
 Example $('.box_skitter_large').skitter({onLoad: function(self) { console.log(self.settings.animation); } });
 </dd>
 </dl>
 <dl>

 <dt>preview</dt>

 <dd>
 Preview with dots
 Default false
 Accept true, false

 Example $('.box_skitter_large').skitter({dots: true, preview: true});

 </dd>
 </dl>
 <dl>
 <dt>show_randomly</dt>
 <dd>

 Randomly sliders
 Default false

 Accept true, false
 Example $('.box_skitter_large').skitter({show_randomly: true});

 </dd>
 </dl>
 <dl>
 <dt>stop_over</dt>

 <dd>
 Stop animation to move mouse over it.
 Default true

 Accept false
 Example $('.box_skitter_large').skitter({ stop_over: false; });

 </dd>
 </dl>
 <dl>

 <dt>thumbs</dt>
 <dd>
 Navigation with thumbs
 Default false

 Accept true, false

 Example $('.box_skitter_large').skitter({thumbs: true});
 </dd>
 </dl>
 <dl>
 <dt>velocity</dt>

 <dd>

 Velocity of animation
 Default 1
 Accept 0 to 2 (float)
 Example $('.box_skitter_large').skitter({velocity: 0.5});

 </dd>
 </dl>
 <dl>
 <dt>width_label</dt>
 <dd>
 Width label
 Default null

 Accept css property (300px, auto)
 Example $('.box_skitter_large').skitter({width_label: '300px'});
 </dd>

Тэги: design, photo

Блограйдеров
14496

Блогов
219913
(+0 сегодня)

Сообществ
1309
(+0 сегодня)

ЖЖ все стерпит
по количеству голосов (152) в категории «Истории»

Категория «Печатные издания»

Взлеты Топ 5


+173	189	Feelov: Чужой Подход
+156	197	sunlike77
+127	238	Статьи и советы
+114	183	Тезисы от Djon Povtor(а)
+19	20	Борис Немцов

Падения Топ 5


-2	18	Журнал сообщества oblozka
-3	17	Евгений Шестаков
-3	2	Романы о любви
-3	10	Фрагменты
-4	16	alesadov

Загрузка...

BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.