Архив за Октябрь 2008

Страница 2 из 8«12345»...Последняя »

Плагин Cycle для библиотеки jQuery. Часть 2

27 Октябрь 2008, 13:52

Опция delay устанавливает количество миллисекунд, которые надо добавить к значению timeout при первой смене кадров. Т.е. слайдшоу будет запущено через timeout+delay миллисекунд после загрузки страницы. Эта опция будет полезна, если вы планируете разместить на одной странице несколько слайдшоу, чтобы они запускались по очереди.

Для использования опции easing требуется подключить к странице jQuery Easing Plugin (мы уже сделали это). Опция задает дополнительные эффекты перехода при смене изображений:

  • easein
  • easeinout
  • easeout
  • expoin
  • expoout
  • expoinout
  • bouncein
  • bounceout
  • bounceinout
  • elasin
  • elasout
  • elasinout
  • backin
  • backout
  • backinout
  • linear

Опция sync определяет, как следующий кадр слайдшоу будет заменять текущий. Если используется значение по умолчанию false, следующий кадр появляется после того, как исчезнет текущий. Если использовать значение true, следующий кадр начнет появляться еще до того, как исчезнет предыдущий.

Эффект shuffle сменяет кадры слайдшоу как при перетасовке карт. Для использования эффекта необходимо передать методу cycle() объект настроек, где будет определено свойство shuffle с координатами. Значения по умолчанию:

{ top: 15, left: width_of_container }

Есть возможность организовать смену кадров по щелчку кнопкой мыши. Опции prev и next служат для указания элемента, при щелчке по которому будет показан следующий/предыдущий кадр. Если опция timeout=0, то смена кадров будет происходить только по щелчку кнопкой мыши.

Можно совмещать автоматическую смену кадров (опция timeout не равна нулю) и смену кадров по щелчку кнопкой мыши. На странице демонстрации можно видеть пример, где кадры сменяются автоматически каждые три секунды, просмотр останавливается при наведении указателя мыши, и можно просматривать кадры по щелчку кнопкой мыши.

Опция pager используется для создания панели навигации: можно перейти к любому кадру слайдшоу. Опция предписывает плагину создать панель навигации - контейнер, который содержит ссылки на все кадры слайдшоу.

При использовании опции pager плагин сформирует элементы навигации в виде якорей, для которых можно определить стиль:

#nav a { background-color: #fc0 }

Для активного элемента навигации можно определить класс activeSlide:

#nav a { border: 1px solid #ccc; background: #fc0; text-decoration: none; margin: 0 5px; padding: 3px 5px;  }
#nav a.activeSlide { background: #ea0 }
#nav a:focus { outline: none; }

Чтобы остановить показ слайдшоу, передайте методу cycle() строку ’stop’:

$('#slideshow').cycle('stop');

Чтобы приостановить/продолжить показ слайдшоу, надо передать методу cycle() строку ‘pause’/'resume’:

$('#slideshow').cycle('pause');

Плагин позволяет вызвать пользовательскую функцию перед или после смены кадра:

$('#s5').cycle({
    fx:     'scrollLeft',
    timeout: 5000,
    before:  onBefore,
    after:   onAfter
});

Примеры функций:

function onBefore() {
    $('#output').html("Scrolling image:<br>" + this.src);
}
function onAfter() {
    $('#output').html("Scroll complete for:<br>" + this.src)
        .append('<h3>' + this.alt + '</h3>');
}

Ссылки по теме:

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

Плагин Cycle для библиотеки jQuery. Часть 1

24 Октябрь 2008, 10:11

Плагин Cycle для библиотеки jQuery предназначен для создания слайдшоу на сайте. Небольшой по размеру, но при этом позволяет добавить множество визуальных эффектов при смене кадров. Слайдшоу запускается вызовом метода cycle() для контейнера элементов, участвующих в показе. Хотя я говорю “слайдшоу”, на самом деле можно организовать ротацию любых элементов в контейнере.

Плагин Cyrcle поддерживает множество опций для индивидуальной настройки слайдшоу. Опции по умолчанию могут быть переопределены путем передачи методу cyrcle() объекта, содержащего параметры настройки.

