^^


ЗИМОВА КАЗКА
Жила-була Зима. У хорошій хатинці, з крижаним підлогою, морозною візерунковою стелею, і розмальованими вікнами. Хата ця стояла в дрімучому лісі. Якось так виходило, що влітку ні хати, ні Зими ніхто не бачив. А в морозний час — все ніби було на місці. І будинок, і господиня його. І ось одного разу, коли господиня Зима робила з білих сніжків повітряний торт, вона побачила на порозі свого будинку дівчинку. В ліс дівчинка прийшла разом зі своїм дідусем; вони вибирали найкрасивішу ялинку на Новий Рік. Господиня Зима дала їм свої снігові сани, і вони вирушили додому.

З повагою, адміністрація сайту
2008-2018
СТВОРЮЄМО САЙТИ НА ЗАМОВЛЕННЯ
ДЛЯ ЮРИДИЧНИХ ТА ФІЗИЧНИХ ОСІБ
ЗАРОБЛЯЙТЕ ГРОШІ ТУТ
Випадковий блок новин
Інформаційно-освітній сайт (Категорія: Персональні сайти)
Миру, добра та здоров′я Вам та всій Україні.
Для перегляду всіх матеріалів і скачування файлів зареєструйтеся на сайті. Відвідайте форум та пограйте on-line ігри. Чекаємо відгуків у гостьовій книзі.(Інформація і технології, освіта, караоке, поезія, фізика, еротика.) Зареєстрованим-повний доступ!!! Розкажіть про наш сайт вашим друзям. Подайте своє оголошення. Приємного відпочинку.
Україна
• Життя — це не те, чого ми хочемо. Це те, чого хоче його Творець.
• Коли множаться закони і накази, росте число злодіїв і розбійників (Лаоцзи)


Фотогалерея з використанням технології Colorbox

Colorbox - налаштування

Давайте ж розглянемо плагін Jquery Colorbox і дізнаємося, як його налаштовувати. Цей плагін для збільшення зображення при натисканні, досить простий і зручною, є альтернативою плагінів Lightbox і fancybox c можливістю створення галереї та слайдшоу.

Установка і настройка Colorbox

1. Підключимо стилі і скрипти плагіна , додавши в head наступне.

<link rel="stylesheet" type="text/css" href="css/colorbox.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>

Перевірте шляхb, що вище описані, і якщо файли розташовані від кореня, то пишем, наприклад site.uа/js/jquery.colorbox-min.js.

2. Щоб включити плагін , додайте в кінці сайту наступний код, скрипт буде працювати, якщо буде розміщений після виведення картинок, які будуть використовувати Colorbox.

<script>
jQuery("a.сolorbox").colorbox();
</script>

Якщо хочете додати код в будь-якому місці, то використайте наступний запис:

<script>
$(document).ready(function(){
 jQuery("a.colorbox").colorbox();
});
</script>

3. Рoбота скрипта. Якщо ви використовували ідентичний код вище, то виклик плагіна буде наступний:

<a class="colorbox" href="image.jpg">Тут може бути текст або картинка</a>

Суть в наступному - ми створюємо посилання в якому посилаємося на картинку, яку будемо викликати, в змісті посилання ми можемо використовувати простий текст або зображення. Застосовуватися скрипт можна до посилань з класом "colorbox", ви можете зробити інший клас або прибрати його взагалі, щоб плагін працював на всіх картинках. приклад:

Для всіх посилань:

<script>
jQuery("a.сolorbox").colorbox();
</script>

Для всіх посилань з певним класом:

<script>
jQuery("a.nash_class").colorbox();
</script>

Для групових посилань з певним класом:

<script>
jQuery(".group1").colorbox({ rel:'group1' });
</script>

Параметри і настройки Colorbox

