Javascript.RU

Эффект фото ленты 2 (вставка javascript)

Здравствуйте читатели!
Начнем разроб написания ленты на javascript. Здесь я уже применяю объектно ориентированный javascript (ООП). В моем случаю я создал объект HelpeR с его свойствами, а его прототип заполнил методами.

var HelpeR = function() {
/* все свойства класса */
}
HelpeR.prototype = {
/* все методы класса */
}
var HR_lenta = new HelpeR(); // оператор new создает новый объект

Так же думаю следует упомянуть, что var a = []; и есть var a = new Array(); т.е. [] и есть краткая запись new Array(). И тоже самое казательно var obj = {}; и есть var obj = new Object();. Если объект имеет элементы var obj = { elem : 'Фузайлов', elem2 : 'Кадыр' };, то к ним можно обратиться следующим образом:
1) alert(obj.elem); выдаст значение Фузайлов
2) alert(obj['elem2']); выдаст такой результат Кадыр
И так же напомню на счет функции eval. Она исполняет переданный ей текст в виде кода, т.е. eval("var x = 5;");
alert(x + 3); выдаст результат 8.
И на последок упомяну на счет того, что обращение к свойству float как obj.style.float является ошибочным. К этому свойству следует обращаться для Mozilla obj.style.cssFloat а для IЕ obj.style.styleFloat.
Сначала, я написал скрипт без возможности его настройки пользователем, но потом подумал, что мои визуальные настройки могут не удовлетворять дизайну страницы пользователя вот и решил вынести все настройки для возможности их настройки.
Для применения скрипта следует вставить нижеприведенный код в то место страницы, где по вашему желанию должена распологаться фото лента.

var ln_photos       = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg']; // все рисунки ленты. Указывать только названия рисунков без директории
  var ln_big_photos           = ['1b.jpg','2b.jpg','3b.jpg','4b.jpg','5b.jpg']; //фото которые будут  открываться при клике на фото в ленте
  var ln_titles               = ['Студия Фузайлова','Студия  Фузайлова','Студия Фузайлова','Студия Фузайлова','Студия Фузайлова'];//описание  фото
  var ln_all_pics             = 2; //кол-во отображаемых рисунков в ленте
  var ln_speed                = 1; //скорость прокрутки (1-макс  ∞-мин) т.е. если вы выставите 1, то скорость прокрутки будет максимальной
  var ln_step                 = 4; //кол-во прокручиваемых пикселей. При увеличении этого показателя, фото будет прокручиваться быстрее, но при больших показателях качество прокрутки может испортиться
  var ln_bgcolor              = '#fff4e4'; // цвет фона ленты
  var ln_border               = '1px solid #000000'; // настройка  рамки (толщина, вид и цвет)
  var ln_left_arrow           = 'arrow_left.jpg'; // рисунок левой стрелки (указывать полный путь)
  var ln_left_arrow_width  = 22; // Ширина рисунка левой стрелки 
  var ln_left_arrow_height = 38; // Высота рисунка левой стрелки 
  var ln_right_arrow          = 'arrow_right.jpg'; // рисунок правой стрелки (указывать полный путь)
  var ln_right_arrow_width  = 22; // Ширина рисунка правой стрелки 
  var ln_right_arrow_height = 38; // Высота рисунка правой стрелки
  var pic_dir                 = '';  // директория где хранятся рисунки. Пример: './tpl/img/' или  './images/'; в конце обязательный слэш --> /
  var pic_width               = 250; // ширина рисунков
  var pic_height              = 188; // высота рисунков
  var pic_padding             = 8;   // padding рисунка
  var desc_font               = 'Tahoma'; // шрифт описания
  var desc_font_size          = 12; // размер шрифта описания
  var desc_color              = '#120081'; // цвет шрифта описания
  var desc_align              = 'center'; // выравнивание описания по горизонтали
  var HR_Blackout             = 1; // подключение эффекта HR_Blackout,  который начинает работать после полной загрузки страницы  1-да 0-нет
  var HR_Blackout_src         =  'HR_Blackout.js'; //полный путь к файлу HR_Blackout.js Если у вас его нет, то  вы можете его скачать с <a href="http://fuzaylov.net/hr/HR_Blackout.rar">http://fuzaylov.net/hr/HR_Blackout.rar</a>
/* Если вы подключили эффект  HR_Blackout, то настройте его параметры */
  var tit_align      = 'left'; //выравнивание описания рисунка
  var tit_font       = 'Tahoma'; //шрифт описания
  var tit_font_size  = 12; //размер шрифта описания
  var tit_font_color = '#666666'; // цвет шрифта описания
  var main_bgcolor   = '#333333'; //цвет главного фона (рекомендутеся оставить без изменения)
  var loading_img    = 'loading.gif'; //полный путь к рисунку загрузки
  var close_img      = 'x.jpg'; //полный путь к рисунку закрытия
  /* HR_Blackout */
  </script>  <script language="javascript" src="HR_PhotoLine.js"></script>

Первое что вы видете в коде, это div элемент страницы. Он и является точкой втавки фото ленты. Также для максимального удобства я вынес все визуальные и некоторые технические параметры для возможности изменения их пользователем под дизайн своей страницы. Думаю разобраться будет не сложно, т.к. я специально оставил комментарии для каждой настройки. Останавлюсь на моменте подключения эффекта HR_Blackout. Это тоже эффект написанный мной, и он является копией эффекта Lightbox. Пост об этом эффекте тут. Далее я специально выделил комментарием, настройки эффекта HR_Blackout, если пользователь включит его, то он тоже может настроить их под дизай своей страницы. Он срабатывает во время клика на какой либо рисунок фото ленты и с эффектом затемнения открывет большой вариант рисунка, указанный в массиве ln_big_photos. А ширину и высоту рисунок стрелок прокрутки пришлось вставить, т.к. в IE возникали какие то глюки и он отображал рисунки не в полный размер и это же касательно рисунков самой ленты.

0

Автор: Гость (не зарегистрирован), дата: 24 октября, 2011 - 11:03
#permalink

Поясните пожалуйста что значит рисунок загрузки и рисунок закрытия? Рисунки стрелок любые самим загрузить просто и всё?


Автор: Гость (не зарегистрирован), дата: 24 октября, 2011 - 11:09
#permalink

И ещё не могли бы дать ссылочку на скачивание этого скрипта уже готового к вставки... Заранее спасибо


Автор: МихаилМИ (не зарегистрирован), дата: 22 июля, 2012 - 00:18
#permalink

Не могу никак сделать нормальное фотошоу


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
12 + 1 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
HelpeR
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum