Эффект фото ленты 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 возникали какие то глюки и он отображал рисунки не в полный размер и это же касательно рисунков самой ленты.
|
Поясните пожалуйста что значит рисунок загрузки и рисунок закрытия? Рисунки стрелок любые самим загрузить просто и всё?
И ещё не могли бы дать ссылочку на скачивание этого скрипта уже готового к вставки... Заранее спасибо
Не могу никак сделать нормальное фотошоу
Отправить комментарий
Приветствуются комментарии:Для остальных вопросов и обсуждений есть форум.