Назва параметраОписЗначення за замовчуванням
transition Эфект переходу "elastic", "fade", "none"
speed Швидкість переходу в мс 350
href Використовується для визначення альтернативного url false
title Перевизначення заголовка (за замовчуванням береться з title) false
rel Визначення груп, nofollow - скасовує груповання false
width Зовнішня ширина вікна (+ бордюр і навігація) false
height Зовнішня висота вікна (+ бордюр і навігація) false
innerWidth Ширина зображення false
innerHeight Висота зображення false
initialWidth Початкова ширина вікна 300
initialHeight Початкова висота вікна 100
maxWidth Максимальна ширина контенту false
maxHeight Максимальна висота контенту false
scalePhotos Розтягне фото до розмірів, зазначених в параметрах maxWidth, maxheight, innerWidth, innerHeight, width, height true
scrolling При значенні false обріже "зайвий" контент, інакше покаже скрол true
iframe При значенні true, контент буде завантажений в iframe false
inline Якщо стоїть true, можна використовувати jQuery селектори для виведення контенту з поточної сторінки: jQuery("#inline").colorbox({inline:true, href:"#myForm"}); false
html Можна виводити дані, не підвантажкючи: jQuery.colorbox({html:'

Hello

'});
false
photo "Змусити" плагін сприймати всі файли даних як зображення (у випадках, якщо url має вид: photo.jpg#1, photo.jpg?pic=1 або photo.php) false
opacity рівень прозорості фону 0.85
open при значенні true, colorBox автоматично відкриє вікно false
preloading Якщо використовують групи даних, дозволяє довантажити наступні і попередні дані true
overlayClose закриття вікна при натисканні на оверлеї true
returnFocus при закритті colorBox поверне фокус на попередній елемент true
escKey дозволяє / забороняє закриття colorBox по клавіші esc true
arrowKey дозволяє / забороняє перемикання між слайдами стрілками вправо і вліво true
loop кругової перегляд true
slideshow якщо встановити в true - створить слайд-шоу для групи false
slideshowSpeed Швидкість зміни кадрів в слайд-шоу 2500
slideshowAuto Автозапуск слайд-шоу true
current Шаблон виводу лічильника даних в групі «image {current} of {total}»
slideshowStart Текст для кнопки запуску слайд-шоу «start slideshow»
slideshowStop Текст для кнопки зупинки слайд-шоу «stop slideshow»
previous Текст для кнопки "назад" «previous»
next Текст для кнопки "вперед" «next»
close Текст для кнопки "закрити" «close»
onOpen Подія перед відкриттям вікна false
onLoad Подія перед завантаженням даних false
onComplete Подія після закінчення завантаження даних false
onCleanup Подія перед закриттям вікна false
onClosed Подія після закриття вікна false

Ось невеликий приклад виклику colorbox з нашими настройками, які ми взяли з таблиці.

<script type="text/javascript">
jQuery("a.colorbox").colorbox({
			width: 900,
			height: 400,
			opacity: 0.1
		 });

МетодОписПриклад
$.colorbox() Викличе colorBox без прив'язки до вибраного елементу. $.colorbox({href:'login.php'})
$.colorbox.close() Закриття вікна. Раніше буде викликано подію cbox_closed $.colorbox.close()
$.colorbox.element() Поверне jQuery-об'єкт, для якого викликалиcolorBox var $element = $.colorbox.element();
$.colorbox.resize() Викликається вручну для перерахунку розмірів вмісту вікна $.colorbox.resize()
$.colorbox.next(), $.colorbox.prev() Примусова зміна слайда $.colorbox.next(), $.colorbox.prev()
$.colorbox.init() Примусова ініціалізація $.colorbox.init()
$.colorbox.remove() Відключення colorBox на сторінці $.colorbox.remove()

Фотогалерея з використанням технології Colorbox

Еластичний перехід

Затемнений перехід

{gcontent}

Немає переходу + фіксована ширина та висота (75% від розміру екрана)

Слайд-шоу

{/gcontent}

Інші Tипи

У фреймі веб-сторінка (Iframe)

Виліт тексту HTML

Сітківка зображень

ФОТО52 ФОТО53 ФОТО54

Цe приклад використання плагіна colorbox на цій сторінці.

 

  • Бібліотека Jquery останньої версії c офіційного сайту, Завантажити
  • Завантажити сам плагін Colorbox з офіційного сайту, Завантажити

 

Натисніть кнопку, ОК!

Опубліковано: 04.11.2017              
Оцінка(0) Переглядів: 62
Категорія: • Мультимедіа •  Оцінити цю статтю: 
Всього коментарів: 0
Наші хіти: Статті ●Календар дат та подій (5710)● ●СОЛОНЕ ТІСТО. ЛІПЛЕННЯ. (4500)● ●Шукаю роботу (2469)● ●Короткий астрономічний календар на 2018 рік (2419)● ●Цікаві сайти та корисні посилання (2393)● ●прошивка тв-тюнера (2040)● ●Ігри на роздягання. (1944)● ●Ідеал українського виховання (1829)● ●Список безкоштовних конструкторів сайтів. Зробити сайт безкоштовно (1729)● ●Як зробити сайт популярним? (1641)● ●МОВНІ ЗАГАДКИ (1626)● Матеріали ●Математичні головоломки (4283)● Публікації ●Пояс Койпера і Хмара Оорта (4198)● ●Українські обереги (легенди) (3740)● ●ОПОРНИЙ КОНСПЕКТ ЛЕКЦІЙ з МАЛЮВАННЯ (2850)● ●Періодична система хімічних елементів Д.І.Менделєєва (2203)● Сторінки ●Навігаційна сторінка (110071)● ●Головна (107889)● ●ХРИСТОС ВОСКРЕС (7759)● ●Гороскопи (2293)● ●Логічні ігри (2235)● ●Фізика і інформатика (2219)● ●Стрілялки (2209)● ●Еротичні ігри (2148)● ●З Новим Роком (2119)● ●Тести iq (2116)● ●Тести iq (продовження) (2106)● ●Різдво Христове (2097)● ●Фотоанонси (2022)● Новини ●СКРИПТИ ДЛЯ САЙТУ (1521)●



Життя кожної людини – це шлях до самої себе

Надіємось на кращий 2018 рік.
Вітаємо всіх відвідувачів сайту і

бажаємо мирного неба та гарного відпочинку.
(Адміністрація сайту)

НАШ САЙТ БЕЗ РЕКЛАМИ!!! 

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

• Нашатирний спирт застосовують, щоб: а) освіжити замшеві туфлі, протерши їх ганчіркою, змоченою у воді з додаванням нашатирю, а потім почистивши їх гумовою щіткою; б) очистити комір піджака; швидко вивести пляму від йоду; в) відбілити при кип’ятінні білизну, взявши столову ложку нашатирю на 10 літрів води; г) почистити нікель і срібло, протерши їх вовняною ганчіркою, змоченою в нашатирі.
• Щоб випрана білизна не замерзала в холодні зимові дні, полоскайте її в солоній воді.
Підтримайте нас, розмістивши нашу кнопку в себе на сайті. Код:
Жарти, анекдоти, висловлювання

