—»     —»   Создаем скрипт в стиле Pinterest – Часть 2
  Раздел: Скрипты и коды   Нет комментариев  

Создаем скрипт в стиле Pinterest – Часть 2



Сегодня мы хотим представить вам вторую часть нашего руководства, посвященного разработке собственного скрипта в стиле Pinterest. Сегодня мы хотим рассказать вам о следующих интересных функциями: загрузчике фото на HTML5 (пожалуйста, обратите внимание на то, что эта функция работает отлично во всех современных браузерах, кроме IE), а также всплывающем окне на Ajax для отображения фотографий на весь экран. Для этого мы воспользовались бесплатным jQuery-плагином ColorBox. Итак, теперь пришло время все протестировать, и рассказать вам о коде.

* Создаем скрипт в стиле Pinterest – Часть 1

Создаем скрипт в стиле Pinterest – Часть 2

Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.


Этап 1 – HTML

Как обычно, первый этап заключается в разработке HTML-разметки. Мы сделали одну важную вещь – переместили весь файл в папку templates. А также внесли в него некоторые изменения: добавили файлы стилей и скрипты для ColorBox, немного изменили форму загрузок и, наконец, заменили сложный код "пинов" на ключ шаблона. Он называется {images_set}. Теперь наш шаблон в index.html должен выглядеть следующим образом:

templates/index.html

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<title>How to create Pinterest-like script - step 2 | Script Tutorials</title>

<!-- add styles -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/colorbox.css" rel="stylesheet" type="text/css" />

<!-- add scripts -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
<script src="js/jquery.masonry.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>

<!-- header panel -->
<div class="header_panel">

<!-- logo -->
<a href="#" class="logo"></a>

<!-- search form -->
<form action="" method="get" class="search">
<input autocomplete="off" name="q" size="27" placeholder="Search" type="text" />
<input name="search" type="submit" />
</form>

<!-- navigation menu -->
<ul class="nav">
<li><a href="#add_form" id="login_pop">Add +</a></li>
<li>
<a href="#">About<span></span></a>
<ul>
<li><a href="#">Help</a></li>
<li><a href="#">Pin It Button</a></li>
<li><a href="#" target="_blank">For Businesses</a></li>
<li class="div"><a href="#">Careers</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Blog</a></li>
<li class="div"><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Copyright</a></li>
<li><a href="#">Trademark</a></li>
</ul>
</li>
<li>
<a href="#">Profile<span></span></a>
<ul>
<li><a href="#">Invite Friends</a></li>
<li><a href="#">Find Friends</a></li>
<li class="div"><a href="#">Boards</a></li>
<li><a href="#">Pins</a></li>
<li><a href="#">Likes</a></li>
<li class="div"><a href="#">Settings</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
<li>
<a href="http://www.script-tutorials.com/pinterest-like-script-step-2/">Back to tutorial<span></span></a>
</li>
</ul>

</div>

<!-- upload form -->
<a href="#x" class="overlay" id="add_form"></a>
<div class="popup">
<div class="header">
<a class="close" href="#close">x</a>
<h2>Upload a Pin</h2>
</div>
<form id="upload_form">
<input type="file" name="image_file" id="image_file" onchange="" />
</form>
<div id="upload_result"></div>
</div>

<!-- main container -->
<div class="main_container">
{images_set}
</div>
</body>
</html>

Этап 2 – PHP-код

На данный момент нашим основным индексным файлом является файл index.php. В основном потому, что на данном этапе мы подготовили список изображений (HTML). Пожалуйста, ознакомьтесь с этим файлом:

index.php

// set warning level
if (version_compare(phpversion(), '5.3.0', '>=') == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);

$sFolder = 'photos/';
$aAllowedExt = array('jpg' => 1, 'png' => 1);

