Сканирование папки с изображениями (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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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;
    });
});

Добавлено: 03 Мая 2018 06:40:45 Добавил: Андрей Ковальчук

PHP форма обратной связи

Вам нужна форма для обратной связи на сайте, но Вы не знаете, как ее сделать? Тогда этот урок специально для Вас.

Форма для обратной связи - незаменимая вещь, так как с ее помощью Ваши посетители всегда могут связаться с Вами. В данном уроке я Вас научу создавать такую форму с помощью PHP и jQuery.

Давайте начнем с простого. Нам понадобиться всего одна страница для формы, на которой будет находиться разметка формы, PHP для обработки и jQuery для проверки правильности введения данных в форму.

Шаг №1: создаем разметку формы

Давайте создадим страницу под названием contact.php (или можете выбрать любое произвольное название). Главное, чтобы расширение этого файла было .php. С помощью PHP нам не придется создавать несколько страниц, а будет достаточно всего одной.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>PHP Contact Form with JQuery Validation</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
 <script src="jquery.min.js" type="text/javascript"></script>
 <style type="text/css">
 </style>
      </head>
<body>

      <div id="contact-wrapper">
  <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform">
  <div>
  <label for="name"><strong>Name:</strong></label>
  <input type="text" size="50" name="contactname" id="contactname" value="" />
  </div>
 <div>
  <label for="email"><strong>Email:</strong></label>
  <input type="text" size="50" name="email" id="email" value="" />
  </div>
 <div>
  <label for="subject"><strong>Subject:</strong></label>
  <input type="text" size="50" name="subject" id="subject" value="" />
  </div>
 <div>
  <label for="message"><strong>Message:</strong></label>
  <textarea rows="5" cols="50" name="message" id="message"></textarea>
  </div>

  <input type="submit" value="Send Message" name="submit" />
  </form>
  </div>
  </body>
  </html>

Шаг №2: придайте форме стиля

Теперь нам необходимо все красиво оформить. Давайте вставим все стили в файл contact.php между тегами <head></head>.
body {
	font-family:Arial, Tahoma, sans-serif;
}
#contact-wrapper {
	width:430px;
	border:1px solid #e2e2e2;
	background:#f1f1f1;
	padding:20px;
}
#contact-wrapper div {
	clear:both;
	margin:1em 0;
}
#contact-wrapper label {
	display:block;
	float:none;
	font-size:16px;
	width:auto;
}
form#contactform input {
	border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
	border-style:solid;
	border-width:1px;
	padding:5px;
	font-size:16px;
	color:#333;
}
form#contactform textarea {
	font-family:Arial, Tahoma, Helvetica, sans-serif;
	font-size:100%;
	padding:0.6em 0.5em 0.7em;
	border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
	border-style:solid;
	border-width:1px;
}

Шаг №3: проверьте форму с помощью jQuery

В самом начале мы уже подключили фреймворк jQuery в нашу страничку. Кроме этого нам необходимо еще подгрузить специальный плагин для проверки введеных данных и одну небольшую функцию. Все это выглядит так:
<script src="jquery.min.js" type="text/javascript"></script>
      <script src="jquery.validate.pack.js" type="text/javascript"></script>
<script type="text/javascript">
      $(document).ready(function(){
      $("#contactform").validate();
      });
  </script>   

После этого нам необходимо внести некоторые коррективы в нашу форму. Если поле обязательное, необходимо добавить class=”required”. В случае с полем для ввода Email нам необходимо добавить class=”required email”. Вот измененный код формы:
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform">
<div>

<label for="name"><strong>Name:</strong></label>
<input type="text" size="50" name="contactname" id="contactname" value="" class="required" />
</div>
 <div>
  <label for="email"><strong>Email:</strong></label>
  <input type="text" size="50" name="email" id="email" value="" class="required email" />
  </div>
 <div>
  <label for="subject"><strong>Subject:</strong></label>
  <input type="text" size="50" name="subject" id="subject" value="" class="required" />
  </div>
 <div>
  <label for="message"><strong>Message:</strong></label>
  <textarea rows="5" cols="50" name="message" id="message" class="required"></textarea>
  </div>
  <input type="submit" value="Send Message" name="submit" />
  </form>

После всех манипуляций у Вас должно получиться что-то наподобие этого:

Шаг №4: обработка и отправка формы

Настало время добавить немного PHP магии нашей форме. Поместите следующий код как можно выше в Вашем документе. Вы, наверное, спрашиваете себя, зачем нам проверять все поля формы еще раз с помощью PHP (ведь мы же уже проверили все с помощью jQuery)? Причина для этого есть, и она заключается в том, что даже если у Вашего посетителя будет отключен Javascript, он все равно сможет воспользоваться формой.
<?php
  //Если форма отправлена
  if(isset($_POST['submit'])) {
 //Проверка Поля ИМЯ
  if(trim($_POST['contactname']) == '') {
  $hasError = true;
  } else {
  $name = trim($_POST['contactname']);
  }
 //Проверка поля ТЕМА
  if(trim($_POST['subject']) == '') {
  $hasError = true;
  } else {
  $subject = trim($_POST['subject']);
  }
 //Проверка правильности ввода EMAIL
  if(trim($_POST['email']) == '')  {
  $hasError = true;
  } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
  $hasError = true;
  } else {
  $email = trim($_POST['email']);
  }
 //Проверка наличия ТЕКСТА сообщения
  if(trim($_POST['message']) == '') {
  $hasError = true;
  } else {
  if(function_exists('stripslashes')) {
  $comments = stripslashes(trim($_POST['message']));
  } else {
  $comments = trim($_POST['message']);
  }
  }
 //Если ошибок нет, отправить email
  if(!isset($hasError)) {
  $emailTo = 'name@yourdomain.com'; //Сюда введите Ваш email
  $body = "Name: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments";
  $headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
 mail($emailTo, $subject, $body, $headers);
  $emailSent = true;
  }
  }
  ?>

В коде есть комментарии, которые расскажут Вам что этот код делает. Также не забудьте поменять Email на свой (в примере указан name@yourdomain.com).

Вот и все! Теперь Вы знаете, как сделать форму обратной связи.

Единственный маленький недостаток: мне не удалось перевести на русский язык ошибки, которые всплывают, например, при введении неправильного Email. Дело в том, что эти сообщения находятся в зашифрованном виде в файле jquery.validate.pack.js. Если быть еще точнее, то они не зашифрованы, но разбросаны по всему файлу и при попытке внести коррективы возникают проблемы с кодировкой.

Если у меня получится это исправить, я обязательно напишу здесь :).

На сегодня все. Всем спасибо.

Добавлено: 02 Мая 2018 20:24:43 Добавил: Андрей Ковальчук

Создание AJAX конвертора курсов валют при помощи PHP, jQuery и Google

Если вы не знаете, то я вам открою страшную тайну! Помимо основных функций поисковой системы Google предоставляет ещё и множество других услуг. Одна из них это калькулятор с расширенными возможностями. Как это можно использовать? Ответ в этой статье.

Что нам нужно для того, чтобы закодить данный конвертор? PHP, jQuery, Google, прикольный музон и конечно же этот урок!

Давайте же начнём. Создайте новый файл index.php и вставьте следующий код:

