Поточний час:
Сьогодні 18 лютого, неділя 2018 рік
Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 3 роки 1 місяць 30 днів

Ваш ip адрес:54.92.197.82

Добрий вечір!
Ви обновили сторінку в 19 : 35
Статистика

Кількість публікацій на блозі: 373
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 17
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

zura-blog galery_sammerПривіт всім відвідувачам Zura — Blog, продовжую викладати матеріали які стосуються різних корисних ефектів для сайту,  більшість з яких, ще можна назвати цікавими.  

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

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

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

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

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

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

Чому тоді не вдалось зробити, бо тоді лише починав засвоювати веб дизайн, і багато чого було не зрозуміло, а зараз швидко і досить легко все в мене получилось,  дальше я постараюсь описати як створити такий ефект, щоб було зрозуміло навіть тому, хто лише приступає до вивчення веб дизайну.

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

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

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

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

Ну а якщо ви саме хочите створити галерею і з невеликою кількістю графічних файлів, то думаю саме галерея з “безкінцевою прокруткою”, буде дуже хорошим варіантом,  щоб фотографії в галереї прокручувались і не закінчуватись, вважаю що дуже класний варіант.


user_97

Демнонстрація галереї


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

Ітак, які потрібні папки і файли, створюємо дві нові папки, називаемо “img” “tumb”, в цих папках мають знаходитись графічні файли, або фото, розширення jpg. Файлів повино бути в одинаковій кількості, як в одній так і в іншій папці. Якщо в котрійсь папці буде більше, то це відобразиться зразу, і сторінка з галереєю буде відображатись з  дифектом.

Тому вставляємо в папку “img”, і в папку “tamb”, одні і тіж за назвою фото файли, і щоб файлів була одинакова кількість в папках.

Далі приступаємо до створення трьох файлів, файли з різними розширеннями, це (рнр ccs і html).

Файл getImages.phр

<?php

	$dir = "thumb";
	if(is_dir($dir)){
		if($dd = opendir($dir)){
			while (($f = readdir($dd)) !== false)
				if($f != "." && $f != "..")
					$files[] = $f;
			closedir($dd);
		} 

	$n = $_GET["n"];
	$response = "";
		for($i = $n; $i<$n+9; $i++){
			$response = $response.$files[$i%count($files)].';';
		}
		echo $response;
	}
?>

що потрібно зробити, щоб створити такий файл, відкрити веб редактор, звісно що можна і в “Блокноті”, але краще користуватись веб редакторами. Скопіювати код і вставити в файл, далі зберегти код, саме з розширенням рнр,  назва файлу повинна бути “getImage”.

Звісно що ви можите і по свому назвати файл, тоді прийдеться міняти назву в кодах.

Код файлу рнр, складається з двадцяти рядків, розбирати щось в коді немає потреби, оскільки навіть якщо ви будите міняти назви файлів, то в рнр коді зміни робити не  потрібно. Хіба що вас не влаштує назва папки “tumb”, тоді таку назву потрібно буде поміняти в коді рнр,  в першому рядку.

$dir=”tumb”;

Наступний файл index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Вэб галерея з бескінцевою прокруткою | Zura - Blog</title>
<link rel="stylesheet" href="style.css" />
</head>

<body onload="setInterval('scroll();', 250);">
<div id="header">Вэб галерея з бескінцевою прокруткою</div>
<div id="container">
	<a href="img/1.jpg"><img src="thumb/1.jpg" /></a>
    <a href="img/2.jpg"><img src="thumb/2.jpg" /></a>
    <a href="img/3.jpg"><img src="thumb/3.jpg" /></a><br />
    <a href="img/4.jpg"><img src="thumb/4.jpg" /></a>
    <a href="img/5.jpg"><img src="thumb/5.jpg" /></a>
    <a href="img/6.jpg"><img src="thumb/6.jpg" /></a><br />
    <a href="img/7.jpg"><img src="thumb/7.jpg" /></a>
    <a href="img/8.jpg"><img src="thumb/8.jpg" /></a>
    <a href="img/9.jpg"><img src="thumb/9.jpg" /></a>
    <a href="img/10.jpg"><img src="thumb/10.jpg" /></a>
	<a href="img/11.jpg"><img src="thumb/11.jpg" /></a>
    <p>Останнє зображення| <a href="#header">Вгору</a></p>
    <br />
    <hr />
</div>
</body>
</html>
<script>
var contentHeight = 800;
var pageHeight = document.documentElement.clientHeight;
var scrollPosition;
var n = 10;
var xmlhttp;

