Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как реализовать такую галерею? / 7 сообщений из 7, страница 1 из 1
10.12.2012, 16:32
    #38072797
son6ka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как реализовать такую галерею?
Смысл следующий: по клику на превью фото открывается попап-окно с оригиналом. Здесь все просто. Но кроме этого в попапе нужно реализовать листание фото. Для этого в попапе вместе с оригиналом активного изображения справа выводим край второго, кликнув по которому происходит листание(горизонтально справа налево).

Подскажите, пожалуйста, где смотреть и куда бежать.
...
Рейтинг: 0 / 0
10.12.2012, 17:32
    #38072940
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как реализовать такую галерею?
...
Рейтинг: 0 / 0
10.12.2012, 17:40
    #38072960
son6ka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как реализовать такую галерею?
Паганель,

не то.

Меня интересует именно момент, когда в попапе выводится не только текущее фото, но и часть следующего в списке.
...
Рейтинг: 0 / 0
10.12.2012, 18:20
    #38073041
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как реализовать такую галерею?
son6ka, а с чем собственно проблемы: с алгоритмом, вёрсткой...?
...
Рейтинг: 0 / 0
10.12.2012, 18:28
    #38073057
son6ka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как реализовать такую галерею?
skyANA, собственно, больше наверное алгоритм.

как показать не только "кликнутое" фото, но и следующее(часть)?
...
Рейтинг: 0 / 0
10.12.2012, 19:00
    #38073110
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как реализовать такую галерею?
son6ka, к примеру так:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
<!DOCTYPE HTML>
<html>
<head>
  <style>
    ul {        
      list-style-type: none;
      margin: 0;
      padding: 0;
      white-space: nowrap;
      width: 655px;        
    }
    
    li {
      border-width: 10px;
      display: inline-block;
      height: 333px;
      overflow: hidden;
    }
      
    li.current {        
      width: 500px;
    }
      
    li.next {
      width: 150px;
    }
  </style>
</head>
<body>
  <ul>
    <li class="current">
      <img src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg" alt="">
    </li>
    <li class="next">
      <img src="http://farm3.static.flickr.com/2489/4234944202_0fe7930011.jpg" alt="">
    </li>
  </ul>  
</body>
</html>
...
Рейтинг: 0 / 0
28.12.2012, 09:16
    #38095729
rustornado
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как реализовать такую галерею?
skyANAson6ka, к примеру так:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
<!DOCTYPE HTML>
<html>
<head>
  <style>
    ul {        
      list-style-type: none;
      margin: 0;
      padding: 0;
      white-space: nowrap;
      width: 655px;        
    }
    
    li {
      border-width: 10px;
      display: inline-block;
      height: 333px;
      overflow: hidden;
    }
      
    li.current {        
      width: 500px;
    }
      
    li.next {
      width: 150px;
    }
  </style>
</head>
<body>
  <ul>
    <li class="current">
      <img src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg" alt="">
    </li>
    <li class="next">
      <img src="http://farm3.static.flickr.com/2489/4234944202_0fe7930011.jpg" alt="">
    </li>
  </ul>  
</body>
</html>


выдает ошибку :(
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как реализовать такую галерею? / 7 сообщений из 7, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]