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

Фотоальбом

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

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

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

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

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

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

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

Добавлено через 11 минут
Можно и на отдельных страницах это сделать. Для совмещения оформления и содержимого (фото и его описания) можно использовать PHP.
0
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
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
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
6 / 6 / 4
Регистрация: 15.05.2015
Сообщений: 75
Записей в блоге: 3
20.05.2015, 18:35 14
Есенья, если Вам не лень писать 70 строк, то потянет
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
20.05.2015, 18:35

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

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

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

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

фотоальбом
решила сделать так в таблице image создала строку news_id (в нее будет вписываться ид новость)...

Фотоальбом
Хочу сделать фотоальбом на Delphi но возникла одна проблема, никак не могу сделать что бы...

Фотоальбом
Народ помогите! Как сделать фотоальбом на DLE. Я тока учусь и работаю пока на денвере.Скачивал...


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

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

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