$sImages = '';
$iCnt = 1;
$rDir = opendir($sFolder);
if ($rDir) {
while ($sFile = readdir($rDir)) {
if ($sFile == '.' || $sFile == '..' || ! is_file($sFolder . $sFile))
continue;

$aPathInfo = pathinfo($sFile);
$sExt = strtolower($aPathInfo['extension']);
if (isset($aAllowedExt[$sExt])) {

if (strpos($sFile, '_full') === false) {
$sFilename = $aPathInfo['filename'];
$sImages .= <<<EOL
<!-- pin element {$iCnt} -->
<div class="pin">
<div class="holder">
<div class="actions" pin_id="{$iCnt}">
<a href="#" class="button">Repin</a>
<a href="#" class="button">Like</a>
<a href="#" class="button comment_tr">Comment</a>
</div>
<a class="image ajax" href="service.php?id={$sFilename}&ext={$sExt}" title="Photo number {$iCnt}">
<img alt="Photo number {$iCnt}" src="{$sFolder}{$sFile}">
</a>
</div>
<p class="desc">Photo number {$iCnt} description</p>
<p class="info">
<span>{$iCnt} likes</span>
<span>{$iCnt} repins</span>
</p>
<form class="comment" method="post" action="" style="display: none">
<input type="hidden" name="id" value="0" />
<textarea placeholder="Add a comment..." maxlength="1000"></textarea>
<button type="button" class="button">Comment</button>
</form>
</div>

EOL;

$iCnt++;
}
}
}
closedir( $rDir );
}

// draw common page
$aKeys = array(
'{images_set}' => $sImages
);
echo strtr(file_get_contents('templates/index.html'), $aKeys);

Все просто: мы парсим все файлы изображений в папке images, и подготавливаем наши "пины" (объекты изображений) к отображению на странице. В нашем сегодняшнем уроке мы не будем использовать базу данных, но в дальнейшем обязательно (в следующем уроке). Так как нам все равно нужно связывать комментарии и авторов с изображениями. Пожалуйста, обратите внимание на то, как мы используем плагин ColorBox: мы можем просто выставить имя класса ajax, и добавить необходимый url (href) на страницу посредством ajax-запроса (большее изображение), и мы используем service.php для того, чтобы сгенерировать его. Давайте рассмотрим файл:

service.php

// set warning level
if (version_compare(phpversion(), '5.3.0', '>=') == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);

$i = stripslashes(strip_tags($_GET['id']));
$ext = stripslashes(strip_tags($_GET['ext']));

// if something is wrong
if (! $i || ! $ext) {
exit;
}

// prepare full image path
$sFullImgPath = $sFilename = '';
$sFolder = 'photos/';
$aAllowedExt = array('jpg' => 1, 'png' => 1);
$aPathInfo = pathinfo($i . '.' . $ext);
$sExt = strtolower($aPathInfo['extension']);
if (isset($aAllowedExt[$sExt])) {
$sFilename = $aPathInfo['filename'];
$sFullImgPath = $sFolder . $sFilename . '_full.' . $sExt;
}
if (! $sFullImgPath) {
exit;
}

?>
<div class="pin bigpin">
<div class="owner">
<a href="#" class="button follow_button">Follow</a>
<a target="_blank" class="owner_img" href="#">
<img alt="Mr Brown" src="images/avatar.jpg" />
</a>
<p class="owner_name"><a target="_blank" href="#">Mr Brown</a></p>
<p class="owner_when">Uploaded X months ago</p>
</div>
<div class="holder">
<div class="actions">
<a href="#" class="button">Repin</a>
<a href="#" class="button">Like</a>
</div>
<a class="image" href="#" title="Photo <?= $sFilename ?>">
<img alt="Photo <?= $sFilename ?>" src="<?= $sFullImgPath ?>">
</a>
</div>

<p class="desc">Photo <?= $sFilename ?> description</p>

<div class="comments"></div>

<form class="comment" method="post" action="#">
<input type="hidden" name="id" value="0" />
<textarea placeholder="Add a comment..." maxlength="1000"></textarea>
<button type="button" class="button">Comment</button>
</form>
</div>

Как видно, на данный момент мы используем этот файл только для того, чтобы сгенерировать больший блок с изображением (и с некоторыми другими элементами). Мы будем использовать этот файл для работы с комментариями, отметками like и возможно с чем-то еще. Наконец, как мы уже отмечали, мы добавили возможность загружать файлы (изображения). Вот она:

upload.php

// set warning level
if (version_compare(phpversion(), '5.3.0', '>=') == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);

function uploadImageFile() { // Note: GD library is required for this upload function

$iDefWidth = 192; // default photos width (in case of resize)
$iFDefWidth = 556; // full default photos width (in case of resize)

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$iWidth = $iHeight = $iFDefWidth; // desired image dimensions
$iJpgQuality = 75;

if ($_FILES) {

// if there are no errors and filesize less than 400kb
if (! $_FILES['image_file']['error'] && $_FILES['image_file']['size'] < 400 * 1024) {
if (is_uploaded_file($_FILES['image_file']['tmp_name'])) {

// new unique filename
$sTempFileName = 'photos/' . md5(time().rand());

// move uploaded file into cache folder
move_uploaded_file($_FILES['image_file']['tmp_name'], $sTempFileName);

// change file permission to 644
@chmod($sTempFileName, 0644);

// if temp file exists
if (file_exists($sTempFileName) && filesize($sTempFileName) > 0) {
$aSize = getimagesize($sTempFileName); // obtain image info
if (!$aSize) {
@unlink($sTempFileName);
return;
}

// check for image type and create a new image from file
switch($aSize[2]) {
case IMAGETYPE_JPEG:
$sExt = '.jpg';
$vImg = @imagecreatefromjpeg($sTempFileName);
break;
case IMAGETYPE_PNG:
$sExt = '.png';
$vImg = @imagecreatefrompng($sTempFileName);
break;
default:
@unlink($sTempFileName);
return;
}

// get source image width and height
$iSrcWidth = imagesx($vImg);
$iSrcHeight = imagesy($vImg);

// recalculate height (depends on width)
$iHeight = $iSrcHeight * $iWidth / $iSrcWidth;

// create a new true color image
$vDstImg = @imagecreatetruecolor( $iWidth, $iHeight );

// copy and resize
imagecopyresampled($vDstImg, $vImg, 0, 0, 0, 0, $iWidth, $iHeight, $iSrcWidth, $iSrcHeight);

// define a result image filename
$sResultFileName = $sTempFileName . '_full' . $sExt;

// output image to file and set permission 644
imagejpeg($vDstImg, $sResultFileName, $iJpgQuality);
@chmod($sResultFileName, 0644);

// and, prepare a thumbnail as well
$iWidth = $iDefWidth;
$iHeight = $iSrcHeight * $iWidth / $iSrcWidth;
$vDstThImg = @imagecreatetruecolor($iWidth, $iHeight);
imagecopyresampled($vDstThImg, $vImg, 0, 0, 0, 0, $iWidth, $iHeight, $iSrcWidth, $iSrcHeight);
$sResultThumnName = $sTempFileName . $sExt;
imagejpeg($vDstThImg, $sResultThumnName, $iJpgQuality);
@chmod($sResultThumnName, 0644);

// unlink temp file
@unlink($sTempFileName);
return $sResultFileName;
}
}
}
}
}
}

$sImage = uploadImageFile();
echo '1';

Наш скрипт принимает только 2 формата: png и Jpg. Он использует GD-библиотеку для того, чтобы масштабировать входящее изображение в 2 размера (где ширина =192 пикселя для миниатюры, и 556 пикселей для полноценного изображения).

Этап 3 – CSS-код

Теперь мы хотим предложить вам все стили для большего изображения (которое мы получим, если кликнем по "пину"):

css/main.css

