Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.09.2010, 02:38
Аватар для InviS
Кандидат Javascript-наук
Отправить личное сообщение для InviS Посмотреть профиль Найти все сообщения от InviS
 
Регистрация: 19.02.2010
Сообщений: 116

смена фоток в галерее, как сделать эффект.
Ребят, подскажите, пожалуйста... Есть у меня 10 фотографий, к примеру, они хранятся в БД. Есть div для отображения фото, а внизу 2 стрелки - влево и вправо. Хотелось бы прикрепить эффект выезда фотки. т.е, например, при нажатии на стрелку вправо - текущая фотка начинает уезжать вправо, а слева выезжает новая. Как такое сделать?

Можно просто идею, без реализации. Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 18.09.2010, 09:31
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Главное получить ссылки на фотки. Например, AJAX'ом.
Поскольку фоток всего 10, можно сразу поставить в линию 10 тэгов img(div'у ставим overflow: hidden). Затем нужно решить все ли сразу они будут загружаться, или по мере необходимости. Первый вариант, естественно, гораздо проще: просто указываем при создании img свойства src, и картинки будут загружаться. Второй вариант тоже связан с src, только изменяем его при нажатии на стречки.
На картинки вешаем onload, чтобы новая картинка выезжала только когда загрузится. Ну и анимация тебе в помощь.
Ответить с цитированием
  #3 (permalink)  
Старый 18.09.2010, 10:53
Аватар для InviS
Кандидат Javascript-наук
Отправить личное сообщение для InviS Посмотреть профиль Найти все сообщения от InviS
 
Регистрация: 19.02.2010
Сообщений: 116

та проблема не в этом. со стороны js я вроде как догадываюсь как сделать. Как сверстать это? т.е. мне ж нужно чтоб эти картинки где-то хранились, чтоб не съезжали. или абсолютом?
Ответить с цитированием
  #4 (permalink)  
Старый 18.09.2010, 11:30
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Сообщение от InviS
Как сверстать это?
<style>
DIV {
  overflow: hidden;
  height: ...px;
  width: ...px;
}
IMG {
  border: none;
  display: inline;
  float: left;
}
</style>
<div>
  <img />
  <img />
  ...
  <img />
</div>
Но делать все это лучше средствами javascript
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать такое fancy menu uonax Элементы интерфейса 2 22.05.2010 12:52
30(1|2) редирект от сервера. Или как лучше сделать редирект при верной отсылке форма. pizzZ AJAX и COMET 2 18.02.2010 09:06
Вопрос как сделать эту панельку Определённых размеров и свойств. jei jQuery 3 09.06.2009 19:14
Как сделать электронный каталог продукции? natarius Серверные языки и технологии 6 24.05.2009 20:56
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 23:24