<label for="amount">Сумма:</label>
<input class="amount" type="text" name="amount" id="amount" value="100" />
 
    <label for="from">Из:</label>
        <select name="from" id="from">
        <option selected="selected" value="EUR">Euro - EUR</option>
        <option value="USD">United States Dollars - USD</option>
        <option value="GBP">United Kingdom Pounds - GBP</option>
        <option value="CAD">Canada Dollars - CAD</option>
        <option value="AUD">Australia Dollars - AUD</option>
        <option value="JPY">Japan Yen - JPY</option>
        <option value="INR">India Rupees - INR</option>
        <option value="NZD">New Zealand Dollars - NZD</option>
        <option value="CHF">Switzerland Francs - CHF</option>
        <option value="ZAR">South Africa Rand - ZAR</option>
        <option value="DZD">Algeria Dinars - DZD</option>
        <option value="ARS">Argentina Pesos - ARS</option>
        <option value="AUD">Australia Dollars - AUD</option>
        <option value="BHD">Bahrain Dinars - BHD</option>
        <option value="BRL">Brazil Reais - BRL</option>
        <option value="BGN">Bulgaria Leva - BGN</option>
        <option value="CAD">Canada Dollars - CAD</option>
        <option value="CLP">Chile Pesos - CLP</option>
        <option value="CNY">China Yuan Renminbi - CNY</option>
        <option value="CNY">RMB (China Yuan Renminbi) - CNY</option>
        <option value="COP">Colombia Pesos - COP</option>
        <option value="CRC">Costa Rica Colones - CRC</option>
        <option value="HRK">Croatia Kuna - HRK</option>
        <option value="CZK">Czech Republic Koruny - CZK</option>
        <option value="DKK">Denmark Kroner - DKK</option>
        <option value="DOP">Dominican Republic Pesos - DOP</option>
        <option value="EGP">Egypt Pounds - EGP</option>
        <option value="EEK">Estonia Krooni - EEK</option>
        <option value="EUR">Euro - EUR</option>
        <option value="FJD">Fiji Dollars - FJD</option>
        <option value="HKD">Hong Kong Dollars - HKD</option>
        <option value="HUF">Hungary Forint - HUF</option>
        <option value="ISK">Iceland Kronur - ISK</option>
        <option value="INR">India Rupees - INR</option>
        <option value="IDR">Indonesia Rupiahs - IDR</option>
        <option value="ILS">Israel New Shekels - ILS</option>
        <option value="JMD">Jamaica Dollars - JMD</option>
        <option value="JPY">Japan Yen - JPY</option>
        <option value="JOD">Jordan Dinars - JOD</option>
        <option value="KES">Kenya Shillings - KES</option>
        <option value="KRW">Korea (South) Won - KRW</option>
        <option value="KWD">Kuwait Dinars - KWD</option>
        <option value="LBP">Lebanon Pounds - LBP</option>
        <option value="MYR">Malaysia Ringgits - MYR</option>
        <option value="MUR">Mauritius Rupees - MUR</option>
        <option value="MXN">Mexico Pesos - MXN</option>
        <option value="MAD">Morocco Dirhams - MAD</option>
        <option value="NZD">New Zealand Dollars - NZD</option>
        <option value="NOK">Norway Kroner - NOK</option>
        <option value="OMR">Oman Rials - OMR</option>
        <option value="PKR">Pakistan Rupees - PKR</option>
        <option value="PEN">Peru Nuevos Soles - PEN</option>
        <option value="PHP">Philippines Pesos - PHP</option>
        <option value="PLN">Poland Zlotych - PLN</option>
        <option value="QAR">Qatar Riyals - QAR</option>
        <option value="RON">Romania New Lei - RON</option>
        <option value="RUB">Russia Rubles - RUB</option>
        <option value="SAR">Saudi Arabia Riyals - SAR</option>
        <option value="SGD">Singapore Dollars - SGD</option>
        <option value="SKK">Slovakia Koruny - SKK</option>
        <option value="ZAR">South Africa Rand - ZAR</option>
        <option value="KRW">South Korea Won - KRW</option>
        <option value="LKR">Sri Lanka Rupees - LKR</option>
        <option value="SEK">Sweden Kronor - SEK</option>
        <option value="CHF">Switzerland Francs - CHF</option>
        <option value="TWD">Taiwan New Dollars - TWD</option>
        <option value="THB">Thailand Baht - THB</option>
        <option value="TTD">Trinidad and Tobago Dollars - TTD</option>
        <option value="TND">Tunisia Dinars - TND</option>
        <option value="TRY">Turkey Lira - TRY</option>
        <option value="AED">United Arab Emirates Dirhams - AED</option>
        <option value="GBP">United Kingdom Pounds - GBP</option>
        <option value="USD">United States Dollars - USD</option>
        <option value="VEB">Venezuela Bolivares - VEB</option>
        <option value="VND">Vietnam Dong - VND</option>
        <option value="ZMK">Zambia Kwacha - ZMK</option>
    </select>
 
    <label for="to">В:</label>
    <select name="to" id="to">
        <option value="USD">United States Dollars - USD</option>
        <option value="GBP">United Kingdom Pounds - GBP</option>
        <option value="CAD">Canada Dollars - CAD</option>
        <option value="AUD">Australia Dollars - AUD</option>
        <option value="JPY">Japan Yen - JPY</option>
        <option value="INR">India Rupees - INR</option>
        <option value="NZD">New Zealand Dollars - NZD</option>
        <option value="CHF">Switzerland Francs - CHF</option>
        <option value="ZAR">South Africa Rand - ZAR</option>
        <option value="DZD">Algeria Dinars - DZD</option>
        <option value="ARS">Argentina Pesos - ARS</option>
        <option value="AUD">Australia Dollars - AUD</option>
        <option value="BHD">Bahrain Dinars - BHD</option>
        <option value="BRL">Brazil Reais - BRL</option>
        <option value="BGN">Bulgaria Leva - BGN</option>
        <option value="CAD">Canada Dollars - CAD</option>
        <option value="CLP">Chile Pesos - CLP</option>
        <option value="CNY">China Yuan Renminbi - CNY</option>
        <option value="CNY">RMB (China Yuan Renminbi) - CNY</option>
        <option value="COP">Colombia Pesos - COP</option>
        <option value="CRC">Costa Rica Colones - CRC</option>
        <option value="HRK">Croatian Kuna - HRK</option>
        <option value="CZK">Czech Republic Koruny - CZK</option>
        <option value="DKK">Denmark Kroner - DKK</option>
        <option value="DOP">Dominican Republic Pesos - DOP</option>
        <option value="EGP">Egypt Pounds - EGP</option>
        <option value="EEK">Estonia Krooni - EEK</option>
        <option value="EUR">Euro - EUR</option>
        <option value="FJD">Fiji Dollars - FJD</option>
        <option value="HKD">Hong Kong Dollars - HKD</option>
        <option value="HUF">Hungary Forint - HUF</option>
        <option value="ISK">Iceland Kronur - ISK</option>
        <option value="INR">India Rupees - INR</option>
        <option value="IDR">Indonesia Rupiahs - IDR</option>
        <option value="ILS">Israel New Shekels - ILS</option>
        <option value="JMD">Jamaica Dollars - JMD</option>
        <option value="JPY">Japan Yen - JPY</option>
        <option value="JOD">Jordan Dinars - JOD</option>
        <option value="KES">Kenya Shillings - KES</option>
        <option value="KRW">Korea (South) Won - KRW</option>
        <option value="KWD">Kuwait Dinars - KWD</option>
        <option value="LBP">Lebanon Pounds - LBP</option>
        <option value="MYR">Malaysia Ringgits - MYR</option>
        <option value="MUR">Mauritius Rupees - MUR</option>
        <option value="MXN">Mexico Pesos - MXN</option>
        <option value="MAD">Morocco Dirhams - MAD</option>
        <option value="NZD">New Zealand Dollars - NZD</option>
        <option value="NOK">Norway Kroner - NOK</option>
        <option value="OMR">Oman Rials - OMR</option>
        <option value="PKR">Pakistan Rupees - PKR</option>
        <option value="PEN">Peru Nuevos Soles - PEN</option>
        <option value="PHP">Philippines Pesos - PHP</option>
        <option value="PLN">Poland Zlotych - PLN</option>
        <option value="QAR">Qatar Riyals - QAR</option>
        <option value="RON">Romania New Lei - RON</option>
        <option value="RUB">Russia Rubles - RUB</option>
        <option value="SAR">Saudi Arabia Riyals - SAR</option>
        <option value="SGD">Singapore Dollars - SGD</option>
        <option value="SKK">Slovakia Koruny - SKK</option>
        <option value="ZAR">South Africa Rand - ZAR</option>
        <option value="KRW">South Korea Won - KRW</option>
        <option value="LKR">Sri Lanka Rupees - LKR</option>
        <option value="SEK">Sweden Kronor - SEK</option>
        <option value="CHF">Switzerland Francs - CHF</option>
        <option value="TWD">Taiwan New Dollars - TWD</option>
        <option value="THB">Thailand Baht - THB</option>
        <option value="TTD">Trinidad and Tobago Dollars - TTD</option>
        <option value="TND">Tunisia Dinars - TND</option>
        <option value="TRY">Turkey Lira - TRY</option>
        <option value="AED">United Arab Emirates Dirhams - AED</option>
        <option value="GBP">United Kingdom Pounds - GBP</option>
        <option value="USD">United States Dollars - USD</option>
        <option value="VEB">Venezuela Bolivares - VEB</option>
        <option value="VND">Vietnam Dong - VND</option>
        <option value="ZMK">Zambia Kwacha - ZMK</option>
    </select>
 
    <input type="button" name="submit" id="submit" value="Convert" />
 
    <div id="results"></div>

У нас 2 выпадающих меню с наименованиями валют, поле для суммы и кнопка. Ниже div с id results, который будет отображать результаты.

Теперь сделаем AJAX запрос получения и отображения результата конвертирования:
$(document).ready(function() {
 
    $('#submit').click(function(){
 
     // получаем значения
     var amount     = $('#amount').val();
     var from       = $('#from').val();
     var to         = $('#to').val();
 
     var params = "amount=" + amount + "&from=" + from + "&to=" + to;
 
     $.ajax({
       type: "POST",
       url: "convert.php",
       data: params,
       success: function(data){
            $('#results').html(data);
       }
     });
    });
});

Мы делаем ajax запрос к файлу convert.php и если всё прошло успешно выводим результат в div.

А вот и convert.php
// фильтруем входящие данные filter_input
$amount = filter_input(INPUT_POST, 'amount', FILTER_VALIDATE_INT);
$from   = filter_input(INPUT_POST, 'from', FILTER_SANITIZE_SPECIAL_CHARS);
$to     = filter_input(INPUT_POST, 'to', FILTER_SANITIZE_SPECIAL_CHARS);
 
// фомирования сроки параметров для запроса
$encoded_string = urlencode($amount) . urlencode($from) . '%3D%3F' . urlencode($to);
 
$url = 'http://www.google.com/ig/calculator?hl=en&q=' . $encoded_string;
 
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_FAILONERROR, 1);
 
$results = curl_exec($ch);
 
// это функция json_decode для счастливых обладателей PHP < 5.2.0
// взято с php.net
$comment = false;
$out = '$x=';
 
for ($i=0; $i<strlen($results); $i++)
{
    if (!$comment)
    {
        if ($results[$i] == '{')            $out .= ' array(';
        else if ($results[$i] == '}')       $out .= ')';
        else if ($results[$i] == ':')       $out .= '=>';
        else                                $out .= $results[$i];
    }
    else $out .= $results[$i];
    if ($results[$i] == '"')    $comment = !$comment;
}
// формирование переменной $x, которая содержит декодированный массив
echo eval($out . ';');
 
echo $x['lhs'] . ' = ' . $x['rhs'];
Этот код в принципе не сложный, но я бы хотел пояснить вот что:

$amount = filter_input(INPUT_POST, 'amount', FILTER_VALIDATE_INT);
$from = filter_input(INPUT_POST, 'from', FILTER_SANITIZE_SPECIAL_CHARS);
$to = filter_input(INPUT_POST, 'to', FILTER_SANITIZE_SPECIAL_CHARS);

Этот код действительно интересный. Он работает только начиная с PHP 5.2.0. Эта функция с лёгкостью фильтрует данные.

Её можно использовать как для неизвестных ресурсов, так и для введённых пользователем данных.

Благодаря filter_input вы можете фильтровать:

INPUT_GET
INPUT_POST
INPUT_COOKIE
INPUT_ENV
INPUT_SERVER

Если фильтрация произошла успешно, функция вернёт чистое значение. Если произойдёт ошибка, то FALSE. NULL если не заданы параметры.

Всё готово!

Добавлено: 02 Мая 2018 18:36:28 Добавил: Андрей Ковальчук

Кросс-доменная API для сайта

В данном уроке мы сделаем собственный кросс-доменный API. Может быть вы уже пробовали делать что-то подобное, и, вероятно, сталкивались с невозможностью нормальной работы функций API со сторонних доменов. В основном не получается сделать нормальный запрос AJAX к удаленному серверу и получить ответ в JavaScript функциях. А причина заключается в настройках безопасности. Мы покажем, как решать подобные проблемы.

Шаг 1. PHP
Первым делом приготовим наш сервер.

api.php

<?php
 
// Устанавливаем возможность отправлять ответ для любого домена
header('Access-Control-Allow-Origin: *');
 
if (version_compare(phpversion(), '5.3.0', '>=')  == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);
 
// Получаем параметры POST
$sAction = $_POST['action'];
$iParam1 = (int)$_POST['param1'];
$iParam2 = (int)$_POST['param2'];
 
// Выполняем вычисления
$iResult = 0;
switch ($sAction) {
    case 'sum':
        $iResult = $iParam1 + $iParam2;
        break;
    case 'sub':
        $iResult = $iParam1 - $iParam2;
        break;
    case 'mul':
        $iResult = $iParam1 * $iParam2;
        break;
    case 'div':
        $iResult = $iParam1 / $iParam2;
        break;
}
 
// Подготавливаем массив результатов
$aResult = array(
    'result' => $iResult
);
 
// Генерируем результат
header('Content-type: application/json');
echo json_encode($aResult);

Следует уделить внимание первой строке, в которой используется установка для заголовка ‘Access-Control-Allow-Origin’. Так разрешается отправка ответа любому серверу (что означает - любому домену). Если вы хотите ограничить область использования определенным доменом, делайте это в данной строке. Затем мы выполняем простые операции в зависимости от полученных параметров $_POST. В нашем примере реализуются простые математические операции. Мы возвращаем результат в формате JSON. Теперь время подготовить библиотеку JavaScript.

Шаг 2. JavaScript
api.js
function do_sum(param1, param2, cfunction) {
 
    // Отправляем AJAX ответ на сервер
    $.ajax({
        type: 'POST',
        url: 'http://ваш_сайт/api.php',
        crossDomain: true,
        dataType: 'json',
        data: 'action=sum&param1=' + param1 + '&param2=' + param2,
        success: function(json) {
            // и вызываем функцию клиента
            cfunction(json);
        }
    });
}
 
function do_sub(param1, param2, cfunction) {
 
    // Отправляем AJAX ответ на сервер
    $.ajax({
        type: 'POST',
        url: 'http://ваш_сайт/api.php',
        crossDomain: true,
        dataType: 'json',
        data: 'action=sub&param1=' + param1 + '&param2=' + param2,
        success: function(json) {
            // и вызываем функцию клиента
            cfunction(json);
        }
    });
}
 
function do_mul(param1, param2, cfunction) {
 
    // Отправляем AJAX ответ на сервер
    $.ajax({
        type: 'POST',
        url: 'http://ваш_сайт/api.php',
        crossDomain: true,
        dataType: 'json',
        data: 'action=mul&param1=' + param1 + '&param2=' + param2,
        success: function(json) {
            // и вызываем функцию клиента
            cfunction(json);
        }
    });
}
 
function do_div(param1, param2, cfunction) {
 
    // Отправляем AJAX ответ на сервер
    $.ajax({
        type: 'POST',
        url: 'http://ваш_сайт/api.php',
        crossDomain: true,
        dataType: 'json',
        data: 'action=div&param1=' + param1 + '&param2=' + param2,
        success: function(json) {
            // и вызываем функцию клиента
            cfunction(json);
        }
    });
}