Новини сайту
Несвічівськa ЗОШ Відео.
Випускниця Несвічівської ЗОШ Муха Юлія - чемпіонка Європи 2016 та 2017 року з армреслінгу серед юніорів!!! Відео. ...
час 25.05.2017 / 16:51
Останні новини
ЛУЦЬК УНІВЕРСИТЕТ Факультет інформаційних систем, фізики та математики. Рік заснування: 2015. Історично факультет заснований у 1
час 01.09.2016 / 19:22
Нове на сайті
Жовтень 2017 - стаття Глобальне потепління та ...молоко публікація Деякі окремі події та дати по днях місяцях та роках, С ...
час 27.10.2015 / 14:49
СКРИПТИ ДЛЯ САЙТУ
Тут представлені корисні скрипти для сторінок сайту. Ви можете їх скопіювати.
час 07.08.2015 / 15:00
Всі новини
Матеріали сайту
В'ячеслав Чорновіл: вислови та цитати
час 06.12.2017 / 16:01
Скоромовки
час 23.11.2017 / 00:37
Запаси металів у земній корі
час 22.11.2017 / 20:11
Про золото
час 21.11.2017 / 22:44
Реєстрація безкоштовного домена в зоні pp.ua
час 16.11.2017 / 13:54
Всі матеріали
Публікації
Найближчі зорі до Сонця
час 22.12.2017 / 00:32
Top 10 суперкомп'ютерів світу
час 30.11.2017 / 17:28
Електромобіль на сонячних батареях.
час 26.11.2017 / 17:03
Київ і Львів з висоти пташиного польоту
час 26.11.2017 / 11:28
ВНЗ України
час 25.11.2017 / 21:39
Всі публікації
Хто на сайті
Адміністратори: 0
Зареєстровані: 0
Гості: 6
Всього: 6
Список користувачів

Переглядів: 208326
Ваш IP: 54.82.29.141
Підтримайте проект фінансово, перевівши кошти на рахунок 4149497815835899
В цей день

Календар України

Поповнити мобільний

Опитування
Вам подобається наш сайт?
 Результати
Відповідей: 18
Коментарів: 0
Календар
Дата:
Фото
Сини
Ви користуєтесь броузером

При передруці та використанні матеріалів САЙТУ на інших ресурсах та публічному представленні, обов'язкове відкрите гіперпосилання на наш сайт (першоджерело) та дозвіл адміністрації.
Сайт працює на UACMS
Eл. почта: vlad1965vlad@ukr.net
Всі права захищені
Несвіч-Городище2-Посада
uacms 2008-2018 || Повідомити адміністрацію
Сторінка згенерована за 0,1025 сек. Шаблонізатор: 0,0012 сек. Інiціалізація ядра: 0,0092 сек. Пам'ять: 12,00М./.
БД: 16 запитів за 0,0050 сек. ( PHP: 95% БД: 5% )
К-сть відвідувачів по країнах.
Україна Google:05.01-00:47 Yahoo: Msn: Yandex: Rambler: Aport: Mail.Ru:
Персональний сайт Куриляка Владислава Едуардовича

Д
О
П
О
М
О
Г
А