Статьи
Lava Lamp E-mail
Рейтинг пользователей: / 2
ХудшийЛучший 
Автор: Corak   
26.02.2010 19:20

Когда я впервые столкнулся с эффектом LavaLamp, то я честно подумал, что он сделан при помощи флеша. Но оказалось, что это чистый JavaScript, причем реализуется он очень просто и легко, и весит мало! 

Демо

Не правда ли красиво? :)

Подробнее... Комментарии (2)
Обновлено 28.02.2010 16:25
 
Cycle jQuery Plugin часть 2 E-mail
Автор: Corak   
09.02.2010 19:19

В прошлой статье по Cycle plugin я написал теорию по использовании этого плагина, в этой статье мы перейдем к конкретным примерам использования.

ДЕМО

Подробнее... Добавить комментарий
Обновлено 03.03.2010 18:26
 
Blank Template на Joomla E-mail
Автор: Corak   
02.01.2010 18:27

При написании своей предыдущей заметки, мне понадобилось создать страницу для демки. Там должен был быть только мой код, без какого либо вмешательства Joomla. Чтобы добиться этого понадобилось обработать напильником имеющийся у меня не используемый шаблон. Сначала я попробовал оставить только вывод компонента в нем, но это не сработало, потому что все равно присутствовал лишний код. Решение на самом деле очень простое.

Для начала создайте секцию и категорию для демок, и создайте отдельное меню, в котором будет пункт с этой секцией. В статьях пишите html код всей страницы. Мне кажется такой подход дает больше гибкости. Затем открывайте какой-либо не нужный вам шаблон, жмите Edit HTML. Стирайте из него все и запишите следующий код:

<?php
// получаем id вызываемой статьи
$id = $_GET['id']; 
// как правило пареметр id имеет вид "id:alias", но так как alias нам не нужен, то "выдираем" его из параметра
$id = explode(":", $id);
// проверка на правильность id
if(intval($id) != 0)
{
 // простой SELECT запрос
 $query = 'SELECT introtext FROM content_table WHERE id='.$id[0];
 // получаем содержимое статьи
 $sql = mysql_query($query);
 $out = mysql_fetch_array($sql);
 // выводим его
 echo $out['introtext'];
}
?>

content_table в данном случае - это таблица, в которой хранятся статьи.

Теперь осталось только назначить данный шаблон для нашей категории для демок. Вот и все.

Добавить комментарий
Обновлено 02.01.2010 21:29
 
Cycle jQuery Plugin часть 1 E-mail
Автор: Corak   
02.01.2010 11:18

Сегодня мы поговорим о Cycle, плагине для  jQuery. Он предназначен для создания всяких разных прокруток html блоков. Например, на его основе  была сделана циклическая презентация в одной из моих заметок.

Подробнее... Комментарии (2)
Обновлено 28.02.2010 16:26
 
Подсветка кода на Joomla E-mail
Автор: Corak   
07.12.2009 23:36

При написании статьи про презентацию на jQuery мне понадобилось расширение для подсветки кода на Joomla. Начал рыть в интернетах в поисках. Нашел несколько плагинов. Выбор мой остановился  CodeCitation. Очень просто и удобный плагин. Для вставки блоков кода надо просто заключить код в тэги {сodecitation class="brush:html;}<div>&nbsp; </div>{/codecitation}. Значение параметра brush задает язык, на котором написан код. Все очень просто и удобно, пользуйтесь на здоровье.

Добавить комментарий
Обновлено 07.12.2009 23:47
 
Циклическое слайдшоу на jQuery E-mail
Автор: Corak   
06.12.2009 00:44

Нашел в сети прикольную реализацию сабжа. Основана она на Cycle, плагине для jQuery. Служит он для реализации всяких штук с зацикливанием всяких HTML блоков. О нем я возможно напишу в следующий раз. Ссылка интересующимся. Но вернемся к нашему слайдшоу.

Тут вы можете взять скачать пример. Или посмотреть демо.

Настройка скрипта

Первое, что понадобиться это вставить следующий код внутрь тэга <head>

<head>
    <!-- Stylesheets-->
    <link rel="stylesheet" type="text/css" href="/css/presentationCycle.css" />

    <!-- Scripts -->
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
    <script type='text/javascript' src='js/jquery.cycle.all.min.js'></script>
    <script type='text/javascript' src='js/presentationCycle.js'></script>
</head>

Затем определяем контейнер для Cycle.




<div id="presentation_container" class="pc_container">

    <div class="pc_item">
        <div class="desc">
            <h1>Description title</h1>
            You can put your description in here.
        </div>
        <img src="/images/slide1.jpg" alt="slide1" />
    </div>

    <!-- ... repeat the previous item -->

</div>

<div id="presentation_container" class="pc_container"> будет передаваться в Cycle как контейнер для блоков html, которые необходимо будет прокручивать. Внутри него определяются несколько блоков  <div class="pc_item">. Они и являются отдельными слайдами, которые необходимо прокручивать. 

И последний шаг - дописываем следующий код:

<script type="text/javascript">
    presentationCycle.init();
</script>

Настройка внешнего вида

Теперь рассмотрим внутренности файла js/presentationCycle.js

С нем мы задаем структуру для Cycle. Детали опустим, они выходят за рамки данной заметки. 

Первый интересный нам кусок кода находиться на 18 строке:

//progressbar options
barHeight: 14,
barDisplacement: 20,
barImgLeft: "images/pc_item_left.gif",
barImgRight: "images/pc_item_right.gif",
barImgCenter: "images/pc_item_center.gif",
barImgBarEmpty: "images/pc_bar_empty.gif",
barImgBarFull: "images/pc_bar_full.gif",

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

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

barDisplacement является суммой padding-а и margin-а.

Для внесения изменений в настройки нет необходимости менять сам Javascript файл. Просто после задания контейнера для Cycle можно вставить код с изменением настроек. Пример:

//Настройки полосы прокрутки
 
presentationCycle.barHeight = 10; //тут изменяем высоту полосы
presentationCycle.barImgLeft = "images/pc_item_left_custom.gif"; //а тут меняем изображение
 
presentationCycle.init(); //запуск скрипта

Для настройки параметров цикла, надо задать следующие переменные:

 
//настройки прокрутки
slideTimeout: 8000, // интервал смены слайда
containerId: "presentation_container", // контейнер в котором содержаться сменяющиеся изображения
//настройки для Cycle
cycleFx: 'scrollHorz', // тип эффекта
cycleSpeed: 600, // скорость смены слайда

Вот собственно и все. 

Добавить комментарий
Обновлено 07.12.2009 00:32