Архив за Ноябрь 2008

Coda Slider эффект. Часть 1

Прежде чем начать описание Coda Slider эффект, стоит посмотреть, что это вообще такое: вот один из примеров реализации. Повторить этот эффект у себя на сайте очень просто, если знать, какие плагины jQuery использовать:

HTML:

<div id="slider">
  <ul class="navigation">
    <li><a href="#sites">Sites</a></li>
    <li><a href="#files">Files</a></li>
    <li><a href="#editor">Editor</a></li>
    <li><a href="#preview">Preview</a></li>
    <li><a href="#css">CSS</a></li>
    <li><a href="#terminal">Terminal</a></li>
    <li><a href="#books">Books</a></li>
  </ul>

  <!-- element with overflow applied -->
  <div class="scroll">
    <!-- the element that will be scrolled during the effect -->
    <div class="scrollContainer">
      <!-- our individual panels -->
      <div class="panel" id="sites"> ... </div>
      <div class="panel" id="files"> ... </div>
      <div class="panel" id="editor"> ... </div>
      <div class="panel" id="preview"> ... </div>
      <div class="panel" id="css"> ... </div>
      <div class="panel" id="terminal"> ... </div>
      <div class="panel" id="books"> ... </div>
    </div>
  </div>
</div>

CSS:

#slider {
  width: 620px;
  margin: 0 auto;
  position: relative;
}

.scroll {
  height: 250px;
  overflow: auto;
  position: relative; /* fix for IE to respect overflow */
  clear: left;
  background: #FFFFFF url(images/content_pane-gradient.gif) repeat-x scroll left bottom;
}

.scrollContainer div.panel {
  padding: 20px;
  height: 210px;
  width: 580px; /* change to 560px if not using JS to remove rh.scroll */
}

Стиль для кнопок прокрутки влево и вправо:

.scrollButtons {
  position: absolute;
  top: 150px;
  cursor: pointer;
}

.scrollButtons.left {
  left: -20px;
}

.scrollButtons.right {
  right: -20px;
}

Подключаем библиотеку jQuery и необходимые плагины;

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery.scrollTo-1.3.3-min.js" type="text/javascript"></script>
<script src="jquery.localscroll-1.2.5-min.js" type="text/javascript"></script>
<script src="jquery.serialScroll-1.2.1-min.js" type="text/javascript"></script>

Создаем кнопки прокрутки влево и вправо:

var $scroll = $('#slider .scroll');
$scroll
  .before('<img class="scrollButtons left" src="images/scroll_left.png" />')
  .after('<img class="scrollButtons right" src="images/scroll_right.png" />');

Продолжение следует…

Создание превьюшек: PHP и плагин imgAreaSelect для jQuery

Плагин imgAreaSelect позволяет выделить область на большом изображении с помощью мышки. Координаты выделенной области отправляются на сервер и серверный скрипт создает превьюшку заданного размера (в нашем примере 100×100px). При этом размер выделенной области может быть любым - 200×200px, 300×300px, 50×50px и т.д.

1. Создаем форму для загрузки файла изображения на сервер:

<form name="photo" enctype="multipart/form-data" action="my_upload.php" method="post"> 
Photo: <input name="image" type="file"> 
<input name="upload" value="Upload" type="submit"> 
</form>

2. Переименовываем и изменяем размер загруженного изображения:

if (isset($_POST["upload"])) {
    //Get the file information
    $userfile_name = $_FILES["image"]["name"];
    $userfile_tmp = $_FILES["image"]["tmp_name"];
    $userfile_size = $_FILES["image"]["size"];
    $filename = basename($_FILES["image"]["name"]);
    $file_ext = substr($filename, strrpos($filename, ".") + 1);

    //Only process if the file is a JPG and below the allowed limit
    if((!emptyempty($_FILES["image"])) && ($_FILES["image"]["error"] == 0)) {
        if (($file_ext!="jpg") && ($userfile_size > $max_file)) {
            $error= "ONLY jpeg images under 1MB are accepted for upload";
        }
    }else{
        $error= "Select a jpeg image for upload";
    }
    //Everything is ok, so we can upload the image.
    if (strlen($error)==0){

        if (isset($_FILES["image"]["name"])){

            move_uploaded_file($userfile_tmp, $large_image_location);
            chmod ($large_image_location, 0777);

            $width = getWidth($large_image_location);
            $height = getHeight($large_image_location);
            //Scale the image if it is greater than the width set above
            if ($width > $max_width){
                $scale = $max_width/$width;
                $uploaded = resizeImage($large_image_location,$width,$height,$scale);
            }else{
                $scale = 1;
                $uploaded = resizeImage($large_image_location,$width,$height,$scale);
            }
            //Delete the thumbnail file so the user can create a new one
            if (file_exists($thumb_image_location)) {
                unlink($thumb_image_location);
            }
        }
        //Refresh the page to show the new uploaded image
        header("location:".$_SERVER["PHP_SELF"]);
        exit();
    }
}

3. Теперь можно использовать плагин imgAreaSelect для выделения области. Через скрытые поля формы на сервер передаются переменные:

  • x1, y1 - координаты левого верхнего угла выделеной области
  • x2, y2 - координаты правого нижнего угла выделеной области
  • width - ширина области выделения
  • height - высота области выделения

Плагин поддерживает множество параметров: мы выбрали соотношение сторон выделенной области 1:1 (поскольку превьюшка у нас 100×100px, т.е. соотношение сторон 1:1, то и выделенная область должна быть 1:1) и предварительный просмотр того, что получим в результате.

$(window).load(function () { 
    $("#thumbnail").imgAreaSelect({ aspectRatio: "1:1", onSelectChange: preview })
});

Функция prewiev() вызывается как только будет выделена область на большом изображении. Она создает окно предварительно просмотра - что будет получено в результате. Вторая часть функции записывает в скрытые поля формы координаты области выделения, которые позже будут отправлены на сервер.

function preview(img, selection) { 
    var scaleX = 100 / selection.width
    var scaleY = 100 / selection.height;   

    $("#thumbnail + div > img").css({ 
        width: Math.round(scaleX * 200) + "px"
        height: Math.round(scaleY * 300) + "px"
        marginLeft: "-" + Math.round(scaleX * selection.x1) + "px"
        marginTop: "-" + Math.round(scaleY * selection.y1) + "px" 
    })
    $("#x1").val(selection.x1)
    $("#y1").val(selection.y1)
    $("#x2").val(selection.x2)
    $("#y2").val(selection.y2)
    $("#w").val(selection.width)
    $("#h").val(selection.height)
}

Следующая функция перед отправкой формы проверяет, сущестувет ли область выделения - т.е. что пользователь выделил мышкой область для создания превьюшки.

$(document).ready(function () { 
    $("#save_thumb").click(function() { 
        var x1 = $("#x1").val()
        var y1 = $("#y1").val()
        var x2 = $("#x2").val()
        var y2 = $("#y2").val()
        var w = $("#w").val()
        var h = $("#h").val()
        if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){ 
            alert("You must make a selection first")
            return false
        }else{ 
            return true
        } 
    })
});

4. Наконец, серверный скрипт создает на основе переданных координат области выделения превьюшку:

if (isset($_POST["upload_thumbnail"])) { 
    //Get the new coordinates to crop the image. 
    $x1 = $_POST["x1"]
    $y1 = $_POST["y1"]
    $x2 = $_POST["x2"]; // not really required 
    $y2 = $_POST["y2"]; // not really required 
    $w = $_POST["w"]
    $h = $_POST["h"]
    //Scale the image to the 100px by 100px 
    $scale = 100/$w
    $cropped = resizeThumbnailImage($thumb_image_location, $large_image_location,$w,$h,$x1,$y1,$scale)
    //Reload the page again to view the thumbnail 
    header("location:".$_SERVER["PHP_SELF"])
    exit()
}

Вкладки с использованием jQuery

В последнее время на многих блогах стали использовать блоки в сайдбаре, переключаемые с помощью вкладок. Во-первых для экономии места, а во-вторых, это просто красиво. Далее описан простой способ создания таких вкладок при помощи jQuery.

Сначала подключаем библиотеку jQuery и файл стилей в разделе head HTML-документа:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tabs.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Добавляем сами вкладки на страницу:

<div class="tabs">
    <!–- tabs -–>
    <ul class="tabNavigation">
    <li><a href="#first">Первая</a></li>
    <li><a href="#second">Вторая</a></li>
    <li><a href="#third">Третья</a></li>
    </ul>

    <!–- tab containers -–>
    <div id="first">
    <p>Содержание первой вкладки</p>
    </div>
    <div id="second">
    <p>Содержание второй вкладки</p>
    </div>
    <div id="third">
    <p>Содержание третьей вкладки</p>
    </div>
</div>

А теперь небольшой скрипт (файл tabs.js), который позволит нам переключать вкладки.

$(function () {
    var tabContainers = $('div.tabs > div');
    tabContainers.hide().filter(':first').show();
           
    $('div.tabs ul.tabNavigation a').click(function () {
        tabContainers.hide();
        tabContainers.filter(this.hash).show();
        $('div.tabs ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');
        return false;
    }).filter(':first').click();
});