Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/9: Рейтинг темы: голосов - 9, средняя оценка - 4.67
Есенья
0 / 0 / 0
Регистрация: 02.04.2015
Сообщений: 54
1

Фотоальбом

17.05.2015, 21:28. Просмотров 1846. Ответов 13
Метки нет (Все метки)

Здравствуйте
Хочу сделать вот такой фотоальбом: http://dugward.ru/u24_4.html
Подскажите как сделать, чтобы под фотографиями менялся текст?
Заранее спасибо)
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
17.05.2015, 21:28
Ответы с готовыми решениями:

Создать фотоальбом
Как создать фотоальбом для сайта? Простенький, чтобы нажать на картинку, она увеличилась, нажать...

Создать фотоальбом
Здравствуйте, подскажите пожалуйста, какой код нужно ввести, чтобы при наведении мышки на...

Фотоальбом с отображением картинок из папки
Доброго всем вечера Есть ли какой-то скрипт\CSS\HTML для отображения фотоальбома на сайте? НО...

Фотоальбом
Всем привет. Надеюсь в нужном разделе тему создал. Надеюсь на вашу помощь, а именно. Пытаюсь...

фотоальбом
вообщем у меня надо переместить с левой стороны сайта скрипт на правую? скриншот прилагается ...

13
Июнь
Заблокирован
17.05.2015, 22:02 2
Ну, вместе со сменой фотографии обновляйте текст. Как, лучше спросить в разделе JavaScript.

Добавлено через 11 минут
Можно и на отдельных страницах это сделать. Для совмещения оформления и содержимого (фото и его описания) можно использовать PHP.
0
kisk
6 / 6 / 4
Регистрация: 15.05.2015
Сообщений: 75
Записей в блоге: 3
18.05.2015, 16:12 3
Зачем заморочек? Да и css быстрее будет JS, я над этим сейчас поработаю и скину код
0
Есенья
0 / 0 / 0
Регистрация: 02.04.2015
Сообщений: 54
18.05.2015, 22:47  [ТС] 4
спасибо)
0
Июнь
Заблокирован
18.05.2015, 23:03 5
Хотела посмотреть на результат, но не увидела изменений. Могу помочь составить/установить скрипт.
0
kisk
6 / 6 / 4
Регистрация: 15.05.2015
Сообщений: 75
Записей в блоге: 3
19.05.2015, 12:59 6
Лучший ответ Сообщение было отмечено Есенья как решение

Решение

У меня проблемы с позиционированием возникли...
А так вкратце, пишем input с типом radio, присваиваем всем name="slides", id="slide1", slide2, slide3... И первому присваиваем атрибут checked
Пишем label'ы и указываем атрибут for="'id слайда"
Оформляем лейблы как кнопки, указываем им градиент, высоту, ширину.
Все события изменяются псевдоклассом checked с тильдой (~), например:
CSS
1
2
3
#slide2:checked ~ .img2 { border: 2px solid gray; }
/*Когда мы отметим 2-й чекбокс, то у изображения появится рамка размером в 2 пикселя.
Но важно, чтобы эти элементы находились в родительском блоке, иначе тильда не будет работать.*/
Я хочу показать наглядно, но когда пытаюсь разместить элементы, что-то не получается и бросаю.
Если будет время, я сяду и напишу в своём блоге про такой слайдер с кнопками.

Добавлено через 9 часов 23 минуты
Держите: http://output.jsbin.com/dewahe

Осторожно, большие коды! :)

HTML5
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>"button" slider</title>
  </head>
  <body>
    <div class="container">
      
      <input type="radio" name="slides" id="slide1" checked>
      <input type="radio" name="slides" id="slide2">
      <input type="radio" name="slides" id="slide3">
      <input type="radio" name="slides" id="slide4">
      <input type="radio" name="slides" id="slide5">
      
    <h3>Наши любимцы</h3>
      
    <div class="slider">
      
      <div class="images img1"></div>
      <div class="images img2"></div>
      <div class="images img3"></div>
      <div class="images img4"></div>
      <div class="images img5"></div>
    </div>
      
    <div class="buttons">
      
      <div class="left">
        <label for="slide5">Назад</label>
        <label for="slide4">Назад</label>
        <label for="slide3">Назад</label>
        <label for="slide2">Назад</label>
        <label for="slide1">Назад</label>
      </div>
      
      <div class="right">
        <label for="slide2">Вперед</label>
        <label for="slide3">Вперед</label>
        <label for="slide4">Вперед</label>
        <label for="slide5">Вперед</label>
        <label for="slide1">Вперед</label>
      </div>
      
    </div>
      <div class="text">
        <p>Кот Вася</p>
        <p>Кот Мурзик</p>
        <p>Кот Снежок</p>
        <p>Кот Черныш</p>
        <p>Кот Ленивец</p>
      </div>
    </div>
  </body>
</html>
CSS
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
body { 
  background: #685;
}
 
.container input { display: none; }
 
.slider {
  position: relative;
  width: 400px;
  height: 300px;
  border: 5px solid #b3b3b3;
  margin: 0 auto;
}
 
.images{
  position: absolute;
  width: 400px;
  height: 300px;
}
 