function putImages(){

	if (xmlhttp.readyState==4)
	  {
		  if(xmlhttp.responseText){
			 var resp = xmlhttp.responseText.replace("\r\n", "");
			 var files = resp.split(";");
			  var j = 0;
			  for(i=0; i<files.length; i++){
				  if(files[i] != ""){
					 document.getElementById("container").innerHTML += '<a href="img/'+files[i]+'"><img src="thumb/'+files[i]+'" /></a>';
					 j++;

					 if(j == 3 || j == 6)
						  document.getElementById("container").innerHTML += '<br />';
					  else if(j == 9){
						  document.getElementById("container").innerHTML += '<p>'+(n-1)+" Images Displayed | <a href='#header'>top</a></p><br /><hr />";
						  j = 0;
					  }
				  }
			  }
		  }
	  }
}

function scroll(){

	if(navigator.appName == "Microsoft Internet Explorer")
		scrollPosition = document.documentElement.scrollTop;
	else
		scrollPosition = window.pageYOffset;		

	if((contentHeight - pageHeight - scrollPosition) < 500){

		if(window.XMLHttpRequest)
			xmlhttp = new XMLHttpRequest();
		else
			if(window.ActiveXObject)
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			else
				alert ("вибачте! ваш браузер не підтримує XMLHTTP!");		  

		var url="getImages.php?n="+n;

		xmlhttp.open("GET",url,true);
		xmlhttp.send();

		n += 9;
		xmlhttp.onreadystatechange=putImages;
		contentHeight += 800;
	}
}

</script>

тут звісно що зміни можливі, це назви ваших фотографій, їх потрібно вказати в кодах html сторінки, в блоці div “container”, або просто переіменуйте назви ваших фото на назви що вказані в рядках 12—20.

<div id=”container”>
<a href=”img/1.jpg”><img src=”thumb/1.jpg” /></a>
<a href=”img/2.jpg”><img src=”thumb/2.jpg” /></a>
<a href=”img/3.jpg”><img src=”thumb/3.jpg” /></a><br />
<a href=”img/4.jpg”><img src=”thumb/4.jpg” /></a>
<a href=”img/5.jpg”><img src=”thumb/5.jpg” /></a>
<a href=”img/6.jpg”><img src=”thumb/6.jpg” /></a><br />
<a href=”img/7.jpg”><img src=”thumb/8.jpg” /></a>
<a href=”img/9.jpg”><img src=”thumb/9.jpg” /></a>
<a href=”img/10.jpg”><img src=”thumb/10.jpg” /></a>
<a href=”img/11.jpg”><img src=”thumb/11.jpg” /></a>
<p>Останнє зображення| <a href=”#header”>Вгору</a></p>
<br />
<hr />
</div>

Наступним  в кодах файлe  index.htm  скрипт JavaScript,

звісно що нічого не міняємо, кого не влаштує назва рнр файлу “getImage”, тоді мусите поміняти  на вашу назву в сімдесять восьмому рядку.

var url = “getImages.php?n=”+n;

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

<p>Останнє зображення| <a href=”#header”>Вгору</a></p>

zura-blog galery_sammer4

 Ну і все, далі також копіюємо наступний код нижче, і створюємо третій файл з розширенням  ccs.

Наступний файл style.ccs

@charset "utf-8";
/* CSS */

body{
	background:#222;
	color:#666;
}

#header{
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	font-weight:bold;
	text-align:left;
	text-indent:35px;
	margin: 0 auto;
	width:800px;
	margin-bottom:10px;
}

hr{
	margin: 20px;
	border:none;
	border-top: 1px solid #111;
	border-bottom: 1px solid #333;
}

p{
	color:#444;
	text-align:left;
	font-size:10px;
	margin-left: 20px;
	margin-bottom: -10px;
}

a{
	color:#444;
}

#container{
	margin: 0 auto;
	width:800px;
	border:1px solid #333;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	font-family:Verdana, Geneva, sans-serif;
	text-align:center;
}

img{
	border:10px solid #444;
	-moz-border-radius: 5px;
	-webkit-border-radius: 10px;
	margin: 15px;
}

img:hover{
	border-color:#555;
	-moz-box-shadow: 0px 0px 15px #111;
	-webkit-box-shadow: 0px 0px 15px #111;
}

Отож у вас має бути в наявності після всіх вище перерахованих процедур, дві папки і три файли, з різними розширеннями рнр, html, ccs.

zura-blog galery_sammer1

розширення рнр, html, ccs.

Далі щоб перевірити результат, обовязково повинен бути встановлений локальний сервер на компютері. В кого відсутній, тоді потрібно знайти в мережі, скачати пакет програм від Denver або Endels, і встановити за допомогою одного з цих пакетів локальний сервер.

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

В папці створити дві папки з  назвою “img” “tumb”, в цих папках розмістити потрібні фотографії, створити три файли з розширенням рнр. html. ccs. Скопіювати коди, і вставити в файли, файли зберегти з  відповідними назвами (getIages.php, index.html, style.css ).

Запустити локальний сервер, і насолоджуватись результатом.

Все до зустрічі !


На відео показано як створти фотогалерею з бескінцевою прокруткою, такий ефект для сайту, кожен з вас може легко створити для своїх проектів.

Leave a Reply

Your email address will not be published. Required fields are marked *