01.07.2017, 16:20
|
|
Новичок на форуме
|
|
Регистрация: 01.07.2017
Сообщений: 9
|
|
|
Изменить цвет при клике на блок
Как сделать так чтобы заголовок открытого блока был одного цвета, а закрытого другого?
<style type="text/css">
@charset "utf-8";
/* Файл стилей для работы 'Проектирование имиджа' */
.menu_container {
margin: 0 auto;
width:470px;
font-family:arial;
}
.menu_container h2.acc_trigger {
padding: 0;
margin: 0 0 5px 0;
height: 42px;
line-height: 46px;
font-size: 1.3em;
font-weight: normal;
display: block;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
border: 2px solid #ff0000;
background: none;
text-align: center;
}
.menu_container h2.acc_trigger a {
color: green;
text-decoration: none;
display: block;
padding: 0 0 0 5px;
font-weight: bold;
line-height: 42px;
}
.menu_container h2.acc_trigger a:hover {
color: #32CD32;
}
div.menu_container h2.active {
margin: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom: 1px dashed #ccc;
}
.menu_container .acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
/*font-size: 1.2em;*/
clear: both;
border: 2px solid #ff0000;
border-top: none;
-webkit-border-bottom-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
}
.menu_container .acc_container .block {
padding: 0px 15px;
}
.menu_container .acc_container .block p {
padding: 0px 0;
margin: 0px 0;
}
.menu_container .acc_container img, .ac_container img {
float: left;
margin: 10px 15px 15px 0;
padding: 1px;
background: #fff;
border: 1px solid #97be10;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.menu_container h3.ac_trigger {
padding: 0;
margin: 0 -7px 5px -7px;
height: 30px;
line-height: 30px;
display: block;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #97be10;
}
.menu_container h3.ac_trigger a {
display: block;
padding: 0 0 0 30px;
}
</style>
<div class="menu_container"><!--начало container-->
<h2 class="acc_trigger"><a href="#"><span style="color: rgb(238, 29, 36);"><span style="font-size: 20px;"><strong>SMART WATCH GT08</strong></span></span></a></h2>
<div class="acc_container">
<div class="block">
<p><ul>
<li><span style="font-size: 18px;"><span style="color: rgb(0, 0, 0);"><span style="font-family: Arial;">Производитель: "Kingwear"</span></span></span></li>
<li><span style="font-size: 18px;">Беспроводная связь: GSM 850/900/1800/1900МГц, Bluetooth 3.0</span></li>
<li><span style="font-size: 18px;">Тип экрана: 1,54-дюймовый экран, 240х240 px</span></li>
<li><span style="font-size: 18px;">Интерфейс: английский, русский</span></li>
<li><span style="font-size: 18px;">Процессор: MTK6260A </span></li>
<li><span style="font-size: 18px;">Память: 128+64 Мбайт + поддержка MicroSD</span></li>
<li><span style="font-size: 18px;">Батарея: Li-po 350mAh (хватает на 2-3 дня)</span></li>
<li><span style="font-size: 18px;">Корпус: металл и пластик</span></li>
<li><span style="font-size: 18px;">Камера: 2 Мп</span></li>
<li><span style="font-size: 18px;">Масса: 62 гр.</span></li>
<li><span style="font-size: 18px;">49 x 43 x 11 мм</span></li>
<li><span style="font-size: 18px;">Гарантия: 12 месяца</span></li>
</ul></p>
</div>
</div>
<h2 class="acc_trigger"><a href="#"><span style="color: rgb(238, 29, 36);"><span style="font-size: 20px;"><strong>USB-ФЛЕШКА</strong></span></span></a></h2>
<div class="acc_container">
<div class="block">
<p><ul>
<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Интерфейс подключения: USB 3.0</span></span>
</span>
</li>
<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Объем памяти: 16 Гб</span></span>
</span>
</li>
<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Максимальная скорость записи: 30 Мбайт/с</span></span>
</span>
</li>
<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Максимальная скорость чтения: 130 Мбайт/с</span></span>
</span>
</li>
<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Защита паролем: Есть</span></span>
</span>
</li>
<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Материал корпуса: Металл</span></span>
</span>
</li>
<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Цвет: Черный, Серебристый</span></span>
</span>
</li>
<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Вес: 16 г</span></span>
</span>
</li>
<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Гарантия: 12 месяцев</span></span>
</span>
</li>
</ul>
</p>
</div>
</div>
Последний раз редактировалось skylink67, 01.07.2017 в 16:22.
|
|
01.07.2017, 16:22
|
|
Новичок на форуме
|
|
Регистрация: 01.07.2017
Сообщений: 9
|
|
|
Вторая часть скрипта
<h2 class="acc_trigger"><a href="#"><span style="color: rgb(238, 29, 36);"><span style="font-size: 20px;"><strong>POWERBANK</strong></span></span></a></h2>
<div class="acc_container">
<div class="block">
<p><ul>
<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Совместимость: Подходит для любых гаджетов, </span></span>
</span><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">заряжающихся от USB</span></span>
</span>
</li>
<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Индикация уровня заряда: Есть</span></span>
</span>
</li>
<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Емкость аккумулятора: 2600 мАч</span></span>
</span>
</li>
<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Ток на выходе: 1 А</span></span>
</span>
</li>
<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Напряжение на выходе: 5 В</span></span>
</span>
</li>
<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Цвет: Черный</span></span>
</span>
</li>
<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Размеры: 90.7х31х22 мм</span></span>
</span>
</li>
<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Вес: 65 г</span></span>
</span>
</li>
<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Гарантия: 12 месяцев</span></span>
</span>
</li>
</ul>
</p>
</div>
</div>
<h2 class="acc_trigger"><a href="#"><span style="color: rgb(238, 29, 36);"><span style="font-size: 20px;"><strong>КАРТА ПАМЯТИ</strong></span></span></a></h2>
<div class="acc_container">
<div class="block">
<p><ul>
<li><span style="font-size: 18px;">Тип: MicroSDHC</span></li>
<li><span style="font-size: 18px;">Объем памяти: 16 Гб</span></li>
<li><span style="font-size: 18px;">Максимальная скорость записи: 10 Мбайт/с</span></li>
<li><span style="font-size: 18px;">Максимальная скорость чтения: 45 Мбайт/с</span></li>
<li><span style="font-size: 18px;">Цвет: Черный</span></li>
<li><span style="font-size: 18px;">Вес: 9 г</span></li>
<li><span style="font-size: 18px;">Гарантия: 12 месяцев</span></li>
</ul>
</p>
</div>
</div>
</div><!--конец container-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
// Ion.Zoom
// version 1.2.63
// [url]http://ionden.com/a/plugins/ion.zoom/[/url]
(function(c){var C=0,d;d='<div class="ion-zoom-preloader"></div><div class="ion-zoom-image"><div class="ion-zoom-close"><div></div></div>';d+='<div class="ion-zoom-prev"><div></div></div>';d+='<div class="ion-zoom-next"><div></div></div>';d+="</div>";var D=c(document.body),x=c(window),y,g,E,F;D.append(d);y=c("div.ion-zoom-preloader");g=c("div.ion-zoom-image");E=c("div.ion-zoom-prev");F=c("div.ion-zoom-next");var r=[],z=!1,G=0,j={init:function(k){var h=this;if(!h.data("isActive")){this.pluginCount=
C+=1;r[this.pluginCount]=this;var d=c.extend({visibleControls:!0},k);h.each(function(a){c(this).data("isActive",!0).data("iznum",a)});var l=!1,p=!1,j=h.length,s,t,b={},e=0,u,v,f,w,n;this.closeZoom=function(a){m(!1,a)};var J=function(){g.on("click",function(){m()});d.visibleControls&&(E.on("click",function(a){a.stopPropagation();l&&!p&&H()}),F.on("click",function(a){a.stopPropagation();l&&!p&&I()}))},m=function(a,g){a?A(b.x,b.y,b.w,b.h,!0,!0,g):A(b.x,b.y,b.w,b.h,!0,!1,g)},H=function(){e-=1;var a=h.eq(e);
a.length||(e=j-1,a=h.eq(j-1));w=a;v=a.prop("href");m(!0)},I=function(){e+=1;var a=h.eq(e);a.length||(e=0,a=h.eq(0));w=a;v=a.prop("href");m(!0)},B=function(){var a=parseInt(f.css("border-left-width")),d=parseInt(f.css("padding-left")),c=parseInt(f.children("img").css("border-left-width")),k=parseInt(f.children("img").css("padding-left")),a=a+d,c=c+k;b={x:f.offset().left+a+c,y:f.offset().top+a+c,w:f.width()-2*c,h:f.height()-2*c};c=b.x+b.w/2;y.css("top",b.y+b.h/2).css("left",c);g.append('<img src="'+
u+'" />');n=g.children("img");n.on("load",function(){s=n.width();t=n.height();y.css("top","-9999px").css("left","-9999px");n.width(b.w).height(b.h);g.width(b.w).height(b.h);g.css("left",b.x).css("top",b.y);var a=x.innerWidth()-40,c=x.innerHeight()-40,d=x.scrollTop(),k=t/s,f=b.x+b.w/2-s/2,h=b.y+b.h/2-t/2,e=s,q=t;e>a&&(e=a,q=a*k,f=b.x+b.w/2-e/2);q>c&&(q=c,e=c/k,f=b.x+b.w/2-e/2);f+e>a&&(f=a-e-20);h+q>20+d+c&&(h=d+c-q);20>f&&(f=20);h<d+20&&(h=d+20);A(f,h,e,q,!1,!1)})},A=function(a,b,c,e,k,m,j){p=!0;g.removeClass("isOpen");
d.visibleControls||g.removeClass("noControls");g.stop().animate({left:a,top:b,width:c,height:e},{step:function(a,b){"width"===b.prop&&n.width(a+"px");"height"===b.prop&&n.height(a+"px")},duration:300,complete:function(){k?(g.css("top","-9999px").css("left","-9999px"),g.width("0px").height("0px"),g.children("img").remove(),z=l=!1,m&&(f=w,u=v,B()),j&&j()):(g.addClass("isOpen"),d.visibleControls||g.addClass("noControls"),l=z=!0,G=h.pluginCount);p=!1}})};h.on("click",function(a){a.preventDefault();var b=
c(this);e=b.data("iznum");l?(w=b,v=b.prop("href"),m(!0)):z?r[G].closeZoom(function(){f=b;u=b.prop("href");J();B()}):(f=b,u=b.prop("href"),J(),B())});D.on("keydown",function(a){27===a.which&&l&&m();37===a.which&&(l&&!p)&&H();39===a.which&&(l&&!p)&&I()})}},close:function(){for(var c=1;c<r.length;c++)r[c].closeZoom()}};c.fn.ionZoom=function(d){if(j[d])return j[d].apply(this,Array.prototype.slice.call(arguments,1));if("object"===typeof d||!d)return j.init.apply(this,arguments);c.error("Method "+d+" does not exist for jQuery.ionZoom")}})(jQuery);
</script>
<script type="text/javascript">
( function( $ ) {
// Запускаем скрипт увеличения картинки
$(".gallery").ionZoom({
visibleControls: false // Отключает визуальные элементы управления
});
$( document ).ready(function() { // Действие по готовности браузера
$('a.gallery>img').each(function(index) { // Перебираем все ссылки с классом gallery
$(this).after('<div>'+$(this).attr('alt')+'</div>'); // Добавляем div контейнер и вставляем в него содержимое alt
});
// Вкладки в контенте
$('ul.tabs li').css('cursor', 'pointer');
$('ul.tabs.tabs1 li').click(function(){
var thisClass = this.className.slice(0,2);
$('div.t1').hide();
$('div.t2').hide();
$('div.t3').hide();
$('div.t4').hide();
$('div.t5').hide();
$('div.' + thisClass).show();
$('ul.tabs.tabs1 li').removeClass('tab-current');
$(this).addClass('tab-current');
});
//Аккордеон в контенте
$('.acc_container').hide(); //Скрыть, закрыть все контейнеры
$('.acc_trigger:first').addClass('active').next().show(); //Добавить "active" класс к 1 триггеру
$('.acc_trigger').click(function(){ //Событие при клике
if( $(this).next().is(':hidden') ) { //Если следующий контейнер закрыт
$('.acc_trigger').removeClass('active').next().slideUp(); //Очистка всех .acc_trigger классов и закрытие контейнеров
$(this).toggleClass('active').next().slideDown(); //Открываем контейнер, по которому сработал клик
} else {
}
return false; // Запрещаем браузеру переходить по ссылке
});
$('.ac_container').hide(); //Скрыть, закрыть все контейнеры
$('.ac_trigger:first').addClass('active').next().show(); //Добавить "active" класс к 1 триггеру
$('.ac_trigger>a').click(function(){ //Событие при клике
if( $(this).next().is(':hidden') ) { ////Если следующий контейнер закрыт
$('.ac_trigger').removeClass('active').next().slideUp(); //Очистка всех .acc_trigger классов и закрытие контейнеров
$(this).toggleClass('active').next().slideDown(); //Открываем контейнер, по которому сработал клик
}
return false; //Запрещаем браузеру переходить по ссылке
});
});
} )( jQuery )
</script>
|
|
01.07.2017, 16:29
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от skylink67
|
|
$('.acc_trigger:first').addClass('active')
|
В стилях прописать правила для этого класса нельзя что-ли? |
|
01.07.2017, 16:31
|
|
Новичок на форуме
|
|
Регистрация: 01.07.2017
Сообщений: 9
|
|
|
я новичок в этом и не понимаю ни чего
Поможете разобраться?
|
|
01.07.2017, 16:45
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от skylink67
|
|
Поможете разобраться?
|
В чем? Судя по коду заголовку с классом acc_trigger чья панель раскрывается добавляется класс active. Значит в стилях
h2.acc_trigger.active {
background: какой-то цвет;
}
|
|
01.07.2017, 17:24
|
|
Новичок на форуме
|
|
Регистрация: 01.07.2017
Сообщений: 9
|
|
|
это смена фона заголовка, а мне нужно смена цвета текста заголовка
|
|
01.07.2017, 17:29
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от skylink67
|
|
это смена фона заголовка, а мне нужно смена цвета текста заголовка
|
Ну так замените background на color. Вы что CSS не знаете?
PS. <span style="color: rgb(238, 29, 36);"><span style="font-size: 20px;"> - вот это будет мешать, уберите эти обертки, у вас же задаются стили уже для тега А. И цвет не h2 задавать? а h2.active a и h2.active a:hover, если нужно и наведение обрабатывать
Последний раз редактировалось laimas, 01.07.2017 в 17:36.
|
|
01.07.2017, 17:52
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Выбрасывайте обертки span, кто их туда понаставил?
В строке 24 стилей для тега А указаны стили: color: green; замените на color: rgb(238, 29, 36); и добавьте font-size: 20px; font-weight: bold;
Вбросив из заголовка теги SPAN, должно быть:
<h2 class="acc_trigger"><a href="#">SMART WATCH GT08</a></h2>
Из элементов LI также выбросить лишнее, должен быть только тег LI и текст в нем:
<li>Индикация уровня заряда: Есть</li>
Цвет и размер, и имя шрифта у них будет от родителя, тот что задан для BODY. Если не походит, тогда пропишите в CSS. Не надо пихать этот мусор через теги в верстку. |
|
02.07.2017, 17:23
|
|
Новичок на форуме
|
|
Регистрация: 01.07.2017
Сообщений: 9
|
|
|
Не работает
|
|
02.07.2017, 18:15
|
|
Новичок на форуме
|
|
Регистрация: 01.07.2017
Сообщений: 9
|
|
<style type="text/css">
@charset "utf-8";
/* Файл стилей для работы 'Проектирование имиджа' */
.menu_container {
margin: 0 auto;
width:470px;
font-family:arial;
}
.menu_container h2.acc_trigger {
padding: 0;
margin: 0 0 5px 0;
height: 42px;
line-height: 46px;
font-size: 1.3em;
font-weight: normal;
display: block;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
border: 2px solid #ff0000;
background: none;
text-align: center;
}
.menu_container h2.acc_trigger a {
color: rgb(238, 29, 36);
font-size: 20px;
font-weight: bold;
text-decoration: none;
display: block;
padding: 0 0 0 5px;
font-weight: bold;
line-height: 42px;
}
div.menu_container h2.active {
margin: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom: 1px dashed #ccc;
}
.menu_container .acc_container {
color: rgb(0, 0, 0);
font-family: Arial;
font-size: 18px;
margin: 0 0 5px; padding: 0;
overflow: hidden;
/*font-size: 1.2em;*/
clear: both;
border: 2px solid #ff0000;
border-top: none;
-webkit-border-bottom-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
}
.menu_container .acc_container .block {
padding: 0px 15px;
}
.menu_container .acc_container .block p {
padding: 0px 0;
margin: 0px 0;
}
.menu_container .acc_container img, .ac_container img {
float: left;
margin: 10px 15px 15px 0;
padding: 1px;
background: #fff;
border: 1px solid #97be10;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.menu_container h3.ac_trigger {
padding: 0;
margin: 0 -7px 5px -7px;
height: 30px;
line-height: 30px;
display: block;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #97be10;
}
.menu_container h3.ac_trigger a {
display: block;
padding: 0 0 0 30px;
}
</style>
<div class="menu_container"><!--начало container-->
<h2 class="acc_trigger"><a href="#">SMART WATCH GT08</a></h2>
<div class="acc_container">
<div class="block">
<p><ul>
<li>Производитель: "Kingwear"</li>
<li>Беспроводная связь: GSM 850/900/1800/1900МГц, Bluetooth 3.0</li>
<li>Тип экрана: 1,54-дюймовый экран, 240х240 px</li>
<li>Интерфейс: английский, русский</li>
<li>Процессор: MTK6260A</li>
<li>Память: 128+64 Мбайт + поддержка MicroSD</li>
<li>Батарея: Li-po 350mAh (хватает на 2-3 дня)</li>
<li>Корпус: металл и пластик</li>
<li>Камера: 2 Мп</li>
<li>Масса: 62 гр.</li>
<li>49 x 43 x 11 мм</li>
<li>Гарантия: 12 месяца</li>
</ul></p>
</div>
</div>
<h2 class="acc_trigger"><a href="#">USB-ФЛЕШКА</a></h2>
<div class="acc_container">
<div class="block">
<p><ul>
<li>Интерфейс подключения: USB 3.0</li>
<li>Объем памяти: 16 Гб</li>
<li>Максимальная скорость записи: 30 Мбайт/с</li>
<li>Максимальная скорость чтения: 130 Мбайт/с</li>
<li>Защита паролем: Есть</li>
<li>Материал корпуса: Металл</li>
<li>Цвет: Черный, Серебристый</li>
<li>Вес: 16 г</li>
<li>Гарантия: 12 месяцев</li>
</ul>
</p>
</div>
</div>
<h2 class="acc_trigger"><a href="#">POWERBANK</a></h2>
<div class="acc_container">
<div class="block">
<p><ul>
<li>Совместимость: Подходит для любых гаджетов,
заряжающихся от USB</li>
<li>Индикация уровня заряда: Есть</li>
<li>Емкость аккумулятора: 2600 мАч</li>
<li>Ток на выходе: 1 А</li>
<li>Напряжение на выходе: 5 В</li>
<li>Цвет: Черный</li>
<li>Размеры: 90.7х31х22 мм</li>
<li>Вес: 65 г</li>
<li>Гарантия: 12 месяцев</li>
</ul>
</p>
</div>
</div>
<h2 class="acc_trigger"><a href="#">КАРТА ПАМЯТИ</a></h2>
<div class="acc_container">
<div class="block">
<p><ul>
<li>Тип: MicroSDHC</li>
<li>Объем памяти: 16 Гб</li>
<li>Максимальная скорость записи: 10 Мбайт/с</li>
<li>Максимальная скорость чтения: 45 Мбайт/с</li>
<li>Цвет: Черный</li>
<li>Вес: 9 г</li>
<li>Гарантия: 12 месяцев</li>
</ul>
</p>
</div>
</div>
</div><!--конец container-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
// Ion.Zoom
// version 1.2.63
// [url]http://ionden.com/a/plugins/ion.zoom/[/url]
(function(c){var C=0,d;d='<div class="ion-zoom-preloader"></div><div class="ion-zoom-image"><div class="ion-zoom-close"><div></div></div>';d+='<div class="ion-zoom-prev"><div></div></div>';d+='<div class="ion-zoom-next"><div></div></div>';d+="</div>";var D=c(document.body),x=c(window),y,g,E,F;D.append(d);y=c("div.ion-zoom-preloader");g=c("div.ion-zoom-image");E=c("div.ion-zoom-prev");F=c("div.ion-zoom-next");var r=[],z=!1,G=0,j={init:function(k){var h=this;if(!h.data("isActive")){this.pluginCount=
C+=1;r[this.pluginCount]=this;var d=c.extend({visibleControls:!0},k);h.each(function(a){c(this).data("isActive",!0).data("iznum",a)});var l=!1,p=!1,j=h.length,s,t,b={},e=0,u,v,f,w,n;this.closeZoom=function(a){m(!1,a)};var J=function(){g.on("click",function(){m()});d.visibleControls&&(E.on("click",function(a){a.stopPropagation();l&&!p&&H()}),F.on("click",function(a){a.stopPropagation();l&&!p&&I()}))},m=function(a,g){a?A(b.x,b.y,b.w,b.h,!0,!0,g):A(b.x,b.y,b.w,b.h,!0,!1,g)},H=function(){e-=1;var a=h.eq(e);
a.length||(e=j-1,a=h.eq(j-1));w=a;v=a.prop("href");m(!0)},I=function(){e+=1;var a=h.eq(e);a.length||(e=0,a=h.eq(0));w=a;v=a.prop("href");m(!0)},B=function(){var a=parseInt(f.css("border-left-width")),d=parseInt(f.css("padding-left")),c=parseInt(f.children("img").css("border-left-width")),k=parseInt(f.children("img").css("padding-left")),a=a+d,c=c+k;b={x:f.offset().left+a+c,y:f.offset().top+a+c,w:f.width()-2*c,h:f.height()-2*c};c=b.x+b.w/2;y.css("top",b.y+b.h/2).css("left",c);g.append('<img src="'+
u+'" />');n=g.children("img");n.on("load",function(){s=n.width();t=n.height();y.css("top","-9999px").css("left","-9999px");n.width(b.w).height(b.h);g.width(b.w).height(b.h);g.css("left",b.x).css("top",b.y);var a=x.innerWidth()-40,c=x.innerHeight()-40,d=x.scrollTop(),k=t/s,f=b.x+b.w/2-s/2,h=b.y+b.h/2-t/2,e=s,q=t;e>a&&(e=a,q=a*k,f=b.x+b.w/2-e/2);q>c&&(q=c,e=c/k,f=b.x+b.w/2-e/2);f+e>a&&(f=a-e-20);h+q>20+d+c&&(h=d+c-q);20>f&&(f=20);h<d+20&&(h=d+20);A(f,h,e,q,!1,!1)})},A=function(a,b,c,e,k,m,j){p=!0;g.removeClass("isOpen");
d.visibleControls||g.removeClass("noControls");g.stop().animate({left:a,top:b,width:c,height:e},{step:function(a,b){"width"===b.prop&&n.width(a+"px");"height"===b.prop&&n.height(a+"px")},duration:300,complete:function(){k?(g.css("top","-9999px").css("left","-9999px"),g.width("0px").height("0px"),g.children("img").remove(),z=l=!1,m&&(f=w,u=v,B()),j&&j()):(g.addClass("isOpen"),d.visibleControls||g.addClass("noControls"),l=z=!0,G=h.pluginCount);p=!1}})};h.on("click",function(a){a.preventDefault();var b=
c(this);e=b.data("iznum");l?(w=b,v=b.prop("href"),m(!0)):z?r[G].closeZoom(function(){f=b;u=b.prop("href");J();B()}):(f=b,u=b.prop("href"),J(),B())});D.on("keydown",function(a){27===a.which&&l&&m();37===a.which&&(l&&!p)&&H();39===a.which&&(l&&!p)&&I()})}},close:function(){for(var c=1;c<r.length;c++)r[c].closeZoom()}};c.fn.ionZoom=function(d){if(j[d])return j[d].apply(this,Array.prototype.slice.call(arguments,1));if("object"===typeof d||!d)return j.init.apply(this,arguments);c.error("Method "+d+" does not exist for jQuery.ionZoom")}})(jQuery);
</script>
<script type="text/javascript">
( function( $ ) {
// Запускаем скрипт увеличения картинки
$(".gallery").ionZoom({
visibleControls: false // Отключает визуальные элементы управления
});
$( document ).ready(function() { // Действие по готовности браузера
$('a.gallery>img').each(function(index) { // Перебираем все ссылки с классом gallery
$(this).after('<div>'+$(this).attr('alt')+'</div>'); // Добавляем div контейнер и вставляем в него содержимое alt
});
// Вкладки в контенте
$('ul.tabs li').css('cursor', 'pointer');
$('ul.tabs.tabs1 li').click(function(){
var thisClass = this.className.slice(0,2);
$('div.t1').hide();
$('div.t2').hide();
$('div.t3').hide();
$('div.t4').hide();
$('div.t5').hide();
$('div.' + thisClass).show();
$('ul.tabs.tabs1 li').removeClass('tab-current');
$(this).addClass('tab-current');
});
//Аккордеон в контенте
$('.acc_container').hide(); //Скрыть, закрыть все контейнеры
$('.acc_trigger:first').addClass('active').next().show(); //Добавить "active" класс к 1 триггеру
$('.acc_trigger').click(function(){ //Событие при клике
if( $(this).next().is(':hidden') ) { //Если следующий контейнер закрыт
$('.acc_trigger').removeClass('active').next().slideUp(); //Очистка всех .acc_trigger классов и закрытие контейнеров
$(this).toggleClass('active').next().slideDown(); //Открываем контейнер, по которому сработал клик
} else {
}
return false; // Запрещаем браузеру переходить по ссылке
});
$('.ac_container').hide(); //Скрыть, закрыть все контейнеры
$('.ac_trigger:first').addClass('active').next().show(); //Добавить "active" класс к 1 триггеру
$('.ac_trigger>a').click(function(){ //Событие при клике
if( $(this).next().is(':hidden') ) { ////Если следующий контейнер закрыт
$('.ac_trigger').removeClass('active').next().slideUp(); //Очистка всех .acc_trigger классов и закрытие контейнеров
$(this).toggleClass('active').next().slideDown(); //Открываем контейнер, по которому сработал клик
}
return false; //Запрещаем браузеру переходить по ссылке
});
});
} )( jQuery )
</script>
|
|
|
|
