[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: 3D Галерея (+ сканирование папки с Картинками)
Форум PHP программистов > Изображения
BIGGER_STAS
27.03.2011 - 21:11
Люди помогите пожалуйста! Есть Скрипт Галереи (Прикольной 3D), но там картнки надо в ручную прописывать,их адреса! Это не подходит! Этот скрипт на Java Script

Но вот еще есть один скриптик (на PHP) в нем идет сканирование папки с картинками и последующий вывод этих картинок!

Помогите объеденить 2 скрипта! Или может есть более простой способ,просто надо чтобы Галерея сама автоматом брала картинки из определенной папки!

Я тут первый раз! Как тут просто прикрепить 2 скрипта?!
m4a1fox
27.03.2011 - 23:39
BIGGER_STAS
лучше на php + MySQL.
BIGGER_STAS
28.03.2011 - 09:54
Лучше то лучше! Но мне бы надо этот прикольный 3D эффект,и как его перенести на php!
Rand
28.03.2011 - 13:01
Основной принцип - это формировать часть JS кода, где прописываются пути к картинкам динамически, при помощи PHP. Ещё один способ - это при помощи AJAX забирать массив с листингом директории сервера и на JS уже разбирать его.
BIGGER_STAS
28.03.2011 - 14:24
НЕ могли бы Вы помочь! А то это как то для меня сложновато!
Rand
28.03.2011 - 14:30
дайте ссылку на скрипт галереи, тогда возможно помогу
BIGGER_STAS
28.03.2011 - 15:20
Вот! Сама галерея - http://ruseller.com/lessons/les997/demo_997.zip

Rand
28.03.2011 - 16:16
Вот:
Свернутый текст
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3D галерея | Демонстрация для сайта RUSELLER.COM</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	html {
		overflow: hidden;
	}
	body {
		position: absolute;
		margin: 0px;
		padding: 0px;
		background: #eee;
		width: 100%;
		height: 100%;
		color: #fff;
		font-family: arial;
		font-size: 0.8em;
	}
	#screen {
		position: absolute;
		width: 100%;
		height: 100%;
		background: #000;
		overflow: hidden;
	}
	#screen img, canvas {
		position: absolute;
		left: -9999px;
		cursor: pointer;
        image-rendering: optimizeSpeed;

	}
	#screen .href {
		border: #FFF dotted 1px;
	}
	#screen .fog {
		position: absolute;
		background: #fff;
		opacity: 0.1;
		filter: alpha(opacity=10);
	}
	#command {
		position:absolute;
		left: 1em;
		top: 1em;
		width: 130px;
		z-index: 30000;
		background:#000;
		border: #000 solid 1em;
	}
	#bar {
		position:relative;
		left: 1em;
		top: 1em;
		height: 160px;
	}
	#bar .button {
		position: absolute;
		background: #222;
		width: 20px;
		height: 20px;
		cursor: pointer;
	}
	#bar .loaded {
		background: #666;
	}
	#bar .viewed {
		background: #fff;
	}
	#bar .selected {
		background: #f00;
	}
	#urlInfo {
		position: absolute;
		background: url(images/r.gif) no-repeat 0 4px;
		visibility: hidden;
		z-index: 30000;
		padding-left: 12px;
		cursor: pointer;
	}
</style>

<script type="text/javascript">
// =============================================================
//           ===== 3D галерея =====
// Автор: Gerard Ferrandez - April 5, 2010
// http://www.dhteumeuleu.com
// Лицензия для использования: CC-BY-NC
// Перевод: команда сайта RUSELLER.COM
// =============================================================

