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,
ищите другой плагин это устарел |
Всё поправил.Большое человеческое спасибо за помощь.Забыл дописать один класс.Виноват.Исправлюсь.Е ё раз спасибо.
|
Часовой пояс GMT +3, время: 17:06. |