/* big pin styles */
.bigpin {
background-color: transparent;
box-shadow: none;
float: none;
margin: 0;
padding: 5px;
width: 600px;
}
.bigpin .owner {
border-bottom: 1px solid #D1CDCD;
overflow: hidden;
padding-bottom: 10px;
}
.bigpin .follow_button {
background-color: #D43638;
background-image: -webkit-linear-gradient(center top , #EB5367, #E04751 50%, #DE404A 50%, #D43638);
background-image: -moz-linear-gradient(center top , #EB5367, #E04751 50%, #DE404A 50%, #D43638);
background-image: linear-gradient(center top , #EB5367, #E04751 50%, #DE404A 50%, #D43638);
border-color: #910101;
color: #FCF9F9;
font-size: 13px;
padding: 7px 9px;
text-shadow: 0 -1px rgba(34, 25, 25, 0.5);
}
.bigpin .owner_img {
float: left;
margin-right: 9px;
width: 50px;
}
.bigpin .owner_img img {
display: block;
height: 50px;
width: 50px;
}
.bigpin .owner_name {
font-size: 23px;
line-height: 1em;
margin-bottom: 2px;
}
.bigpin .owner_when {
color: #8C7E7E;
display: block;
font-size: 13px;
margin: 5px 0 0;
padding-left: 60px;
}
.bigpin .holder {
margin-top: 10px;
}
.bigpin .actions {
left: 7px;
top: 15px;
}
.bigpin .image {
cursor: pointer;
}
.bigpin .image img {
display: block;
margin: 0 auto;
max-width: none;
}
.bigpin .desc {
border-bottom: 1px solid #D1CDCD;
padding-bottom: 10px;
}
.bigpin .comments {
margin: 20px 0;
overflow: hidden;
width: 99%;
}
.bigpin .comments p {
color: #211922;
font-size: 13px;
line-height: 1.33em;
margin-bottom: 10px;
word-wrap: break-word;
}
.bigpin .comment {
background-color: transparent;
border-top: medium none;
box-shadow: none;
margin: 0;
padding: 0;
}
.bigpin .comment textarea {
padding: 10px;
margin-bottom: 10px;
width: 96%;
}

Этап 4 – JS

И последний этап сегодняшнего руководства заключается в обновлении javascript-кода:

js/script.js

function fileSelectHandler() {
// get selected file
var oFile = $('#image_file')[0].files[0];

// html5 file upload
var formData = new FormData($('#upload_form')[0]);
$.ajax({
url: 'upload.php', //server script to process data
type: 'POST',
// ajax events
beforeSend: function() {
},
success: function(e) {
$('#upload_result').html('Thank you for your photo').show();

setTimeout(function() {
$("#upload_result").hide().empty();
}, 4000);
},
error: function(e) {
$('#upload_result').html('Error while processing uploaded image');
},
// form data
data: formData,
// options to tell JQuery not to process data or worry about content-type
cache: false,
contentType: false,
processData: false
});
}

$(document).ready(function(){

// file field change handler
$('#image_file').change(function(){
var file = this.files[0];
name = file.name;
size = file.size;
type = file.type;

// extra validation
if (name && size) {
if (! file.type.match('image.*')) {
alert("Select image please");
} else {
fileSelectHandler();
}
}
});

// masonry initialization
$('.main_container').masonry({
// options
itemSelector : '.pin',
isAnimated: true,
isFitWidth: true
});

// onclick event handler (for comments)
$('.comment_tr').click(function () {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_container').masonry();
});
});

$('.ajax').colorbox({
onOpen:function(){
},
onload:function(){
},
onComplete:function(){
$(this).colorbox.resize();
},
onCleanup:function(){
},
onClosed:function(){
}
});
});

Сюда была добавлена новая функция: fileSelectHandler. Она использует HTML5 для того, чтобы опубликовать (POST) файл изображения на сервер. Как только она получает файл, сразу же возвращает нам сообщение о том, было ли принято изображение или нет. Мы также добавили инициализацию colorbox. Этим плагином пользоваться невероятно просто.

Завершение

На сегодня мы завершили вторую часть нашего руководства. Надеемся, она вам понравилась. Было бы неплохого, если бы вы поделились этим материалом со своими друзьями. Удачи вам, и не забывайте о продолжении руководства!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Pinterest, скрипты
Опубликовал Design FactoRy   Прочитано (раз): 3597   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31