Зараз обговорюють

"Тобто є ряд завдань, які взагалі без рекурсії не наважуються."  - це як розуміти? Перефразуй, будь ласка. 

виправив, йшлося про те що деякі завдання можна вирішити лише при використанні рекурсії

Спасибі дуже корисна стаття

А ще щось планується подібного найближчим часом?


Дякую за підтримку, радий що Вам сподобалось!

Так маю вже майже дороблений проект по управлінні Audio файлом, на заміну стандартним клавішам управління HTML5, але ще не встиг відтестувати програвання файлів з інтернету, поки лише локально працює

Надіюсь найближчим часом дороблю й закину

Рахунки

webmoneyeur - E385818210641
usd - Z304643423050
uah - U354026817492
rub - R301704373231easypay80002677bitcoin1F5HRGroUtEQW9HBNbeew8iKh5KQ8vJxzw

Зворотній зв'язок

Для покращення роботи сайту надсилайте свої зауваження:
mailЗауваження
mailПропозиція

Статистика

UkrNET - поисково-информационный ресурс

JavaScript : Створення переглядача зображень

Ми вже розглянули основні принципи та методи роботи із JS, то ж настав час використати отримані знання на практиці.

Приступимо до створення скрипту для перегляду зображень у модальному вікні.

Створення модального вікна

Визначення: У графічному інтерфейсі користувача модальним називається вікно, що блокує роботу користувача з батьківським застосунком доти, доки користувач це вікно не закриє.

HTML-код нашого вікна

<div id="imageBlock">
	<div id="imageView"> //
		<div id="curImg">
			<img id="imgLayer" src=""> //блок із зображенням
			<div class="changeImg" id="previous" onclick="changeImg(-1)"><span>‹</span></div> //стрілка вліво
			<div class="changeImg" id="next" onclick="changeImg(1)"><span>›</span></div> //стрілка вправо
		</div>
		<div class="imgDescription"><div id="alt-text"></div></div> //блок із описом зображення
	</div>
	<div id="closeCross" onclick="closeBlock()">✕</div> //блок із хрестиком для закриття вікна
</div>

CSS-код для нашого вікна

Якщо Ви вже вивчаєте JS то розбирати весь CSS в деталях не повинно бути необхідності:

#imageBlock{
	position: fixed; //закріпляємо вікно
	display: none; //приховуємо його за замовчуванням, управляти ним буде наш скрипт
	color: white;
	left: 0px;
	top: 0px;
	width:100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}
#imageView{
	width: 96%;
	height: 96%;
	margin-top: 1%;
	margin-left: 2%;
	vertical-align: middle;
}
#imageView, .imgDescription{
	background-color: black;
}
#curImg{
	height: 100%;
	width: 100%;
    position: relative;
	vertical-align: middle;
}
#curImg img{
	max-width: 100%;
	max-height: 100%;
	position: absolute;
    margin: auto;
    left: 0;
    bottom: 0;
}
.imgDescription{
	display: block;
	position: absolute;
    bottom: 2%;
	width: 96%;
	font-size: 20px;
	text-align: left;
	margin-bottom: -1px;
}
#alt-text{
	line-height: 2em;
	padding-left: 10px;
}
.changeImg{
	display: table;
	position: absolute;
	height:100%;
	width: 50%;
	color:white;
}
.changeImg, .imgDescription, #closeCross{
	opacity: 0.5;
}
.changeImg:hover, .imgDescription:hover, #closeCross:hover{
	cursor: pointer;
	opacity: 1;
}
.changeImg span{
	display: table-cell;
	vertical-align: middle;
	font-size: 90px;
}
#next, #closeCross, #curImg img{	
    top: 0;
    right: 0;
}
#previous span{
	text-align: left;
	padding-left: 15px;
}
#next span{
	text-align: right;
	padding-right: 15px;
}
#closeCross{
	position: absolute;
	width: 50px;
	padding: 5px 0px;
	text-align: center;
	margin-top: 1%;
	margin-right: 2%;
	font-size: 30px;
}

Скрипт для перегляду

Для використання даного скрипту Вам необхідно буде підключити бібліотеку jQyery

