Довелось мне повозиться с сайтом бутика «Кабуки». На главной странице используется интересная вещь, а главное для бутика, как мне кажется, совсем удачное решение – ротатор изображений. Вот только беда в том, что выглядит и работает все хорошо, как ни странно, только в IE. Поковырявшись в дебрях кода, решил написать свой ротатор картинок. В «демо» можно увидеть результат того, что получилось. А просмотрев видео, можно научиться делать самому ротатор картинок.
Надеюсь данный урок по созданию своего ротатора изображений (картинок), для сайта вам понравился. С уважение команда WebForMySelf.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Смотреть
Спасибо за урок. Все хорошо, но можно ли поставить ссылки на каждое изображение? Будет ли работать во всех браузерах?
И было бы просто замечательно!
Антон, можно так сделать. Вешаете ссылки на ваши изображения и при клике на каждое изображение будет открываться новая страница. Единственный совет, сделаете так чтобы каждая страница открывалась при этом в новом окне. То есть пользователь кликает по ссылке, она открывается в новом окне, а ротатор продолжает работать в своем окне, и его видит пользователь.
а он тока на картинках работает или с текстом тоже?
фишка в том, что есть описание продукта(цена и картинка). нужно чтоб выводилось по 3 картинки + текст в ряд и они сменяли друг друга ч/з определенное время. соответственно вывод данных идет из БД.
alex, работает не только на картинках. Мы же скрываем и показываем целый блок div. поэтому то что лежит внутри него не важно. Единственное нужно применить некоторые стили.
Например в любой из div-ов помести такой код:
<p style=’color:#FF0000; font:bold 18px; width:160px; height:120px; background:#000; padding:0; margin:0;’>TEXT</p>
увидим следующее:
TEXT
width:160px; height:120px; — такие же как и у родительского блока;
background:#000; — цвет окружающего фона (у меня он черный);
padding:0; margin:0; — это не нужно, если используешь сброс стилей для всей страницы.
Прием такой использовать можно. Далее текст в теге можете сделать аккуратнее с помощью стилей.
попробовал для таблицы сделать, но не работает!!!
вот тут делал изменения
$(function(){
setInterval(«rotateImages()», 2000);
});
function rotateImages(){
var oCurPhoto = $(«#photo tr.current»);
var oNxtPhoto = oCurPhoto.next();
if(oNxtPhoto.length == 0)
oNxtPhoto = $(«#photo tr:first»);
oCurPhoto.removeClass(‘current’).addClass(‘previous’);
oNxtPhoto.css({opacity: 0.0}).addClass(‘current’).animate({opacity: 1.0}, 1000,
function(){
oCurPhoto.removeClass(‘previous’);
});
}
уже разобрался….
У меня при попытке добавить вместо картинок текст, появляется такая картина: текст накладывается друг на друга.
Для того, чтобы не накладывался текст, нужно добавить фон. Добавьте к дивам в файле стилей например черный фон и все будет так как вам нужно. Где-то в комментариях я про это уже рассказывал.
посмотрел пример — интересная вещь, сейчас посмотрю урок. Однако вспомнил старый (лет 10 ему) скрипт. Работает почти так-же, но на 2 порядка короче.
sergey, не то чтобы он короче. По размеру да, скрипт конечно меньше. Но в моем уроке набирать руками придется всего 15 строк javaScript кода, а остальное сделает jQuery. Мое мнение такое, то что работает одинаково хорошо везде — имеет право на жизнь, и не важно 10 лет или 2 дня со дня рождения скрипта. А то что скрипту лет уже много — это и так видно )))
Ну ничего не понятно. Какие уровни, какие индексы и что всё это обозначает? Слова какие-то непонятные. У Вас есть видео для чайников?
Юлия, высылайте вопросы на e-mail. Будем разбираться…
Класс! Спасибо, Андрей. Только вопрос — а можно ли это реализовать на джумле? Было бы вообще замечательно, если бы Вы рассказывали, как Ваши уроки применять на этом движке — вот как я размечталась ))))))
Оль, а компоненты и модули вы умеете писать для joomla?
это можно реализовать на joomla!
100%
Спасибо, за урок, но у меня сайт на движке WP. Не понятно как это подключить.
Петр, скоро будет урок на тему как это все на WP прикрутить.
Спасибо, буду ждать
Очень полезные уроки, мне очень нравятся! Я учусь создавать своими руками сайты, и это то, что необходимо! Большое спасибо тебе Андрей, за предаставленные материалы, не так-то просто найти такого рода инфу в интернете!!!
Спасибо за урок! Все очень понятно и доходчиво объяснено!
Даже не ожидала!
Теперь попробую применить.
Андрей Бернацкий, спасибо Вам за урок!!!
Я сама от себя не ожидала что у меня всё получиться. Очень помогли исходники, с их помощью нашла свои ошибки. Урок получился — всё работает!!!
Спасибо!!!
Да, действительно, как на вордпресс поставить?
Андрей спасибо за ваши уроки. Очень во время и просто. Использую их на своих уроках.
Спасибо, Андрей!
17:17:
div.previous (z-index:1) встал на один уровень со всеми…
как я понял, все остальные всё же на z-index:0, правильно?
Успехов тебе!
Юрий, да, все блоки имеют z-index:0. Тот который виден сейчас имеет z-index:2, затем ему присваивается z-index:1, а следующему блоку z-index:2, и идут анимация с прозрачностью.
действительно интересно.
a nelzya vilozhiit vse video na youtube.com ???
etot rutube takoi gluchniy, hotel perekrutit, i prishlos zhdat buferizaciu s samogo nachala, delo v tom, shto u menya skorotst 128 kb/s. P. S. : eto ne gluk bowsera
Скачайте архив целиком, там будет видео ролик.
ГОСПОДА!
В SWISH Max-се это делается за две минутки.
Без всяких кодов. Отсюда вопрос: в чём фишка?
А за уроки спасибо.
Здорово! Спасибо! Но есть проблемка: поставила ротатор картинок в ячейку таблицы, в которой все выровнено по центру. И в Опере, и в Мозилле показывает нормально, а в IE не могу выровнять по центру ячейки (картинки прилипли к правому борту). Не подскажете, как спозиционировать элемент?
Ольга, назначил для ячейки align=’center’ и во всех браузерах работает хорошо. Сразу даже вопроса не понял. Потом посмотрел в старых версиях IE — там действительно есть небольшая проблема с выравниванием. Решил ее так:
1. Обернул div id=»photo» (то есть главный блок) еще в один div.
2. Для него (нового div-a — обертки) назначил следующие стили: position:relative; width:164px; height:124px; margin:0 auto;
3. Наслаждаюсь работой скрипта во всех браузерах))))
P.S. width:164px; height:124px; — для поправки размера. То есть, у нас div id=»photo» имеет размеры: width:160px; height:120px; и плюс рамка с каждой стороны 2px. и нам рамку нужно учесть и прибавить ее размеры к размерам обертки.
Экспериментируйте, Удачи!
Здравствуйте, Андрей! Я установил ротатор на свой блог, но он крутится лишь на моем ноутбуке и лишь в брузере Mozilla Firefox.
На других компьютерах (родственники, друзья) в этом браузере открывается лишь альтернативные названия фотографий.
На Опере и IE открывается вертикальная колода всех рамок (без изображений фотографий) с альтернативным текстом.
Очень заинтересовало это решение проблемы, но у «чайника» нет достаточных знаний для создания нового div — а и стилей для него.
Пришлите текст готового решения установки «Обертки» и назначения для нее стилей. Как обозвать этот div и и связать со стилями для него, и как в header php прописать путь к нему?
Я только начинаю-учусь-на WordPress-буду благодарен за любую помощь…………………………
Большое спасибо! У меня все получилось, работает на ура!
Только есть один маленький вопросик, у меня в Firefox-е, в консоле Firebug 1.5.4 пишет:
Ошибка при анализе значения «opacity». Потерянное объявление.
и Неизвестный псевдокласс или псевдоэлемент «first».
Это нормально или я что-то не так сделал?
Скрипт набирал руками, сравнил со скаченным файлом, вроде все правильно.
Ссылка на страницу не работает.
Доброго времени суток!
Если просто слушать и смотреть — все замечательно! Но для того, чтобы еще и понятно было — надо как минимум, пройти какие-нибудь компьютерные курсы. А для таких «чайников» типа меня — это темный лес. Одних терминов тьма тьмущая, а что они значат…???
Было бы хорошо, если бы для «чайников» более развернутые объяснения сделать. Да и словарь профессиональных терминов не помешало бы иметь при этом.
С уважением, Наталья
Вот ссылка на базовый курс:
Вот ссылка на самый обширный курс в рунете «Киберсант-вебмастер»:
А как эту отличную «штуку» прикрутить к ВордПрессу???
Смотрите тут:
Спасибо!!!
Ставила другой слайдер, он во всех браузерах показывается кроме IE. Мучалась, мучалась, пыталась с ним справиться, — плюнула. А тут очень ко времени ваш ротатор оказался. Работает — без проблем!
Здраствуйте, Андрей. Спасибо за урок все получилось, токо вот у меня вышла загвоздка с размещением ротатора(позиция на странице). Хотел разместить по средине так прописал самому верхнему div align=»center», а оно нече не изменилось(вся работа проводиться в файлах с архива). В style.css #photo прописал margin-left:50px заработало. Можно конечно и просто прописать margin, но оно будет не то, и когда просто подбирать значения по отступам. А как чтоб «все и сразу» по центру было. Может что-то не то делаю?
Андрей, а возможно ли сделать, чтоб рядом с ротатором картин, выходило описание по каждой фото, и как.
А как можно сделать, чтоб ротатор работал чуть медленней, чтоб человек успевал рассмотреть фото.
Попытался вставить этот код в ротатор между div,
( div>
Набережная, вид на море.
/div>)
Отправляю код повторно, а то куда то пропал,
Но, что то наверное неправильно понял, получилось совсем не то, что у вас в примере.
У меня такая проблема все получилось только в шапку не могу поставить ротатор он у меня поверх сайта ложиться и все..=( что делать?
Спасибо тебе дружище! как раз весь инет перерыл в поисках такого слайдера надо было зусунуть его под прозрачную png и подогнать по размерам!Очень выручил!
Андрей, cпасибо большое за урок. Всё понятно и наглядно изложено. Вот только есть одна загвоздка. При попытке вывести два ротатора на одной странице, второй ротатор проигрывает изображения до последнего и останавливается, при том что первый продолжает работать. Почему так происходит, и как это исправить?
продублируйте строку setInterval(«rotateImages()», 2000); с другим названием например setInterval(«rotateImages2()», 2000);
Соответственно и сама функция тоже поменяется:
function rotateImages2(){
var oCurPhoto = $(«#photo2 div.current»); ВНИА$(«#photo2 div.current»);МАНИЕ тут было $(«#photo div.current»);
var oNxtPhoto = oCurPhoto.next();
if(oNxtPhoto.length == 0)
oNxtPhoto = $(«#photo div:first»);
oCurPhoto.removeClass(‘current’).addClass(‘previous’);
oNxtPhoto.css({opacity: 0.0}).addClass(‘current’).animate({opacity: 1.0}, 1000,
function(){
oCurPhoto.removeClass(‘previous’);
});
}
и в самом HTML коде поменяйте на
Попробуйте должно заработать..
Андрей, безмерное спасибо за оперативный ответ, Вы очень сильно мне помогли. Всё работает, разобралась.
Пожалуйста!
Здравствуйте!!!отличный урок!!!спасибо!!!!
только хотелось бы узнать можно ли в этот ротатор
Вставить еще и кнопки стрелки что бы перелистывать и как это сделать??
Спасибо за ответ.
Мне в этом уроке понравилось, как объясняется логика кода. Для начинающих это полезно. Если можно, допишите пару строк кода который делает следующее.
Картинки меняются не бесконечно, а скажем, делают три цикла. Затем анимация останавливается. И возобнавляется после обновленя страницы по алгоритму описанному мной. Думаю, что это будет иметь и практическую ценность. Например, меня раздражают постоянные мелькания на сайте. Отвлекают внимание. Поэтому лучше сделать акцент на какой-то теме, а затем оставить пользователя в покое. Спасибо.
Вы КРУТЫЕ программисты))) Бесконечное Вам Спасибо!!!
Андрей, добрый день!
Посмотрел Ваш урок «Ротатор картинок». Спасибо, все хорошо!!! Но я понять не могу, как вывести код на странице сайта. Можете подробно объяснить размещения ротатора картинок на сайте.
Сам я только учусь:)
С уважением,