.img1 { background-image: url([url]http://fanscat.ru/wp-content/uploads/2013/02/vidyat-koshki.jpg);[/url] }
.img2 { background-image: url([url]http://vancats.ru/Koshki_Porodi/siamskaya_koshka_4.jpg);[/url] }
.img3 { background-image: url([url]http://www.catgallery.ru/info/cats/white-cat.jpg);[/url] }
.img4 { background-image: url([url]http://www.owoman.ru/assets/images/dom/16_09/960.jpg);[/url] }
.img5 { background-image: url([url]http://cat-and-cat.com/Data/Images/Content/2011/02/06.02.2011/002/002.jpg);[/url] }
 
.left,
.right {
  display: block;
  float: left;
  width: 55px;
  height: 20px;
  border: 1px solid #b3b3b3;
  background: linear-gradient(to top, #e3e3e3, white);
}
 
.right { margin-left: 15px; }
 
label {
  position: absolute;
  text-align: center;
  width: inherit;
  height: inherit;
  margin-top: 20px;
}
 
label:active {
  background: linear-gradient(to top, white, #e3e3e3);
}
 
label:hover{
  border: 1px solid #e3e3e3;
}
 
.img1,
.img2,
.img3,
.img4,
.img5,
label:nth-of-type(1),
label:nth-of-type(2),
label:nth-of-type(3),
label:nth-of-type(4),
label:nth-of-type(5),
p {
  opacity: 0;
}
 
#slide1:checked ~ .slider .img1,
#slide1:checked ~ label:hover,
#slide2:checked ~ .slider .img2,
#slide2:checked ~ label:hover,
#slide3:checked ~ .slider .img3,
#slide3:checked ~ label:hover,
#slide4:checked ~ .slider .img4,
#slide4:checked ~ label:hover,
#slide5:checked ~ .slider .img5,
#slide5:checked ~ label:hover {
  opacity: 1;
}
 
#slide1:checked ~ .buttons .left label:nth-of-type(1),
#slide5:checked ~ .buttons .left label:nth-of-type(2),
#slide4:checked ~ .buttons .left label:nth-of-type(3),
#slide3:checked ~ .buttons .left label:nth-of-type(4),
#slide2:checked ~ .buttons .left label:nth-of-type(5) {
  opacity: 1;
  margin: 0;
}
 
#slide1:checked ~ .buttons .right label:nth-of-type(1),
#slide2:checked ~ .buttons .right label:nth-of-type(2),
#slide3:checked ~ .buttons .right label:nth-of-type(3),
#slide4:checked ~ .buttons .right label:nth-of-type(4),
#slide5:checked ~ .buttons .right label:nth-of-type(5) { 
  opacity: 1;
  margin: 0;
}
 
#slide1:checked ~ .text p:nth-of-type(1),
#slide2:checked ~ .text p:nth-of-type(2),
#slide3:checked ~ .text p:nth-of-type(3),
#slide4:checked ~ .text p:nth-of-type(4),
#slide5:checked ~ .text p:nth-of-type(5) {
  opacity: 1;
}
 
.buttons {
  width: 129px;
  margin: 5px auto;
}
 
.text {
  position: relative;
  width: 500px;
  height: 150px;
  border: 2px dotted #036;
  margin: 70px auto;
  text-align: center;
}
 
p {
  position: absolute;
  color: #e3e3e3;
  font-size: 2em;
  width: inherit;
  height: inherit;
  margin: 0;
  line-height: 125px;
}
 
h3 {
  text-align: center;
  color: #f0f0f0;
  font-family: Verdana;
}
1
Июнь
Заблокирован
19.05.2015, 13:07 7
kisk, а если это не слайдер, а целая коллекция? Пусть Есенья уточнит, что именно она хотела сделать.
0
kisk
6 / 6 / 4
Регистрация: 15.05.2015
Сообщений: 75
Записей в блоге: 3
19.05.2015, 13:13 8
Июнь, тогда тут явно без php не обойтись, мол, если это коллекция.
Если это мизерный фотоальбом, который не требует поправки, тогда css.
0
Июнь
Заблокирован
19.05.2015, 13:48 9
Да, я тоже обратила внимание на слово "фотоальбом". А содержимое фотоальбома, как известно, может сильно разрастаться. Поэтому про слайдер даже как-то не подумала. Отсылка на JavaScript была связана с возможностью использования AJAX, а не со слайдером.
0
Есенья
0 / 0 / 0
Регистрация: 02.04.2015
Сообщений: 54
19.05.2015, 21:45  [ТС] 10
в фотоальбоме будет около 70 фотографий
и вот вы скинули код, как прописывать фотографии не url , а просто допустим путь из папки?
0
Июнь
Заблокирован
19.05.2015, 22:00 11
background-image: url(/images/1.jpg);

Но 70 по-моему – слишком много. Лучше использовать предложенные мной варианты.
0
Есенья
0 / 0 / 0
Регистрация: 02.04.2015
Сообщений: 54
20.05.2015, 16:55  [ТС] 12
у меня все равно не открывает картинки
.img1 { background-image: url(C:\Users\Desktop\фотоальбом\1.jpg);[/url] }
Все разобралась)

Добавлено через 1 час 1 минуту
а что 70 фотографий не потянет?
0
Июнь
Заблокирован
20.05.2015, 18:34 13
Не забывайте еще и про 70 описаний. Это нецелесообразно. Вряд ли кто-то будет просматривать сразу все. Зачем тогда загружать сразу все? Кстати, для большого числа элементов навигация "Вперед-Назад" тоже не самая подходящая.
0
kisk
6 / 6 / 4
Регистрация: 15.05.2015
Сообщений: 75
Записей в блоге: 3
20.05.2015, 18:35 14
Есенья, если Вам не лень писать 70 строк, то потянет
0
20.05.2015, 18:35
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
20.05.2015, 18:35

Фотоальбом
procedure TForm1.Button2Click(Sender: TObject); var i:integer; begin n:=1; for i:=1 to 10 do...

Фотоальбом и бд
Доброго времени суток требуется помощ специалиста есть скрипт загрузки фото &lt;?php ...

Фотоальбом
Как создать фотоальбом по Делфи?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
14
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru