Вывести картинки из папки циклом php
- Главная»
- Уроки»
- PHP»
- Сканирование папки с изображениями (PHP)
- Метки урока:
- php
- изображения
- юзабилити
- разное
Представим, что вам нужно сделать страницу, на которой будут выводиться ваши последние работы. Очевидный способ – встроить изображения в код вашего документа. Явное последствие такого решения – каждый раз, когда нужно будет добавить новый пункт, вам придется вручную обновлять ваш HTML документ. Другой способ – хранить данные в базе MySQL и выводить их с помощью скрипта. Такой способ значительно лучше, но для многих сайтов он потребует использования гораздо больших мощностей от сайта, чем действительно нужно, не будем забывать также и о стоимости хостинга.
В таком случае лучшим решением будет создание сканера на PHP, который будет просматривать вашу папку с портфолио и динамически создавать код для страницы. Если нужно добавить новое изображение, то все что нужно – просто скопировать изображение и его миниатюру в соответствующие папки – все остальное сделает PHP!
Наша цель
Коротко обозначим, чего мы хотим добиться:
- Используем PHP для сканирования папки портфолио. Затем организуем цикл по списку файлов и каждое изображение выводим на страницу.
- Стили для содержимого будут задаваться в CSS.
- Когда пользователь нажимает на миниатюре, используем jQuery для загрузки большого изображения на основную панель.
- Если пользователь деактивировал Javascript, просто направлем его на новую страницу, которая содержит полноразмерное изображение
Как использовать
Добавление нового изображения в портфоли – очень простой процесс. Берем снимок веб сайта, брошюры, картинки и т.д, и изменяем его размер до значений 500px x 350px. Размещаем изображение в папку “images/featured”.
Затем, создаем миниатюру размером 50px x 50px. Помещаем ее в папку “images/tn”.
Внимательно следите за именами файла изображения и миниатюры – они должны быть ОДИНАКОВЫМИ.
Итоговый код HTML
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<title>Scanning Directories with PHP</title>
<script src=”js/jquery-1.2.6.pack.js” type=”text/javascript”></script>
<script src=”js/scripts.js” type=”text/javascript”></script>
<link href=”default.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”container”>
<h1>Some Portfolio</h1>
<div id=”featured”>
<?php
$featured_dir = ‘images/featured/’;
$scan = scandir($featured_dir);
echo ‘<img src=”‘. $featured_dir . $scan[2] . ‘” alt=”image” />’;
?>
</div>
<ul id=”options”>
<?php
$dir = ‘images/tn/’;
$scan = scandir($dir);
for ($i=0; $i<count($scan); $i++) {
if ($scan[$i] != ‘.’ && $scan[$i] != ‘..’) {
echo ‘
<li>
<a href=”‘ . $featured_dir . $scan[$i] . ‘”>
<img src=”‘. $dir . $scan[$i] . ‘” alt=”‘. $scan[$i] . ‘” />
</a>
</li>’;
}
}
?>
</ul>
</div>
</body>
</html>
CSS
html
{
background: #828282 url(images/bg.jpg) no-repeat 50% 0;
}
body
{
font-family: helvetica, georgia, sans-serif;
text-align: center;
}
#container
{
text-align: left;
width: 500px;
margin: auto;
}
#container h1
{
color: #474747;
margin: .4em 0;
}
#featured
{
position: relative;
height: 378px;
overflow: hidden;
}
#featured h2
{
position: absolute;
bottom: 0;
margin: 0;
line-height: 1.3em;
padding: .2em;
background: black;
color: white;
text-align: center;
width: 100%;
filter: alpha(opacity=60);
-moz-opacity: 60;
opacity: .6;
}
ul#options
{
background: #e3e3e3 url(images/bottom.jpg) repeat-x 0 100%;
overflow: hidden;
margin: 1em 0 0 0;
padding: .5em;
border-top: 1px solid #8a8a8a;
border-bottom: 1px solid #f5f5f5;
}
#options li
{
float: left;
width: 60px;
height: 60px;
list-style: none;
cursor: pointer;
}
#options li:hover img
{
border: 2px solid gray;
}
#options li img
{
width: 50px;
}
.selected
{
border: 2px solid gray;
}
#options a
{
outline: none;
}
a img
{
border: none;
}
Пляски с бубном для IE6
Нужно подправить один момент. Если вы посмотрите на изображение сверху, то увидите, что неупорядоченный список #options не включает свои плавающие пункты. В новых браузерах все исправляется с помощью свойства “overflow: hidden;”, но IE6 требует дополнительных действий. Нужно добавить следующее свойство.
ul#options {
…прочие свойства…
height: 1%;
}
Код скрипта Javascript(jQuery)
$(function() {
$.preloadImage = function(path) {
$(“#featured img”).attr(“src”, path);
}
$(‘ul#options li img’).click(function() {
$(‘ul li img’).removeClass(‘selected’);
$(this).addClass(‘selected’);
var imageName = $(this).attr(‘alt’);
$.preloadImage(‘images/featured/’ + imageName);
var chopped = imageName.split(‘.’);
$(‘#featured h2’).remove();
$(‘#featured’)
.prepend(‘<h2>’ + chopped[0] + ‘</h2>’)
.children(‘h2’)
.fadeIn(500)
.fadeTo(200, .6);
});
$(‘ul#options li a’).click(function() {
return false;
});
});
5 последних уроков рубрики “PHP”
Фильтрация данных с помощью zend-filter
Когда речь идёт о безопасности веб-сайта, то фраза “фильтруйте всё, экранируйте всё” всегда будет актуальна. Сегодня поговорим о фильтрации данных.
Контекстное экранирование с помощью zend-escaper
Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак. В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.
Подключение Zend модулей к Expressive
Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение. В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.
Совет: отправка информации в Google Analytics через API
Предположим, что вам необходимо отправить какую-то информацию в Google Analytics из серверного скрипта. Как это сделать. Ответ в этой заметке.
Подборка PHP песочниц
Подборка из нескольких видов PHP песочниц. На некоторых вы в режиме online сможете потестить свой код, но есть так же решения, которые можно внедрить на свой сайт.
Источник