Это обертка для нашей серверной части. В примере подготовлены 4 функции JavaScript: do_sum, do_sub, do_mul и do_div. Для каждой серверной операции. Обобщая, можно сказать, что нужно для правильного запроса: первое, установить необходимы URL для файла серверной части API (например: http://ваш_сайт/api.php); второе, установить для ‘crossDomain’ значение true; и последнее, установить тип данных dataType (для нашего примера ‘json’). Обратите внимание, что третий параметр каждой нашей функции - ‘cfunction’. Это пользовательская функция и нам следует передавать полученный ответ сервера в данную функцию.

Шаг 3. Использование
Небольшой пример использования подобного API.
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8" />
 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://ваш_сервер/api.js"></script>
</head>
<body>
 
<script type="text/javascript">
$(document).ready(function() {
 
    // Выполняем метод 1 (сумма) на сервере
    var param1 = 5;
    var param2 = 10;
    do_sum(param1, param2, function(data) {
        $('#results').append(param1 + ' + ' + param2 + ' = ' + data.result + '<br />');
 
        // Выполняем метод  2 (вычитание) на сервере
        param1 = 25;
        param2 = 15;
        do_sub(param1, param2, function(data) {
            $('#results').append(param1 + ' - ' + param2 + ' = ' + data.result + '<br />');
 
            // Выполняем метод  3 (умножение) на сервере
            param1 = 8;
            param2 = 5;
            do_mul(param1, param2, function(data) {
                $('#results').append(param1 + ' * ' + param2 + ' = ' + data.result + '<br />');
 
                // Выполняем метод  4 (деление) на сервере
                param1 = 33;
                param2 = 11;
                do_div(param1, param2, function(data) {
                    $('#results').append(param1 + ' / ' + param2 + ' = ' + data.result + '<br />');
                });
            });
 
        });
    });
 
});
</script>
 
<div id="results"></div>
</body>
</html>

Здесь показано, как можно использовать функции API. Вот единичный пример:
var param1 = 5;
var param2 = 10;
do_sum(param1, param2, function(data) {
    $('#results').append(param1 + ' * ' + param2 + ' = ' + data.result + '<br />');
});

Мы просто передаем 3 параметра в нашу функцию: 2 цифры и одну функцию. Ответ сервера будет получать данная функция. И можно будет выводить результат где-нибудь (как пример используется элемент #results).

Добавлено: 02 Мая 2018 16:14:30 Добавил: Андрей Ковальчук

Создаем систему комментирования

В данном уроке мы создадим собственную систему комментирования (с использованием AJAX) разных пунктов списка (может быть все что угодно на вашем сайте - статьи, товары, фотографии и так далее) с применением PHP. В системе будет использоваться простая защита от спама - можно размещать только один комментарий в течении 10 минут. В проекте также задействован jQuery.

Для демонстрации используется две SQL таблицы. Первая таблица хранит записи о пунктах списка и содержит следующие поля: заголовок, описание, время добавления в список и количество комментариев. Другая таблица содержит все комментарии.

Шаг 1. SQL
В базу данных надо добавить 2 таблицы:

CREATE TABLE IF NOT EXISTS `s163_items` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `title` varchar(255) default '',
  `description` text NOT NULL,
  `when` int(11) NOT NULL default '0',
  `comments_count` int(11) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
 
INSERT INTO `s163_items` (`title`, `description`, `when`, `comments_count`) VALUES
('Пункт #1', 'Описание пункта #1', UNIX_TIMESTAMP(), '0'),
('Пункт #2', 'Описание пункта #2', UNIX_TIMESTAMP()+1, '0'),
('Пункт #3', 'Описание пункта #3', UNIX_TIMESTAMP()+2, '0'),
('Пункт #4', 'Описание пункта #4', UNIX_TIMESTAMP()+3, '0'),
('Пункт #5', 'Описание пункта #5', UNIX_TIMESTAMP()+4, '0');
 
CREATE TABLE IF NOT EXISTS `s163_items_cmts` (
  `c_id` int(11) NOT NULL AUTO_INCREMENT ,
  `c_item_id` int(12) NOT NULL default '0',
  `c_ip` varchar(20) default NULL,
  `c_name` varchar(64) default '',
  `c_text` text NOT NULL ,
  `c_when` int(11) NOT NULL default '0',
  PRIMARY KEY (`c_id`),
  KEY `c_item_id` (`c_item_id`)
) ENGINE=MYISAM DEFAULT CHARSET=utf8;

Первая таблица - для пунктов списка, вторая - для комментариев.

Шаг 2. PHP
Код основного файла:

index.php
<?php
// Отключаем возможные предупреждения
if (version_compare(phpversion(), "5.3.0", ">=")  == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);
 
require_once('classes/CMySQL.php'); // Включаем сервисный класс для работы с базой данных
 
$sCode = '';
$iItemId = (int)$_GET['id'];
if ($iItemId) { // Просматриваем данные
    $aItemInfo = $GLOBALS['MySQL']->getRow("SELECT * FROM `s163_items` WHERE `id` = '{$iItemId}'"); // Получаем информацию из базы данных
    $sCode .= '<h1>'.$aItemInfo['title'].'</h1>';
    $sCode .= '<h3>'.date('d/m/Y', $aItemInfo['when']).'</h3>';
    $sCode .= '<h2>Описание:</h2>';
    $sCode .= '<h3>'.$aItemInfo['description'].'</h3>';
    $sCode .= '<h3><a href="'.$_SERVER['PHP_SELF'].'">Назад</a></h3>';
 
    // Выводим 5 последних комментариев
    $sComments = '';
    $aComments = $GLOBALS['MySQL']->getAll("SELECT * FROM `s163_items_cmts` WHERE `c_item_id` = '{$iItemId}' ORDER BY `c_when` DESC LIMIT 5");
    foreach ($aComments as $i => $aCmtsInfo) {
        $sWhen = date('d/m/Y H:i', $aCmtsInfo['c_when']);
        $sComments .= <<<EOF
<div class="comment" id="{$aCmtsInfo['c_id']}">
    <p>Автор: {$aCmtsInfo['c_name']} <span>({$sWhen})</span>:</p>
    <p>{$aCmtsInfo['c_text']}</p>
</div>
EOF;
    }
 
    ob_start();
    ?>
    <div class="container" id="comments">
        <h2>Комментарии</h2>
        <script type="text/javascript">
        function submitComment(e) {
            var sName = $('#name').val();
            var sText = $('#text').val();
 
            if (sName && sText) {
                $.post('comment.php', { name: sName, text: sText, id: <?= $iItemId ?> },
                    function(data){
                        if (data != '1') {
                          $('#comments_list').fadeOut(1000, function () {
                            $(this).html(data);
                            $(this).fadeIn(1000);
                          });
                        } else {
                          $('#comments_warning2').fadeIn(1000, function () {
                            $(this).fadeOut(1000);
                          });
                        }
                    }
                );
            } else {
              $('#comments_warning1').fadeIn(1000, function () {
                $(this).fadeOut(1000);
              });
            }
        };
        </script>
 
        <div id="comments_warning1" style="display:none">Пожалуйста, заполните оба поля (Имя и комментарий)</div>
        <div id="comments_warning2" style="display:none">Вы можете размещать только один комментарий каждые 10 минут (защита от спама)</div>
        <form onsubmit="submitComment(this); return false;">
            <table>
                <tr><td class="label"><label>Ваше имя: </label></td><td class="field"><input type="text" value="" title="Введите ваше имя" id="name" /></td></tr>
                <tr><td class="label"><label>Комментарий: </label></td><td class="field"><textarea name="text" id="text"></textarea></td></tr>
                <tr><td class="label">&nbsp;</td><td class="field"><input type="submit" value="Отправить" /></td></tr>
            </table>
        </form>
        <div id="comments_list"><?= $sComments ?></div>
    </div>
    <?
    $sCommentsBlock = ob_get_clean();
 
} else {
    $sCode .= '<h1>Список пунктов:</h1>';
 
    $aItems = $GLOBALS['MySQL']->getAll("SELECT * FROM `s163_items` ORDER by `when` ASC"); // Получаем информацию обо всех пунктах из базы данных
    foreach ($aItems as $i => $aItemInfo) {
        $sCode .= '<h2><a href="'.$_SERVER['PHP_SELF'].'?id='.$aItemInfo['id'].'">'.$aItemInfo['title'].'</a></h2>';
    }
}
 
?>
<!DOCTYPE html>
<html lang="ru" >
    <head>
        <meta charset="utf-8" />
        <title>Система комментирования | Материалы сайта RUSELLER.COM</title>
 
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
    </head>
    <body>
        <div class="container">
            <?= $sCode ?>
        </div>
        <?= $sCommentsBlock ?>
        <footer>
            <h2>Создаем систему комментирования</h2>
            <a href="http://www.ruseller.com" class="stuts" target="_blank">Материалы сайта <span>RUSELLER.COM</span></a>
        </footer>
    </body>
</html>

По умолчанию данный скрипт выводит список пунктов. Каждый пункт имеет свою страницу. На данной странице выводится название пункта, дата добавления в список, описание и блок комментариев. В блоке содержится форма для добавления нового комментария и выводится 5 последних комментариев.

Следующий файл PHP:

comment.php
<?php
// Отключаем возможные предупреждения
if (version_compare(phpversion(), "5.3.0", ">=")  == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);
 
require_once('classes/CMySQL.php'); // Включаем сервисный класс
 
$iItemId = (int)$_POST['id']; // Получаем необходимую информацию
$sIp = getVisitorIP();
$sName = $GLOBALS['MySQL']->escape(strip_tags($_POST['name']));
$sText = $GLOBALS['MySQL']->escape(strip_tags($_POST['text']));
 
if ($sName && $sText) {
    // Проверка - размещался недавно комментарий или нет
    $iOldId = $GLOBALS['MySQL']->getOne("SELECT `c_item_id` FROM `s163_items_cmts` WHERE `c_item_id` = '{$iItemId}' AND `c_ip` = '{$sIp}' AND `c_when` >= UNIX_TIMESTAMP() - 600 LIMIT 1");
    if (! $iOldId) {
        // Если нет - добавляем комментарий
        $GLOBALS['MySQL']->res("INSERT INTO `s163_items_cmts` SET `c_item_id` = '{$iItemId}', `c_ip` = '{$sIp}', `c_when` = UNIX_TIMESTAMP(), `c_name` = '{$sName}', `c_text` = '{$sText}'");
        $GLOBALS['MySQL']->res("UPDATE `s163_items` SET `comments_count` = `comments_count` + 1 WHERE `id` = '{$iItemId}'");
 
        // и выводим последние 5 комментариев
        $sOut = '';
        $aComments = $GLOBALS['MySQL']->getAll("SELECT * FROM `s163_items_cmts` WHERE `c_item_id` = '{$iItemId}' ORDER BY `c_when` DESC LIMIT 5");
        foreach ($aComments as $i => $aCmtsInfo) {
            $sWhen = date('d/m/Y H:i', $aCmtsInfo['c_when']);
            $sOut .= <<<EOF
<div class="comment" id="{$aCmtsInfo['c_id']}">
    <p>Автор: {$aCmtsInfo['c_name']} <span>({$sWhen})</span>:</p>
    <p>{$aCmtsInfo['c_text']}</p>
</div>
EOF;
        }
 
        echo $sOut;
        exit;
    }
}
echo 1;
exit;
 
function getVisitorIP() {
    $ip = "0.0.0.0";
    if( ( isset( $_SERVER['HTTP_X_FORWARDED_FOR'] ) ) && ( !empty( $_SERVER['HTTP_X_FORWARDED_FOR'] ) ) ) {
        $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
    } elseif( ( isset( $_SERVER['HTTP_CLIENT_IP'])) && (!empty($_SERVER['HTTP_CLIENT_IP'] ) ) ) {
        $ip = explode(".",$_SERVER['HTTP_CLIENT_IP']);
        $ip = $ip[3].".".$ip[2].".".$ip[1].".".$ip[0];
    } elseif((!isset( $_SERVER['HTTP_X_FORWARDED_FOR'])) || (empty($_SERVER['HTTP_X_FORWARDED_FOR']))) {
        if ((!isset( $_SERVER['HTTP_CLIENT_IP'])) && (empty($_SERVER['HTTP_CLIENT_IP']))) {
            $ip = $_SERVER['REMOTE_ADDR'];
        }
    }
    return $ip;
}
 
?>

Данный файл принимает комментарии, переданные запросом POST, и сохраняет их базе данных.

В проекте также есть еще один PHP файл:

classes/CMySQL.php
В нем содержится класс для работы с базой данных. Именно в этом файле надо внести данные для связи с сервером баз данных:
$this->sDbName = 'ИМЯ_БАЗЫ_ДАННЫХ';
$this->sDbUser = 'ИМЯ_ПОЛЬЗОВАТЕЛЯ';
$this->sDbPass = 'ПАРОЛЬ';

Класс достаточно универсальный и его можно использовать в других проектах.

Шаг 3. Включаем jQuery
В проекте используется jQuery, одна из версий которого содержится в файловой структуре:

js/jquery-1.5.2.min.js

Шаг 4. CSS
Осталось определиться с используемыми стилями:

css/main.css
*{
    margin:0;
    padding:0;
}
 
body {
    background-repeat:no-repeat;
    background-color:#bababa;
    background-image: -webkit-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    background-image: -moz-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    background-image: -o-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    background-image: radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
    min-height:600px;
}
 
footer {
    background-color:#212121;
    bottom:0;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    left:0;
    position:fixed;
    width:100%;
    z-index:100;
}
 
footer h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
 
footer a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
 
footer .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
 
.container {
    border:3px #111 solid;
    color:#000;
    margin:20px auto;
    padding:15px;
    position:relative;
    text-align:center;
    width:500px;
 
    border-radius:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
}
 
#comments form {
    background-color: rgba(255, 255, 255, 0.4);
    margin:10px 0;
    padding:10px;
    text-align:left;
}
 
#comments table td.label {
    color: #000;
    font-size: 13px;
    padding-right: 3px;
    text-align: right;
    width: 105px;
}
 