// override these globally if you like
$.fn.cycle.defaults = {
    fx:           'fade', // one of: fade, shuffle, zoom, scrollLeft, etc
    timeout:       4000,  // milliseconds between slide transitions (0 to disable auto advance)
    continuous:    0,     // true to start next transition immediately after current one completes
    speed:         1000,  // speed of the transition (any valid fx speed value)
    speedIn:       null,  // speed of the 'in' transition
    speedOut:      null,  // speed of the 'out' transition
    next:          null,  // id of element to use as click trigger for next slide
    prev:          null,  // id of element to use as click trigger for previous slide
    prevNextClick: null,  // callback fn for prev/next clicks:  function(isNext, zeroBasedSlideIndex, slideElement)
    pager:         null,  // id of element to use as pager container
    pagerClick:    null,  // callback fn for pager clicks:  function(zeroBasedSlideIndex, slideElement)
    pagerEvent:   'click', // event which drives the pager navigation
    pagerAnchorBuilder: null, // callback fn for building anchor links
    before:        null,  // transition callback (scope set to element to be shown)
    after:         null,  // transition callback (scope set to element that was shown)
    end:           null,  // callback invoked when the slideshow terminates (use with autostop or nowrap options)
    easing:        null,  // easing method for both in and out transitions
    easeIn:        null,  // easing for "in" transition
    easeOut:       null,  // easing for "out" transition
    shuffle:       null,  // coords for shuffle animation, ex: { top:15, left: 200 }
    animIn:        null,  // properties that define how the slide animates in
    animOut:       null,  // properties that define how the slide animates out
    cssBefore:     null,  // properties that define the initial state of the slide before transitioning in
    cssAfter:      null,  // properties that defined the state of the slide after transitioning out
    fxFn:          null,  // function used to control the transition
    height:       'auto', // container height
    startingSlide: 0,     // zero-based index of the first slide to be displayed
    sync:          1,     // true if in/out transitions should occur simultaneously
    random:        0,     // true for random, false for sequence (not applicable to shuffle fx)
    fit:           0,     // force slides to fit container
    pause:         0,     // true to enable "pause on hover"
    pauseOnPagerHover: 0, // true to pause when hovering over pager link
    autostop:      0,     // true to end slideshow after X transitions (where X == slide count)
    autostopCount: 0,     // number of transitions (optionally used with autostop to define X)
    delay:         0,     // additional delay (in ms) for first transition (hint: can be negative)
    slideExpr:     null,  // expression for selecting slides (if something other than all children is required)
    cleartype:     0,     // true if clearType corrections should be applied (for IE)
    nowrap:        0      // true to prevent slideshow from wrapping
};

Для начала подключим в разделе head HTML-страницы три JavaScript-файла:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js?v2.11"></script>
<script type="text/javascript" src="js/jquery.easing.1.1.1.js"></script>

HTML и CSS:

<div class="pics">
    <img src="images/beach1.jpg" width="200" height="200" />
    <img src="images/beach2.jpg" width="200" height="200" />
    <img src="images/beach3.jpg" width="200" height="200" />
</div>
.pics { 
    height:  232px; 
    width:   232px; 
    padding: 0; 
    margin:  0; 
}
 
.pics img { 
    padding: 15px; 
    border:  1px solid #ccc; 
    background-color: #eee; 
    width:  200px;
    height: 200px;
    top:  0;
    left: 0
}

Выбираем эффект перехода:

  • blindX
  • blindY
  • blindZ
  • cover
  • curtainX
  • curtainY
  • fade
  • fadeZoom
  • growX
  • growY
  • scrollUp
  • scrollDown
  • scrollLeft
  • scrollRight
  • scrollHorz
  • scrollVert
  • shuffle
  • slideX
  • slideY
  • toss
  • turnUp
  • turnDown
  • turnLeft
  • turnRight
  • uncover
  • wipe
  • zoom

Задать эффект перехода можно либо путем передачи методу cyrcle() строки с названием эффекта, либо передав методу объект настроек, где будет определено свойство fx в значении выбранного эффекта (’cover’, ‘fade’ и т.п.).

$('#s1').cycle('fade');

$('#s2').cycle({
    fx: 'scrollDown'
});

Следующий шаг - выбор скорости смены кадров и продолжительность эффекта перехода:

  • speed - продолжительность в миллисекундах эффекта перехода;
  • timeout - количество миллисекунд между сменами кадров.
$('#s3').cycle({
    fx:    'fade',
    speed:  2500
});
$('#s4').cycle({
    fx:      'scrollDown',
    speed:    300,
    timeout:  2000
});

Кроме упомянутых, можно выбрать множество других опций, например pause и random:

  • pause - остановить слайдшоу при наведении указателя мышки;
  • random - показывать картинки в случайном порядке.
$('#s5').cycle({
    fx:    'fade',
    pause:  1
});
$('#s6').cycle({
    fx:     'scrollDown',
    random:  1
});

Ссылки по теме:

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

Загрузка больших файлов на сайт

22 Октябрь 2008, 12:08

Довольно часто на форумах можно встретить вопрос: “Как залить через WEB интерфейс файл размером 10 Mb? При попытках это сделать возникают какие-то ошибки“. Если вы столкнулись с аналогичной проблемой, то данная заметка именно для вас.

Конфигурационный файл PHP php.ini имеет несколько директив, связанных с загрузкой файлов на сервер:

  • file_uploads=On — разрешает загрузку файлов на сервер по протоколу HTTP;
  • upoad_tmp_dir=/tmp — устанавливает каталог для временного хранения загруженных файлов;
  • upload_max_filesize=2M — устанавливает максимальный объем загружаемых файлов;
  • post_max_size=2M — устанавливает максимальный допустимый размер POST-данных. Это свойство также влияет на закачиваемые файлы. Чтобы закачивать большие файлы, это значение должно быть выше upload_max_filesize.

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

Итак, редактируем файл php.ini:

post_max_size=10M
upload_max_filesize=10M

Также бывает полезно увеличить значение переменных PHP max_input_time и max_execution_time (время приема данных и выполнения скрипта):

max_input_time=600
max_execution_time=600

Ссылки по теме:

Рубрика: PHP  |  Отзывов: 13
Страница 2 из 8«12345»...Последняя »