var m3D = function () {
	/* ---- Переменные ---- */
	var diapo = [],
		imb,
		scr,
		bar,
		selected,
		urlInfo,
		imagesPath = "images/",
		camera = {x:0, y:0, z:-650, s:0, fov: 500},
		nw = 0,
		nh = 0;
	/* ==== метод сдвоенной камеры ==== */
	camera.setTarget = function (c0, t1, p) {
		if (Math.abs(t1 - c0) > .1) {
			camera.s = 1;
			camera.p = 0;
			camera.d = t1 - c0;
			if (p) {
				camera.d *= 2;
				camera.p = 9;
			}
		}
	}
	camera.tween = function (v) {
		if (camera.s != 0) {
			camera.p += camera.s;
			camera[v] += camera.d * camera.p * .01;
			if (camera.p == 10) camera.s = -1;
			else if (camera.p == 0) camera.s = 0;
		}
		return camera.s;
	}
	/* ==== Конструктор diapo ==== */
	var Diapo = function (n, img, x, y, z) {
		if (img) {
			this.url = img.url;
			this.title = img.title;
			this.color = img.color;
			this.isLoaded = false;
			if (document.createElement("canvas").getContext) {
				/* ---- используем элемент canvas вместо изображения (трюк для производительности) ---- */
				this.srcImg = new Image();
				this.srcImg.src = imagesPath + img.src;
				this.img = document.createElement("canvas");
				this.canvas = true;
				scr.appendChild(this.img);
			} else {
				/* ---- обычное изображение ---- */
				this.img = document.createElement('img');
				this.img.src = imagesPath + img.src;
				scr.appendChild(this.img);
			}
			/* ---- обработка событие onclick ---- */
			this.img.onclick = function () {
				if (camera.s) return;
				if (this.diapo.isLoaded) {
					if (this.diapo.urlActive) {
						/* ---- гиперссылка для перехода ---- */
						top.location.href = this.diapo.url;
					} else {
						/* ---- позиционирование цели ---- */
						camera.tz = this.diapo.z - camera.fov;
						camera.tx = this.diapo.x;
						camera.ty = this.diapo.y;
						/* ---- disable previously selected img ---- */
						if (selected) {
							selected.but.className = "button viewed";
							selected.img.className = "";
							selected.img.style.cursor = "pointer";
							selected.urlActive = false;
							urlInfo.style.visibility = "hidden";
						}
						/* ---- выбираем текущее изображение ---- */
						this.diapo.but.className = "button selected";
						interpolation(false);
						selected = this.diapo;
					}
				}
			}
			/* ---- кнопки панели управления ---- */
			this.but = document.createElement('div');
			this.but.className = "button";
			bar.appendChild(this.but);
			this.but.diapo = this;
			this.but.style.left = Math.round((this.but.offsetWidth  * 1.2) * (n % 4)) + 'px';
			this.but.style.top  = Math.round((this.but.offsetHeight * 1.2) * Math.floor(n / 4)) + 'px';
			this.but.onclick = this.img.onclick;
			imb = this.img;
			this.img.diapo = this;
			this.zi = 25000;
		} else {
			/* ---- прозрачный элемент div ---- */
			this.img = document.createElement('div');
			this.isLoaded = true;
			this.img.className = "fog";
			scr.appendChild(this.img);
			this.w = 300;
			this.h = 300;
			this.zi = 15000;
		}
		/* ---- перменные объекта ---- */
		this.x = x;
		this.y = y;
		this.z = z;
		this.css = this.img.style;
	}
	/* ==== основная 3D анимация ==== */
	Diapo.prototype.anim = function () {
		if (this.isLoaded) {
			/* ---- от 3D к 2D проекции ---- */
			var x = this.x - camera.x;
			var y = this.y - camera.y;
			var z = this.z - camera.z;
			if (z < 20) z += 5000;
			var p = camera.fov / z;
			var w = this.w * p;
			var h = this.h * p;
			/* ---- рисуем HTML  ---- */
			this.css.left   = Math.round(nw + x * p - w * .5) + 'px';
			this.css.top    = Math.round(nh + y * p - h * .5) + 'px';
			this.css.width  = Math.round(w) + 'px';
			this.css.height = Math.round(h) + 'px';
			this.css.zIndex = this.zi - Math.round(z);
		} else {
			/* ---- изображение загружено? ---- */
			this.isLoaded = this.loading();
		}
	}
	/* ==== инициализация при загрузке ==== */
	Diapo.prototype.loading = function () {
		if ((this.canvas && this.srcImg.complete) || this.img.complete) {
			if (this.canvas) {
				/* ---- версия с элементом canvas ---- */
				this.w = this.srcImg.width;
				this.h = this.srcImg.height;
				this.img.width = this.w;
				this.img.height = this.h;
				var context = this.img.getContext("2d");
				context.drawImage(this.srcImg, 0, 0, this.w, this.h);
			} else {
				/* ---- версия с обычным изображением ---- */
				this.w = this.img.width;
				this.h = this.img.height;
			}
			/* ---- кнопка загружена ---- */
			this.but.className += " loaded";
			return true;
		}
		return false;
	}
	////////////////////////////////////////////////////////////////////////////
	/* ==== размеры экрана ==== */
	var resize = function () {
		nw = scr.offsetWidth * .5;
		nh = scr.offsetHeight * .5;
	}
	/* ==== отключаем интерполяцию во время анимации ==== */
	var interpolation = function (bicubic) {
		var i = 0, o;
		while( o = diapo[i++] ) {
			if (o.but) {
				o.css.msInterpolationMode = bicubic ? 'bicubic' : 'nearest-neighbor'; // makes IE8 happy
				o.css.imageRendering = bicubic ? 'optimizeQuality' : 'optimizeSpeed'; // does not really work...
			}
		}
	}
	/* ==== скрипт инициализации ==== */
	var init = function (data) {
		/* ---- контейнеры ---- */
		scr = document.getElementById("screen");
		bar = document.getElementById("bar");
		urlInfo = document.getElementById("urlInfo");
		resize();
		/* ---- загрузка изображений ---- */
		var i = 0,
		    o,
			n = data.length;
		while( o = data[i++] ) {
			/* ---- изображения ---- */
			var x = 1000 * ((i % 4) - 1.5);
			var y = Math.round(Math.random() * 4000) - 2000;
			var z = i * (5000 / n);
			diapo.push( new Diapo(i - 1, o, x, y, z));
			/* ---- прозрачные рамки ---- */
			var k = diapo.length - 1;
			for (var j = 0; j < 3; j++) {
				var x = Math.round(Math.random() * 4000) - 2000;
				var y = Math.round(Math.random() * 4000) - 2000;
				diapo.push( new Diapo(k, null, x, y, z + 100));
			}
		}
		/* ---- запуск движка ---- */
		run();
	}
	////////////////////////////////////////////////////////////////////////////
	/* ==== основной цикл ==== */
	var run = function () {
		/* ---- пермещение по оси x ---- */
		if (camera.tx) {

			if (!camera.s) camera.setTarget(camera.x, camera.tx);
			var m = camera.tween('x');
			if (!m) camera.tx = 0;
		/* ---- перемещение по оси y ---- */
		} else if (camera.ty) {
			if (!camera.s) camera.setTarget(camera.y, camera.ty);
			var m = camera.tween('y');
			if (!m) camera.ty = 0;
		/* ---- перемещение по оси z ---- */
		} else if (camera.tz) {
			if (!camera.s) camera.setTarget(camera.z, camera.tz);
			var m = camera.tween('z');
			if (!m) {
				/* ---- конец анимации ---- */
				camera.tz = 0;
				interpolation(true);
				/* ---- активируем гиперссылку ---- */
				if (selected.url) {
					selected.img.style.cursor = "pointer";
					selected.urlActive = true;
					selected.img.className = "href";
					urlInfo.diapo = selected;
					urlInfo.onclick = selected.img.onclick;
					urlInfo.innerHTML = selected.title || selected.url;
					urlInfo.style.visibility = "visible";
					urlInfo.style.color = selected.color || "#fff";
					urlInfo.style.top = Math.round(selected.img.offsetTop + selected.img.offsetHeight - urlInfo.offsetHeight - 5) + "px";
					urlInfo.style.left = Math.round(selected.img.offsetLeft + selected.img.offsetWidth - urlInfo.offsetWidth - 5) + "px";
				} else {
					selected.img.style.cursor = "default";
				}
			}
		}
		/* ---- анимация изображения ---- */
		var i = 0, o;
		while( o = diapo[i++] ) o.anim();
		/* ---- цикл ---- */
		setTimeout(run, 32);
	}
	return {
		////////////////////////////////////////////////////////////////////////////
		/* ==== скрипт инициализации ==== */
		init : init
	}
}();

</script>
</head>

<body>
<div id="screen">
	<div id="command">
		<h1>3D галерея</h1>
		<div id="bar"></div>
	</div>
	<div id="urlInfo"></div>
</div>

<script type="text/javascript">
/* ==== запуск скрипта ==== */
setTimeout(function() {
	m3D.init(
		[<?php include 'imagelist.php';?>]
	);
}, 500);
</script>
</body>
</html>

imagelist.php
<?php
$path = 'images';
$ext = array('jpg', 'jpeg', 'png', 'bmp');

if(is_dir($path)) {

    $d = opendir($path);
    while($file = readdir($d)) {
        if($file != '.' && $file != '..' && in_array(pathinfo($file, PATHINFO_EXTENSION), $ext)) {
            $files[] = $file;
        }
    }
    closedir($d);

    foreach ($files as $filename) {
        echo "{ src: '".$filename."' },";
    }

}

?>

Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.