#comments table label {
    color: #000;
    font-size: 16px;
    font-weight: normal;
    vertical-align: middle;
}
 
#comments table td.field input, #comments table td.field textarea {
    border: 1px solid #96A6C5;
    font-family: Verdana,Arial,sans-serif;
    font-size: 16px;
    margin-top: 2px;
    padding: 6px;
    width: 250px;
}
 
#comments_list {
    background-color: rgba(255, 255, 255, 0.4);
    margin:10px 0;
    padding:10px;
    text-align:left;
}
 
#comments_list .comment {
    border-top:1px solid #000;
    padding:10px 0;
}
 
#comments_list .comment:first-child {
    border-top-width:0px;
}
 
#comments_list .comment span {
    font-size:11px;
}

Добавлено: 02 Мая 2018 14:30:46 Добавил: Андрей Ковальчук

Плагин для создания адаптивной карусели

Сегодня мы покажем вам плагин OWL Carousel, c помощью которого можно создать адаптивную карусель, работающую, в том числе, на сенсорных устройствах.

Как использовать
1. Подключаем стили, jQuery и плагин:

<!-- Основные стили -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
 
<!-- Тема по умолчанию -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
 
<!-- Подключаем jQuery  -->
<script src="jquery-1.9.1.min.js"></script>
 
<!-- Подключаем плагин -->
<script src="assets/owl-carousel/owl.carousel.js"></script>

2. Настраиваем HTML
Специального кода не надо. Всё что вам нужно, так это заключить контент карусели в <div class="owl-carousel">. Стили для класса “owl-carousel” описаны в файле owl.carousel.css:

<div id="owl-example" class="owl-carousel">
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 ...
</div>

3. Вызываем плагин
$(document).ready(function() {
 
 $("#owl-example").owlCarousel();
 
});

Использование API
// Инициализация плагина
$(".owl-carousel").owlCarousel()
 
// получаем объект карусели и записываем в переменную
var owl = $(".owl-carousel").data('owlCarousel');
 
// публичные методы
owl.next()   // переходим на следующий слайд
owl.prev()   // переходим на предыдущий слайд
owl.goTo(x)  // переходим на слайд x
 
owl.update() // обновляем слайд
 
owl.buildControlls()    // отображаем элементы управления
owl.destroyControlls()  // удаляем элементы управления
 
owl.play() // авто-прокрутка
owl.stop() // остановка авто-прокрутки

Добавлено: 01 Мая 2018 15:27:01 Добавил: Андрей Ковальчук

Плагин прогресса загрузки как на YouTube

Для функционирования вам понадобится Twitter Bootstrap 2.3.2 или Twitter Bootstrap 3.0

Подключение файлов
Скачайте skylo.js и skylo.css. Подключите их после bootstrap.js и bootstrap.css.

Настройки

$(document).skylo({
    state: 'info',
    inchSpeed: 200,
    initialBurst: 5
});

state ["info", "success", "warning", "danger"] : Настройка темы прогресса загрузки. Используются те же параметры, что и при использовании Bootstrap.
inchSpeed (ms): Скорость.
initialBurst (1 - 100): процент загрузки.
Методы
start: Анимирует загрузку до изначально указанной цифры.
$(document).skylo('start');

end: 100% загрузки.
$(document).skylo('end');

set(width): Установка следующего значения процента загрузки. От 1 - 100.
$(document).skylo('set',50); //Set width to 50%

get: Возврат текущего процента загрузки.
$(document).skylo('get');

show(callback): загрузчик помещается в DOM и вызывается callback функция.
$(document).skylo('show',function(){
    // после вставки, анимируется до 30%
    $(document).skylo('set',30);
 });

remove: удаление загрузчика из DOM. Обычно не используется. В конце анимации удаление происходит само собой.
$(document).skylo('end');

Добавлено: 01 Мая 2018 15:25:28 Добавил: Андрей Ковальчук

Плагин селектора элементов списка

Данная статья не урок, а демонстрация работы плагина, который формирует селектор для списков с переключаемой фильтрацией элементов.

Демонстрационные материалы содержат полный код плагина, в котором достаточно просто разобраться.

HTML разметка

<ul id="ulid">
<li>Обычный пункт <input type="hidden" value="value" /></li>
<li>Предварительно выделенный пункт <input type="hidden" value="value" checked="checked" /></li>
<li>Обычный пункт <input type="hidden" value="value" /></li>
</ul>

Плагин работает с неупорядоченным списком, пример представления отдельных пунктов даны в коде выше.

JavaScript
Плагин используется так:
<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
//id(ul id),ширина элемента,высота элемента, количество элементов в строке 
$.fcbkListSelection(id[ul id],ширина элемента,высота элемента,количество элементов в строке);
});
</script>

Добавлено: 01 Мая 2018 15:23:30 Добавил: Андрей Ковальчук

Галерея, использующая jQuery-плагин interface

В этом уроке мы рассмотрим создание галереи при помощи плагина к jQuery, который называется interface. Внешне галерея может показаться простой, но свои функции выполняет исправно.

Шаг 1.

Подключим фреймворк jQuery и плагин interface к нашему документу, прописав следующий код между тегами <head>:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="interface.js"></script>


Шаг 2.

В отдельную таблицу стилей CSS или между тегами <head> пропишем следующие стили:
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
}
a {
text-decoration: none;
}
#slideShow2 {
width: 300px;
height: 300px;
border: 1px solid #ccc;
padding: 10px;
background-color: #fff;
margin: 10px;
}

.pagelinks a {
font-weight: bold;
color: #666;
}
.slideCaption {
background-color: #FFFFCC;
padding: 4px;
text-align: center;
font-weight: bold;
}

.pagelinks a.activeSlide {
color: #f90;
}

/* this is for IE so the prev/next links can be hovered*/
.nextSlide,.prevSlide {
background-image: url(images/spacer.gif);
}

