grayscale+onClick
Вечер добрый.Есть кнопка, которая меняет фон шапки сайта на серый.Хочу привязать к ней grayscale, что бы и картинки обесцвечивались. Но никак не получается заставить обесцветиться только картинки.Сереет вся страница.Весь вечер методом тыка проковырял,сил больше нет.Вот код
<script type="text/javascript">
$(document).ready(function(){
grayscale.prepare($('#content_def img,#mainbottom img'));
$('#content_def img,#mainbottom img').click(function(){
grayscale($(this));
},
function(){
grayscale.reset();
});
});
</script>
<input type='button' style="background:#363636" value='' onclick="set_class('gray');grayscale()"> Подскажите,люди добрые. |
ureech,
а что такое grayscale, где оно живёт? |
Живёт вроде здесьВроде это самый ходовой скрипт.Обесцвечивает картинки.
|
И здесь на форуме я видел обсуждение.
|
ureech,
шапку набросайте ))) |
ureech, жми кнопки макс!!!)))
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>
<style type="text/css">
.blg{
background: #1060BF;
}
.def{
background: #9B0E14;
}
.gray{
background:#363636 ;
}
</style>
<script>
function set_class(cls)
{
document.getElementById('header').className = cls;
localStorage.cls = cls
}
window.onload = function ()
{
var cls = localStorage.cls;
cls && set_class(cls)
}
</script>
<script type="text/javascript">
$(function(){
var $inp = $('input'), $img = $('#header img');
$inp.click(function(){
var indx = $inp.index(this);
indx == 2 ? grayscale($img) : grayscale.reset($img)
});
});
</script>
</head>
<body>
<h1 id="header"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="">Вот так</h1>
<input type='button' style="background:#1060BF" value='Test' onclick="set_class('blg')">
<input type='button' style="background:#9B0E14" value='Test' onclick="set_class('def')">
<input type='button' style="background:#363636" value='Test' onclick="set_class('gray')">
</body>
</html>
|
<script type="text/javascript">
$(document).ready(function(){
grayscale.prepare($('#content_def img,#mainbottom img'));
$('#content_def img,#mainbottom img').click(function(){
grayscale($(this));
},
function(){
grayscale.reset();
});
});
</script>
<div style="width:1120px;height:5px;background:#9B0E14;margin:0 auto;"></div>
<div id="header-wrap">
<div id="header" class="def">
<!--header -->
{{Header}}
<!--/header-->
</div>
</div>
{{Hesder}}:
<script>
function set_class(cls)
{
document.getElementById('header').className = cls;
localStorage.cls = cls
}
window.onload = function ()
{
var cls = localStorage.cls;
cls && set_class(cls)
}
</script>
<div id="logo-text"><a href="" title="">Bible<span>Lab</span></a></div>
<a name="top"></a>
<div id="op">
<a href="">Религия-это ловушка для человека,ищущего Бога!</a>
</div>
<div class="login">[+phx:if=`[[if_login]]`:is=``:then=`<a href="/login.html">Вход | </a><a href="[~54~]">Регистрация</a></div>`:else=`<a href="/login.html?webloginmode=lo">Выход | </a><a href="[~55~]">Профиль</a></div>`+]
.................................................. ................. .................................................. .............. <div class="input"> <input type='button' style="background:#1060BF" value='' onclick="set_class('blg');grayscale.reset()"> <input type='button' style="background:#9B0E14" value='' onclick="set_class('def');grayscale.reset()"> <input type='button' style="background:#363636" value='' onclick="set_class('gray');grayscale()"> </div> |
Вот ссылка на сайт, на главной посмотрите.Эти кнопки глючат и серая только один раз работала
|
ureech,
ищите другой плагин это устарел |
Всё поправил.Большое человеческое спасибо за помощь.Забыл дописать один класс.Виноват.Исправлюсь.Е ё раз спасибо.
|
Возможно ли это как то по другому написать:
<script>
function set_class(cls)
{
document.getElementById('header').className = cls;
localStorage.cls = cls
}
window.onload = function ()
{
var cls = localStorage.cls;
cls && set_class(cls);
}
</script>
Что то здесь мешает другому скрипту,(вывод иконок соц.сетей) |
ureech,
уберите для начала скрипт выше доктипа |
Да там его вроде и не было.Все скрипты либо в <head> либо в <body>
|
Цитата:
Цитата:
|
Не знаю как вы поймали этот момент,:) Видно пока я туда-сюда бегал по шаблонпм он там полежал немного.Дело в этой ф-ции window.onload = function (), она "мешает". И ещё этот grayscale не сохраняется,но это Бог с ним, на скорость не влияет, но вот если по серой кнопки два раза кликнешь, то потом картинку в цвет другими кнопками не перевести, только через перезагрузку.Это как то напрягает.
|
Цитата:
|
Хорошо, я понял.Спасибо.Буду смотреть.
|
Убрал, эту ф-цию, всё заработвло.У вас скрипт не пошёл из-за фотки.Я вставил свою и всё заработало.Видно зашифрованная какая то :)
И если есть время не могли бы объяснить , что эта запись значит cls && set_class(cls), остальное более-менее ясно, а эта как то вообще странная.Ни точек,не запятых...Дюже любопытно. |
| Часовой пояс GMT +3, время: 13:58. |