var imgArray = []; //масив із посиланнями на зображення
var altArray = []; //масив із описом зображень 
var curImg; //змінна для прийняття значення із поточним зображенням яке потрібно відображати
$(document).ready(function(){
	$('#block img').click(function(){ //функція для опрацювання кліку по зображенні у блоці #block
		imgArray=[]; //очищаємо масив
		altArray=[]; //очищаємо масив
		$(this).parent().find('img').each(function(){ //перебираємо усі зображення які знаходяться у блоці #block
			imgArray.push($(this).attr('src')); //наповнюємо масив посиланнями на наявні зображення
			altArray.push($(this).attr('alt')); //наповнюємо масив описом на наявні зображення
		});
		for(i = 0; i < imgArray.length; i++){
			if($(this).attr('src') == imgArray[i]){ //визначаємо поточне зображення на якому було натиснуто
				curImg = i;
			}
		}
		showImg(); //викликаємо функцію для відображення зображення в модальному вікні
	});
});
function showImg(){ //функція відображення даних
	$("#alt-text")[0].innerHTML = "(" + (curImg+1) + "/" + altArray.length + ") " + altArray[curImg]; //встановлюємо нумерацію зображень та його опис із атрибуту alt
	$("#imgLayer").attr('src', imgArray[curImg]); //встановлюємо посилання на поточне зображення
	$("#imageBlock")[0].style.display = "block"; //відображеємо модальне вікно із зображенням
}
function changeImg(step){ //функція для зміни зображень при перегляді
	if(step > 0){ //перевіряємо чи потрібно збільшити значення поточного зображення
		if((curImg + 1) < imgArray.length){
			curImg += 1; //зменшуємо значення поточного зображення
		}
		else{
			curImg=0; //зменшуємо значення поточного зображення
		}
	}
	if(step < 0){ //перевіряємо чи потрібно зменшити значення поточного зображення
		if((curImg - 1) >= 0){
			curImg -= 1; //зменшуємо значення поточного зображення
		}
		else{
			curImg=imgArray.length-1; //змінюємо значення поточного зображення на останнє значення масиву
		}
	}
	showImg(); //викликаємо функцію для відображення зображення в модальному вікні
}
function closeBlock(){ //функція закриття модального вікна
	$("#imageBlock")[0].style.display = "none"; //приховуємо модальне вікно
}

Архів із прикладом доступний за посиланнями:

Завантажити з Завантажити з


view566like0dislike0 avatard_l4w clock 2017-03-08 00:28

Коментарі:


asofix | 2017-04-07

Спасибі дуже корисна стаття

А ще щось планується подібного найближчим часом?


Notice: Undefined index: USER_ID in /storage/ssd1/871/7368871/public_html/page/comments/main.php on line 30
d_l4w | 2017-04-07

Дякую за підтримку, радий що Вам сподобалось!

Так маю вже майже дороблений проект по управлінні Audio файлом, на заміну стандартним клавішам управління HTML5, але ще не встиг відтестувати програвання файлів з інтернету, поки лише локально працює

Надіюсь найближчим часом дороблю й закину


Notice: Undefined index: USER_ID in /storage/ssd1/871/7368871/public_html/page/comments/main.php on line 30

Про нас

"Programmers World" розроблено з метою полегшення в освоєнні навичок програмування, та поширення матеріалів з сфери ІТ Українською мовою.

Кожен бажаючий може безкоштовно користуватися ресурсами сайту, щоб:

- Вивчати теоретичні аспекти мов програмування

- Переглядати практичне застосування теорії при виконанні різних міні проектів з відкритим кодом

- Розміщати свої завдання на форумі для допомоги в їх реалізації, або готового коду який може бути корисний іншим користувачам

- Спілкуватись з іншими користувачами та обмінюватись досвідом

Сайт функціонує на безопланій основі та ентузіазмі розробника, якщо Ви бажаєте долучитись до розвитку даного проекту то можете пожертвувати кошти на рахунки розміщені в блоці "Допомога сайту".

Сайт

Зареєстровані користувачі можуть скористатися системою діалогів, в профілі користувача, для отримання потрібної інформації. Написати!

Також Ви можете використати форми відправки Зауважень та Пропозицій.


Електронна пошта

Ви можете звертатись на нашу поштову скриньку site.programmersworld@gmail.com

www.000webhost.com