Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 
Рейтинг 4.96/26: Рейтинг темы: голосов - 26, средняя оценка - 4.96
10 / 10 / 0
Регистрация: 10.01.2014
Сообщений: 94

Отключение и включение картинок

13.01.2014, 08:16. Показов 5615. Ответов 44
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Есть такой переключатель (см. картинку)
ее описание в index.php:
JavaScript
1
2
3
4
<div class="switch1">
    <input type="checkbox">
    <label><i></i></label>
</div>
в css ее стиль:
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
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
.switch1 {
    margin-top: -24px;
    margin-left: 115px;
    position: relative;
}
.switch1 label {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}
 
.switch1 input {
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  opacity: 0;
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
 
 
.switch1 {
  width: 100px;
  height: 18px;
}
 
.switch1 label {
  display: block;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  border-radius: 40px;
  box-shadow:
      inset 0 3px 8px 1px rgba(0,0,0,0.2),
      0 1px 0 rgba(255,255,255,0.5);
}
 
.switch1 label:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -5px; right: -6px; bottom: -5px; left: -6px;
  border-radius: inherit;
  background: #ababab;
  background: -moz-linear-gradient(#f2f2f2, #ababab);
  background: -ms-linear-gradient(#f2f2f2, #ababab);
  background: -o-linear-gradient(#f2f2f2, #ababab);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ababab));
  background: -webkit-linear-gradient(#f2f2f2, #ababab);
  background: linear-gradient(#f2f2f2, #ababab);
  box-shadow: 0 0 10px rgba(0,0,0,0.3),
        0 1px 1px rgba(0,0,0,0.25);
}
 
.switch1 label i {
  display: block;
  height: 100%;
  width: 60%;
  border-radius: inherit;
  background: silver;
  position: absolute;
  z-index: 2;
  right: 40%;
  top: 0;
  background: #b2ac9e;
  background: -moz-linear-gradient(#f7f2f6, #b2ac9e);
  background: -ms-linear-gradient(#f7f2f6, #b2ac9e);
  background: -o-linear-gradient(#f7f2f6, #b2ac9e);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f2f6), to(#b2ac9e));
  background: -webkit-linear-gradient(#f7f2f6, #b2ac9e);
  background: linear-gradient(#f7f2f6, #b2ac9e);
  box-shadow:
      inset 0 1px 0 white,
      0 0 8px rgba(0,0,0,0.3),
      0 5px 5px rgba(0,0,0,0.2);
}
 
.switch1 label i:after {
  content: "";
  position: absolute;
  left: 15%;
  top: 25%;
  width: 70%;
  height: 50%;
  background: #d2cbc3;
  background: -moz-linear-gradient(#cbc7bc, #d2cbc3);
  background: -ms-linear-gradient(#cbc7bc, #d2cbc3);
  background: -o-linear-gradient(#cbc7bc, #d2cbc3);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#cbc7bc), to(#d2cbc3));
  background: -webkit-linear-gradient(#cbc7bc, #d2cbc3);
  background: linear-gradient(#cbc7bc, #d2cbc3);
  border-radius: inherit;
}
 
.switch1 label i:before {
  content: "on";
  text-transform: uppercase;
  font-style: normal;
  font-weight: bold;
  color: #000000;
  text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  position: absolute;
  top: 65%;
  margin-top: -12px;
  right: -47%;
}
 
.switch1 input:checked ~ label {
  background: #000000;
}
 
.switch1 input:checked ~ label i {
  right: -1%;
}
 
.switch1 input:checked ~ label i:before {
  content: "off";
  right: 105%;
  color: #FFFFFF;
  text-shadow: 
    0 1px 0 #afcb9b,
    0 -1px 0 #6b8659;
}
Хотелось бы узнать можно ли прописать какой нибудь javascript или php или еще что либо подобное чтобы когда на переключателе стоит on изображения jpg были включены, а при переключении на off изображения jpg отключалиь или просто не отображались?
Изображения
 
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
13.01.2014, 08:16
Ответы с готовыми решениями:

Включение/отключение disable у кнопки
Добрый день! У меня есть код: if ($(&quot;input&quot;).value() == null) { $(&quot;.btn-to-index&quot;).each(function () { ...

Включение и отключение звука у видео, iphone-inline-video
Добрый день. Подскажите, на iphone возможно ли добиться для &lt;video&gt; inline autoplay с возможностью потом включать/отключать звук?...

Включение/отключение сопроцессора
Доброго времени суток. Подскажите, как можно выполнить включение и выключение арифметического сопроцессора ассемблерными командами?

44
 Аватар для MoonDevilzzz
18 / 18 / 8
Регистрация: 15.03.2012
Сообщений: 166
13.01.2014, 08:35
Ну тут либо тег скрывать img либо src ему убивать
JavaScript
1
2
3
$('#onOff').click(function(){
 $('img').toogle();
})
0
 Аватар для alpex
603 / 578 / 103
Регистрация: 16.07.2012
Сообщений: 1,762
13.01.2014, 09:08
HTML5
1
2
3
4
<div class="switch1">
    <input type="checkbox" id="switch_check" />
    <label for="switch_check"><i></i></label>
</div>
JavaScript
1
2
3
4
5
6
7
8
<script>
        $(document).ready(function(){
            $('#switch_check').on('click', function(){
                $('img').toggle();
            });
        });
    
    </script>
0
10 / 10 / 0
Регистрация: 10.01.2014
Сообщений: 94
13.01.2014, 10:41  [ТС]
Цитата Сообщение от alpex Посмотреть сообщение
HTML5
1
2
3
4
<div class="switch1">
    <input type="checkbox" id="switch_check" />
    <label for="switch_check"><i></i></label>
</div>
JavaScript
1
2
3
4
5
6
7
8
<script>
        $(document).ready(function(){
            $('#switch_check').on('click', function(){
                $('img').toggle();
            });
        });
    
    </script>
запихал в index.php пробую отключить, включить не работает.
0
 Аватар для MoonDevilzzz
18 / 18 / 8
Регистрация: 15.03.2012
Сообщений: 166
13.01.2014, 10:47
jQuery То включен?
0
10 / 10 / 0
Регистрация: 10.01.2014
Сообщений: 94
13.01.2014, 11:17  [ТС]
да включен, если бы не был включен многое бы не работало.

Добавлено через 19 минут
Хотелось бы разобрать id=switch_check откуда это берется? если в css это не прописано, или мы просто создаем пустой id? а также .on это положение когда он включен? on же прописан в css как текст...
0
 Аватар для MoonDevilzzz
18 / 18 / 8
Регистрация: 15.03.2012
Сообщений: 166
13.01.2014, 11:40
Просто я попробовал сделать в фидле,, и все работает
0
10 / 10 / 0
Регистрация: 10.01.2014
Сообщений: 94
13.01.2014, 11:42  [ТС]
если это должно работать то оно отключает все картинки находящиеся на странице сайта? ли только в определенной области?

Добавлено через 40 секунд
а мона ссылку на работоспособность?
0
 Аватар для MoonDevilzzz
18 / 18 / 8
Регистрация: 15.03.2012
Сообщений: 166
13.01.2014, 11:43
Конечно
0
10 / 10 / 0
Регистрация: 10.01.2014
Сообщений: 94
13.01.2014, 11:59  [ТС]
ну ты туда просто картинку запилил, а у меня в разных классах и в разных областях есть множество картинок jpg вот мне надо чтоб они отключались....
0
 Аватар для MoonDevilzzz
18 / 18 / 8
Регистрация: 15.03.2012
Сообщений: 166
13.01.2014, 12:01
JavaScript
1
$('img').toggle();
- применяется конкретно к тегу картинки на всей странице.Если у тебя картинка стоит фоном к
HTML5
1
div
естественно не работает
0
10 / 10 / 0
Регистрация: 10.01.2014
Сообщений: 94
13.01.2014, 12:12  [ТС]
вот сайт можешь глянуть в чем рамс?
0
 Аватар для MoonDevilzzz
18 / 18 / 8
Регистрация: 15.03.2012
Сообщений: 166
13.01.2014, 12:14
JavaScript
1
2
3
4
5
6
Uncaught Syntax error, unrecognized expression: Syntax error, unrecognized expression: hovered jquery.min.js:75
Uncaught ReferenceError: browser is not defined script.js:1392
Uncaught TypeError: Object #<Object> has no method 'off' script.responsive.js:262
Failed to load resource [url]http://ppk54test.esy.es/templates/dd_openmint_25/images/facebook_icon.png[/url]
Failed to load resource [url]http://ppk54test.esy.es/templates/dd_openmint_25/images/twitter_icon.png[/url]
Failed to load resource
У тебя куча ошибок на странице
0
10 / 10 / 0
Регистрация: 10.01.2014
Сообщений: 94
13.01.2014, 12:24  [ТС]
я так понимаю
Uncaught TypeError: Object #<Object> has no method 'on' и
Uncaught TypeError: Object #<Object> has no method 'off'
он не понимает метод on и off как дать ему ума?
0
 Аватар для MoonDevilzzz
18 / 18 / 8
Регистрация: 15.03.2012
Сообщений: 166
13.01.2014, 12:38
Во-первых, добавь так , как тебе написал товарищ

JavaScript
1
2
3
4
5
        $(document).ready(function(){
            $('#switch_check').on('click', function(){
                $('img').toggle();
            });
        });
начнем с этого.
0
10 / 10 / 0
Регистрация: 10.01.2014
Сообщений: 94
13.01.2014, 12:45  [ТС]
сделано)
0
 Аватар для MoonDevilzzz
18 / 18 / 8
Регистрация: 15.03.2012
Сообщений: 166
13.01.2014, 12:50
JavaScript
1
2
3
4
5
6
$(document).ready(function(){
            $('#switch_check').click(function(){
                $('img').toggle();
                console.log('working');
            });
        });
Так вставь
0
10 / 10 / 0
Регистрация: 10.01.2014
Сообщений: 94
13.01.2014, 13:21  [ТС]
аааа спасиб респект те добрый человек=)

Добавлено через 19 минут
А теперь последний вопрос как теперь сделать так чтобы если отключили картинки при обновлении страницы они так же были не отображались и наоборот?
0
 Аватар для MoonDevilzzz
18 / 18 / 8
Регистрация: 15.03.2012
Сообщений: 166
13.01.2014, 13:33
Только через cookie
0
10 / 10 / 0
Регистрация: 10.01.2014
Сообщений: 94
13.01.2014, 13:39  [ТС]
так же появилась проблема при отключении мод на панельки для изменения размера шрифта тоже убирается, можно как то обойти чтобы он не трогался?

Добавлено через 4 минуты
Значение записывать такое?
JavaScript
1
2
3
4
$.cookie('trable8', 'working', {
    expires: 5,
    path: '/',
});
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
13.01.2014, 13:39
Помогаю со студенческими работами здесь

Отключение / включение USB
есть usb прибор ,есть прога. Дык вот когда все подключаю в первый раз. то норм работает. когда вырубаю прогу а потом опять включаю -...

Отключение\Включение дисководов
Как программно включить/выключить дисководы? Хоть дайте какую-нубудь информацию.:-[

Включение / отключение прокси
Добрый день! Постоянно требуется вкл./откл. прокси в LAN Settings -&gt; use a proxy server for your lan. Создал батник, где в реестре...

Отключение / включение функций
У меня на локалхосте, я так подозреваю, отключена функция flush(). Подскажите кк её включить? Заранее благодарен!

Включение/отключение сайта
Здравствуйте, прошу вашей помощи Есть мой сайт, нужна возможность включать/отключать его Выключение уже сделал через .htaccess, теперь...


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

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Новые блоги и статьи
Программный контроль заполнения реквизита табличной части документа
Maks 02.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .
wmic не является внутренней или внешней командой
Maks 02.04.2026
Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/
Программная установка даты и запрет ее изменения
Maks 02.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .
Вывод данных в справочнике через динамический список
Maks 01.04.2026
Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа
Maks 01.04.2026
Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .
К слову об оптимизации
kumehtar 01.04.2026
Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .
Идея фильтра интернета (сервер = слой+фильтр).
Hrethgir 31.03.2026
Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда
anaschu 31.03.2026
В прикрепленном документе раздумья о том, как можно поменять модель в будущем
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru