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

@_kost_ · Регистрация: 10.01.2014

Студворк — интернет-сервис помощи студентам

Есть такой переключатель (см. картинку)
ее описание в 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 отключалиь или просто не отображались?

@MoonDevilzzz · 13.01.2014, 08:35

Ну тут либо тег скрывать img либо src ему убивать

JavaScript
1
2
3
$('#onOff').click(function(){
 $('img').toogle();
})

@alpex · 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>

@_kost_ · 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 пробую отключить, включить не работает.

@MoonDevilzzz · 13.01.2014, 10:47

jQuery То включен?

@_kost_ · 13.01.2014, 11:17 **[ТС]**

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

Добавлено через 19 минут
Хотелось бы разобрать id=switch_check откуда это берется? если в css это не прописано, или мы просто создаем пустой id? а также .on это положение когда он включен? on же прописан в css как текст...

@MoonDevilzzz · 13.01.2014, 11:40

Просто я попробовал сделать в фидле,, и все работает

@_kost_ · 13.01.2014, 11:42 **[ТС]**

если это должно работать то оно отключает все картинки находящиеся на странице сайта? ли только в определенной области?

Добавлено через 40 секунд
а мона ссылку на работоспособность?

@MoonDevilzzz · 13.01.2014, 11:43

Конечно

@_kost_ · 13.01.2014, 11:59 **[ТС]**

ну ты туда просто картинку запилил, а у меня в разных классах и в разных областях есть множество картинок jpg вот мне надо чтоб они отключались....

@MoonDevilzzz · 13.01.2014, 12:01

JavaScript
1
$('img').toggle();

- применяется конкретно к тегу картинки на всей странице.Если у тебя картинка стоит фоном к

HTML5
1
div

естественно не работает

@_kost_ · 13.01.2014, 12:12 **[ТС]**

вот сайт можешь глянуть в чем рамс?

@MoonDevilzzz · 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

У тебя куча ошибок на странице

@_kost_ · 13.01.2014, 12:24 **[ТС]**

я так понимаю
Uncaught TypeError: Object #<Object> has no method 'on' и
Uncaught TypeError: Object #<Object> has no method 'off'
он не понимает метод on и off как дать ему ума?

@MoonDevilzzz · 13.01.2014, 12:38

Во-первых, добавь так , как тебе написал товарищ

JavaScript
1
2
3
4
5
        $(document).ready(function(){
            $('#switch_check').on('click', function(){
                $('img').toggle();
            });
        });

начнем с этого.

@_kost_ · 13.01.2014, 12:45 **[ТС]**

сделано)

@MoonDevilzzz · 13.01.2014, 12:50

JavaScript
1
2
3
4
5
6
$(document).ready(function(){
            $('#switch_check').click(function(){
                $('img').toggle();
                console.log('working');
            });
        });

Так вставь

@_kost_ · 13.01.2014, 13:21 **[ТС]**

аааа спасиб респект те добрый человек=)

Добавлено через 19 минут
А теперь последний вопрос как теперь сделать так чтобы если отключили картинки при обновлении страницы они так же были не отображались и наоборот?

@MoonDevilzzz · 13.01.2014, 13:33

Только через cookie

@_kost_ · 13.01.2014, 13:39 **[ТС]**

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

Добавлено через 4 минуты
Значение записывать такое?

JavaScript
1
2
3
4
$.cookie('trable8', 'working', {
    expires: 5,
    path: '/',
});

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа 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 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@MoonDevilzzz 18 / 18 / 8 Регистрация: 15.03.2012 Сообщений: 166
	13.01.2014, 10:47
	jQuery То включен? 0

@_kost_ 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

@_kost_ 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

@_kost_ 10 / 10 / 0 Регистрация: 10.01.2014 Сообщений: 94
	13.01.2014, 11:59 [ТС]
	ну ты туда просто картинку запилил, а у меня в разных классах и в разных областях есть множество картинок jpg вот мне надо чтоб они отключались.... 0

@_kost_ 10 / 10 / 0 Регистрация: 10.01.2014 Сообщений: 94
	13.01.2014, 12:12 [ТС]
	вот сайт можешь глянуть в чем рамс? 0

@_kost_ 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

@_kost_ 10 / 10 / 0 Регистрация: 10.01.2014 Сообщений: 94
	13.01.2014, 12:45 [ТС]
	сделано) 0

@_kost_ 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