Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/22: Рейтинг темы: голосов - 22, средняя оценка - 4.50
3 / 3 / 1
Регистрация: 14.01.2013
Сообщений: 137
1

Карусель Изображение

06.04.2013, 22:32. Просмотров 4018. Ответов 5
Метки нет (Все метки)


помогите найди похожую Карусель Изображение.
чтобы при нажатии открывалось изображения посередине єкрана
0
Миниатюры
Карусель Изображение  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
06.04.2013, 22:32
Ответы с готовыми решениями:

Простая карусель
Подскажите, как добавить навигацию к данной карусели? <!DOCTYPE html> <html> <head> ...

Карусель подобрать
Доброго времени суток, форумчане. Нужно реализовать такую же карусель, с такими же функциями: то...

Карусель миниатюр
Как сделать слайдер такого формата? Или подключить готовый.

Не работает слайдер (карусель)
<div class="slider-box"> <div class="slider"> <?php ...

5
47 / 47 / 6
Регистрация: 10.05.2012
Сообщений: 236
06.04.2013, 23:25 2
http://www.cssplay.co.uk/menu/... m-fly.html ДЕМО
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
<div class="thumbs">
    <input type="radio" name="thumb" id="thumb1" checked="checked" />
    <input type="radio" name="thumb" id="thumb2" />
    <input type="radio" name="thumb" id="thumb3" />
    <input type="radio" name="thumb" id="thumb4" />
    <input type="radio" name="thumb" id="thumb5" />
    <input type="radio" name="thumb" id="thumb6" />
    <input type="radio" name="thumb" id="thumb7" />
    <input type="radio" name="thumb" id="thumb8" />
    <input type="radio" name="thumb" id="thumb9" />
    <input type="radio" name="thumb" id="thumb10" />
  
    <label for="thumb1" class="t1 c1 r1" onclick="void(0)"><img src="zoomfly/p1.jpg" alt="" /></label>
    <label for="thumb2" class="t2 c2 r1" onclick="void(0)"><img src="zoomfly/p2.jpg" alt="" /></label>
    <label for="thumb3" class="t3 c1 r2" onclick="void(0)"><img src="zoomfly/p3.jpg" alt="" /></label>
    <label for="thumb4" class="t4 c2 r2" onclick="void(0)"><img src="zoomfly/p4.jpg" alt="" /></label>
    <label for="thumb5" class="t5 c1 r3" onclick="void(0)"><img src="zoomfly/p5.jpg" alt="" /></label>
    <label for="thumb6" class="t6 c2 r3" onclick="void(0)"><img src="zoomfly/p6.jpg" alt="" /></label>
    <label for="thumb7" class="t7 c1 r4" onclick="void(0)"><img src="zoomfly/p7.jpg" alt="" /></label>
    <label for="thumb8" class="t8 c2 r4" onclick="void(0)"><img src="zoomfly/p8.jpg" alt="" /></label>
    <label for="thumb9" class="t9 c1 r5" onclick="void(0)"><img src="zoomfly/p9.jpg" alt="" /></label>
    <label for="thumb10" class="t10 c2 r5" onclick="void(0)"><img src="zoomfly/p10.jpg" alt="" /></label>
</div>
            <p class="info">all photographs copyright &copy; stu nicholls - CSS play</p>
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
.thumbs {width:190px; height:640px; position:relative; margin:20px 0 20px 10px; z-index:100;}
.thumbs input {position:absolute; left:-9999px;}
.thumbs label {display:block; width:90px; height:120px; float:left;
background-repeat: no-repeat;
}
.thumbs label.c1 {margin-right:10px;}
.thumbs label.r1,
.thumbs label.r2,
.thumbs label.r3,
.thumbs label.r4 {margin-bottom:10px;}
 
.thumbs label img {display:block; width:90px; height:120px; position:absolute; z-index:-1;
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;
}
 
.thumbs .c1 img {left:0;}
.thumbs .c2 img {left:100px;}
.thumbs .r1 img {top:0;}
.thumbs .r2 img {top:130px;}
.thumbs .r3 img {top:260px;}
.thumbs .r4 img {top:390px;}
.thumbs .r5 img {top:520px;}
 
.thumbs .t1 {background-image: url(zoomfly/p1t.jpg);}
.thumbs .t2 {background-image: url(zoomfly/p2t.jpg);}
.thumbs .t3 {background-image: url(zoomfly/p3t.jpg);}
.thumbs .t4 {background-image: url(zoomfly/p4t.jpg);}
.thumbs .t5 {background-image: url(zoomfly/p5t.jpg);}
.thumbs .t6 {background-image: url(zoomfly/p6t.jpg);}
.thumbs .t7 {background-image: url(zoomfly/p7t.jpg);}
.thumbs .t8 {background-image: url(zoomfly/p8t.jpg);}
.thumbs .t9 {background-image: url(zoomfly/p9t.jpg);}
.thumbs .t10 {background-image: url(zoomfly/p10t.jpg);}
 
#thumb1:checked ~ .t1 img,
#thumb2:checked ~ .t2 img,
#thumb3:checked ~ .t3 img,
#thumb4:checked ~ .t4 img,
#thumb5:checked ~ .t5 img,
#thumb6:checked ~ .t6 img,
#thumb7:checked ~ .t7 img,
#thumb8:checked ~ .t8 img,
#thumb9:checked ~ .t9 img,
#thumb10:checked ~ .t10 img {z-index:100;}
 
#thumb1:checked ~ .t1 img,
#thumb2:checked ~ .t2 img,
#thumb3:checked ~ .t3 img,
#thumb4:checked ~ .t4 img,
#thumb5:checked ~ .t5 img,
#thumb6:checked ~ .t6 img,
#thumb7:checked ~ .t7 img,
#thumb8:checked ~ .t8 img,
#thumb9:checked ~ .t9 img,
#thumb10:checked ~ .t10 img {left:220px; top:0; width:480px; height:640px;}
Добавлено через 4 минуты
Вот еще нашла пример, который, если правильно помню, приводила на форуме Taatshi. Он работает и в IE ниже 9 версии
http://html-css.info/2010/04/p... css-no-js/
0
3 / 3 / 1
Регистрация: 14.01.2013
Сообщений: 137
06.04.2013, 23:26  [ТС] 3
нет нужно чтобы при нажатии открывалось изображения посередине экрана
0
17 / 13 / 2
Регистрация: 18.10.2012
Сообщений: 136
06.04.2013, 23:41 4
http://highslide.com/
0
3 / 3 / 1
Регистрация: 14.01.2013
Сообщений: 137
06.04.2013, 23:47  [ТС] 5
Цитата Сообщение от Grafnet Посмотреть сообщение
а чтобы все вместе чтобы не переписывать
0
17 / 13 / 2
Регистрация: 18.10.2012
Сообщений: 136
06.04.2013, 23:55 6
Настройте highslide под себя http://highslide.com/editor/, после нажмите "publish", дальше разберетесь.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
06.04.2013, 23:55

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

Не работает карусель (Bootstrap 4)
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Карусель&lt;/title&gt; &lt;!-- Bootstrap core...

Карусель на чистом CSS
Здравствуйте. Мне нужно сделать карусель карточек товаров на чистом css. У меня есть карточки...

Слайдер-карусель на макет
Здравствуйте! Не могу найти подходящий слайдер, или карусель незнаю как правильно назвать, под...

Карусель или слайдер
Добрый день, я супер прям супер мега про(нет) прошу помощи невидимым силам помочь с выопрос как...


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

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

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