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

Страница 1 из 612345»...Последняя »

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

28 Ноябрь 2008, 16:23

Прежде чем начать описание 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" />');

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

Рубрика: JavaScript  |  Отзывов: 4

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

27 Ноябрь 2008, 13:42

Плагин 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(); 
}
Рубрика: JavaScript, PHP  |  Отзывов: 5

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

26 Ноябрь 2008, 12:24

В последнее время на многих блогах стали использовать блоки в сайдбаре, переключаемые с помощью вкладок. Во-первых для экономии места, а во-вторых, это просто красиво. Далее описан простой способ создания таких вкладок при помощи 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();
});
Рубрика: JavaScript  |  Отзывов: 15
Страница 1 из 612345»...Последняя »