.nextSlide:hover {
background-image: url(images/nextslide.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}

.prevSlide:hover {
background-image: url(images/prevslide.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}

.inputsTooltip {
border: 1px solid #ccc;
background-color: #eee;
padding: 4px;
color: #333;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
filter:alpha(opacity=70);
-moz-opacity:.70;
opacity:.70;
}

#tooltipURL {
display: none;
}

Шаг 3.

Сама галерея представляет собой пустой блок с идентификатором slideShow2. Вставим этот блок в том месте, где мы хотим видеть галерею.
<div id="slideShow2">
  </div>

Шаг 4.

После этого блока вставим следующий код скрипта:
<script type="text/javascript">
$(document).ready(
function() {
$.slideshow({
container : 'slideShow2',
loader: 'images/loader.jpg',
linksPosition: 'top',
linksClass: 'pagelinks',
linksSeparator : ' | ',
fadeDuration : 400,
activeLinkClass: 'activeSlide',
nextslideClass: 'nextSlide',
prevslideClass: 'prevSlide',
captionPosition: 'bottom',
captionClass: 'slideCaption',
autoplay: 5,
images : [
{
src: 'images/Panda.jpg',
caption: 'Fiat Panda'
},
{
src: 'images/Active.jpg',
caption: 'Panda Active'
},
{
src: 'images/Actual.jpg',
caption: 'Panda Actual'
},
{
src: 'images/Dynamic.jpg',
caption: 'Panda Dynamic'
}
 ]
}
)
 $('a').ToolTip({
className: 'inputsTooltip',
position: 'mouse'
}
);
}
);
</script>

В этом скрипте по аналогии, т.е. добавляя следующий кусок кода:
{
src: 'images/Actual.jpg',
caption: 'Panda Actual'
},

можно увеличить количество картинок галереи (естественно, путь к картинкам и их название нужно изменять на свои). Размер всех изображений должен быть 300х200 px.

Скорость смены картинок (задается параметром autoplay) Вы можете регулировать по своему желанию.

Галерея готова! Надеюсь, она найдет свое место и на ваших сайтах!

Добавлено: 01 Мая 2018 15:19:27 Добавил: Андрей Ковальчук

Красивый плагин для увеличения Ваших фото

В сегодняшнем уроке я покажу Вам как с помощью jQuery можно сделать зум для Ваших картинок.

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

Для этого нам понадобится:

jQuery

В начале документа, между тегами <head></head> нам необходимо разместить следующий код:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqzoom.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
$("img.jqzoom").jqueryzoom({
				xzoom: 200, //ширина окна просмотра зума (200 по умолчанию)
				yzoom: 200, //высота окна просмотра зума (200 по умолчанию)
				offset: 10 //отступ от картинки (10 по умолчанию)
				//position: "right" //позиция окна зума ("right" - по умолчанию)
			});
});
</script>

В нем мы подключаем фреймворк, потом подключаем функцию самого зума и в конце задаем основные настройки. Объяснение настроек доступно в комментариях кода.

CSS
<link rel="stylesheet" href="style/jqzoom.css" type="text/css" media="screen" />

Присоединяем таблицу стилей (также между тегами <head></head>). Здесь можно дать волю фантазии и экспериментировать.

HTML

HTML код для оформления фото выглядит следующим образом:
<span class="tozoom"><img src="images/shoe1_small.jpg" class="jqzoom"  alt="images/shoe1_big.jpg"></span>
<span class="tozoom"><img src="images/shoe2_small.jpg" class="jqzoom"  alt="images/shoe2_big.jpg"></span>
<span class="tozoom"><img src="images/shoe3_small.jpg" class="jqzoom"  alt="images/shoe3_big.jpg"></span>

Как Вы видите, каждое фото мы заворачиваем в слой с классом "tozoom". Для каждого фото мы добавляем класс "jqzoom". И в атрибуте alt мы прописываем путь к увеличенному фото.

На сегодня все! Удачи ;)

Добавлено: 01 Мая 2018 15:14:52 Добавил: Андрей Ковальчук

Интересный плагин jQuery ДО/ПОСЛЕ

В этом уроке я расскажу Вам про интересный плагин jQuery ДО/ПОСЛЕ.

Это очень интересное решение. Возможности его использования практически безграничны. Его могут использовать доктора для показа фото своих пациентов до и после; пользователи фотошопа могут показывать различия в изображениях, дизайнеры могут показывать свои работы до и после и так далее... Размер плагина всего 7 кб и его можно использовать множество раз на странице.

Почему этот плагин очень крут?

- красивый эффект без Flash
- Всего 7 кб
- Можно использовать много раз в разных контейнерах
- При отключенном JavaScript показывает оба изображения

Как использовать

Прежде всего, изображения до и после должны быть одного размера. Каждое изображение должно быть в отдельном блоке, и оба изображения еще в одном блоке с ID. Вот так:

<div id="container">
<div><img alt="before" src="p/before.jpg" width="600" height="366" /></div>
<div><img alt="after" src="p/after.jpg" width="600" height="366" /></div>
</div>

У всех изображений ДОЛЖНЫ быть прописаны высота и ширина, иначе не будет работать.

Для правильной работы плагина в шапке документа нам необходимо также прописать фреймворк jQuery, jQuery UI, скрипт плагина.
<script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui.min.js"></script>
  <script type="text/javascript" src="js/jquery.beforeafter.js"></script>
  <script type="text/javascript">
  $(function(){
$('#container').beforeAfter();
});
</script>

Опции

Можно настраивать следующие опции:

animateIntro - позволяет задать стартовое положение бегунка с правой стороны и медленно двигать его налево до центра (по умолчанию - false)

introDelay - если animateIntro true, тогда можно задать задержку в милисекундах перед началом анимации

introDuration - если animateIntro true, тогда можно задать продолжительность в милисекундах всей анимации

showFullLinks - показывать или не показывать ссылки под картинкой, которые позволяют сразу увидеть картинку до или после

Данные опции необходимо прописывать при инициализации:
$('#container').beforeAfter({
animateIntro : true,
introDelay : 2000,
introDuration : 500,
showFullLinks : false
});

Вот и все готово! Всем всего наилучшего!

Добавлено: 01 Мая 2018 15:04:25 Добавил: Андрей Ковальчук

Всплывающий информатор с использованием анимаций CSS3

Динамические информаторы требуют привлечения внимания. Каждый раз, когда происходит изменение, нужно воспроизводить визуальный эффект, чтобы пользователь увидел, что происходит. Воспользуемся анимациями CSS3.

Разметка HTML
Для нашего примера будет использоваться обычная структура меню на основе неупорядоченного списка:

<ul class="menu">
    <li><a href="">Главная</a></li>
    <li><a href="">Статистика</a></li>
    <li>
        <a href="">
            Задачи
            <span class="bubble">9</span>
        </a>
    </li>
    <li><a href="">Настройка</a></li>
</ul>

Все внимание уделяем элементу <span class="bubble">, который является информатором с визуальным эффектом.

CSS
Класс .animating представляет анимацию CSS3, в которой используется кривая Безье.
.animating{
    animation: animate 1s cubic-bezier(0,1,1,0);           
}
 
@keyframes animate{
    from {
       transform: scale(1);
    }
    to {
       transform: scale(1.7);
    }
}


jQuery
Запустить анимацию снова не так-то просто, как может показаться с первого взгляда. На нашем сайте есть перевод статьи авторства Chris Coyier о решении такой задачи.

Для нашего примера используется метод с функцией JavaScript setTimeout(). Каждый раз, когда значение информатора изменяется, класс .animating удаляется спустя секунду (точное время длительности анимации).

В реальных проектах вам не потребуется переменная counterValue. Она используется только для обеспечения возможности увеличения и уменьшения значения информатора на демонстрационной странице.

var counterValue = parseInt($('.bubble').html()); // Получаем текущее значение информатора
 
function removeAnimation(){
    setTimeout(function() {
        $('.bubble').removeClass('animating')
    }, 1000);          
}
 
$('#decrease').on('click',function(){
    counterValue--; // Уменьшаем
    $('.bubble').html(counterValue).addClass('animating'); // Включаем анимацию
    removeAnimation(); // Удаляем класс анимации
})
 
$('#increase').on('click',function(){
    counterValue++; // Увеличиваем
    $('.bubble').html(counterValue).addClass('animating'); // Включаем анимацию
        removeAnimation(); // Удаляем класс анимации
})


Просто, но эффективно
Данный урок демонстрирует простое и практичное применение анимаций CSS3, которое помогает улучшить интерфейс проекта. Экспериментируя с параметрами кривой Безье можно получить интересные визуальные эффекты.

Добавлено: 01 Мая 2018 14:55:24 Добавил: Андрей Ковальчук

Запрет выделения текста на сайте курсором

В этом простом уроке мы узнаем, как сделать запрет выделения текста на сайте при помощи курсора. Сразу предупрежу, что этот урок не ставит целью сделать так, чтобы Ваш текст не могли скопировать с сайта никаким способом. Вовсе нет. Это просто запрет выделения (а следовательно копирования) текста именно курсором.

Шаг 1.

Скачаем и подключим к документу фрэймворк jQuery и плагин для него jquery.disable.text.select.

Для этого между тегами <head> пропишем следующий код:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.disable.text.select.js"></script>

Шаг 2.

Далее вставим такой код скрипта:
<script>
$(function() {
$('.disableSelection').disableTextSelect(); // and enableTextSelect() to re-enable it again
});
</script>

Шаг 3.

Тому тексту, выделение которого вы хотите запретить, необходимо придать класс disableSelection. Например, так:
<p class="disableSelection">

    Невыделяемый текст</p>

Готово! Надеюсь, этот урок был Вам полезен.

Добавлено: 01 Мая 2018 14:26:29 Добавил: Андрей Ковальчук

Складывающаяся 3D анимация на CSS

Google Plus является источником вдохновения многих разработчиков, особенно в сфере использования CSS и JavaScript. В данном уроке воспроизводится эффект сворачивания карты. Для него используются 3D анимации, которые придают шарм визуализации, и не требуется ни строчки кода JavaScript.

Разметка HTML
Для воспроизведения эффекта потребуется серия элементов:

<div id="container">
    <div class="parent1">
        <div class="parent2">
            <div class="parent3">
                <!-- Содержание располагается здесь -->
            </div>
        </div>
    </div>
</div>

Первый элемент "parent" определяет состояние 3D, второе - видимое в процессе анимации содержание, а третий - содержание разворачиваемого блока.

CSS
Код CSS для создания данного эффекта значительно проще, чем может показаться на первый взгляд:
<span style="font-family: monospace;">      /* Статичное состояние */
        #container  {
            width: 400px;
            height: 400px;
            position: relative;
            border: 1px solid #ccc;
            background: url(GoogleTestDW.png) 0 0 no-repeat;
        }
        .parent1    {
            /* Общий контейнер */
            height: 0;
            overflow: hidden;
 
            -webkit-transition-property: height;
            -webkit-transition-duration: .5s;
            -webkit-perspective: 1000px;
            -webkit-transform-style: preserve-3d;
 
            -moz-transition-property:height;
            -moz-transition-duration: .5s;
            -moz-perspective: 1000px;
            -moz-transform-style: preserve-3d;
 
            -o-transition-property:height;
            -o-transition-duration: .5s;
            -o-perspective: 1000px;
            -o-transform-style: preserve-3d;
 
            transition-property: height;
            transition-duration: .5s;
            perspective: 1000px;
            transform-style: preserve-3d;
        }
        .parent2    {
            /* Содержание, выводимое в процессе анимации */
        }
        .parent3    {
            /* Анимированный, "складывающийся" блок */
            height: 56px;
 
            -webkit-transition-property: all;
            -webkit-transition-duration: .5s;
            -webkit-transform: rotateX(-90deg);
            -webkit-transform-origin: top;
 
            -moz-transition-property: all;
            -moz-transition-duration: .5s;
            -moz-transform: rotateX(-90deg);
            -moz-transform-origin: top;
 
            -o-transition-property: all;
            -o-transition-duration: .5s;
            -o-transform: rotateX(-90deg);
            -o-transform-origin: top;
 
            transition-property: all;
            transition-duration: .5s;
            transform: rotateX(-90deg);
            transform-origin: top;
        }
 
        /* Состояние hover для включения анимаций */
        #container:hover .parent1   { height: 111px; }
        #container:hover .parent3   {
            -webkit-transform: rotateX(0deg);
            -moz-transform: rotateX(0deg);
            -o-transform: rotateX(0deg);
            transform: rotateX(0deg);
            height: 111px;
        }
</span>

Статичное состояние элемента parent1 определяет 3D трансформацию и состояния перспективы, начиная с высоты 0px. Статичное состояние элемента parent3 устанавливает переход и трансформацию вращения. При наведении курсора высота элементов parent1 и parent3 анимируется до конечных значений (в нашем случае 111px), и они поворачиваются до 0 градусов.

Лучше всего таким образом выводит дополнительные изображения, так как на них лучше заметны изменения перспективы.

Добавлено: 01 Мая 2018 14:19:07 Добавил: Андрей Ковальчук

модальное окно

Сегодня мы рассмотрим интересный скрипт, который поможет нам выводить любые внешние файлы в красивом модальном окне.

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

С самого начала документа подключаем фреймворк и функцию::

<script src="jquery.tools.min.js"></script>
      <script>
$(function() {
      $("a[rel]").overlay(function() {
      var wrap = this.getContent().find("div.wrap");
      if (wrap.is(":empty")) {
      wrap.load(this.getTrigger().attr("href"));
      }
      });
      });
</script>

Далее подключаем стили оформления. В данном примере я использовал и внешнюю таблицу стилей и внутренние стили. Можете их объединить в одном месте, если желаете.
<link rel="stylesheet" type="text/css" href="overlay-minimal.css"/>
  <style>
      body {
      padding:150px 50px;
      font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
      }
   
  /* use a semi-transparent image for the overlay */
      #overlay {
      background-image:url(transparent.png);
      color:#efefef;
      }
  /* container for external content. uses vertical scrollbar, if needed */
      div.wrap {
      height:441px;
      overflow-y:auto;
      }
  </style>

В коде присутствуют пути к картинкам, так что если будете их переносить - не забывайти про пути.

И теперь в любом месте документа вставляем ссылку на внешний файл и создаем кнопку для вызова этого файла.
<a href="external-content.htm" rel="#overlay">
 <button type="button">Показать внешний файл в модальном окне!!!</button>
      </a>
      <div class="overlay" id="overlay">
  <div class="wrap"></div>
    </div>

Урок закончен. До завтра.

Добавлено: 01 Мая 2018 14:16:29 Добавил: Андрей Ковальчук