FonSite - Смена фона сайта [jQuery]

Добрый день дорогие читатели, как вы поняли из названия статьи речь пойдет о скрипте смены фона на сайте. Немного расскажу о данном скрипте. Появился он на моём старом сайте загрузка-про, сайт закрылся еще в начале 2016 года где-то, а скрипт остался и я решил поделиться им с вами.

Скрипт удобный, легкий и простой в настройке. В комплекте идут также несколько фонов. Работает он на jQuery. Перейдем непосредственно к установке. В скачанном архиве вы найдете папку images - фоны и картинки скрипта, css - папка со стилями, js - сам скрипт на jquery. Кроме того скрипт использует cookie для хранения, т.е. при закрытии страницы фон останется прежним (таким какой выбрали вы), что на мой взгляд практично и удобно. Плагин сам работает без обновления страницы, фон меняется сразу. Открывается окошко с выбором фона в виде popup окна.

Установка:

1. В скачанном архиве все папки залейте на ваш сайт.

2. Подключите библиотеку jQuery, например вставьте перед </head>:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

3. Подключите файлы стилей и скрипт от fonsite, вставьте перед </head>:

<link href="css/fonsite.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/fonsite.js"></script>

4. Замените тег <body> на следующие <body id=″bgfon″> - это важно для работы модуля.

5. Вставьте перед </body>:

<div id="fonsite" style="display:none;">
<div style="padding:5px;">
<h2><center>Фон сайта</center></h2>
<div class="hr"></div>
<table align="top">
<tr>
<td>
<div class="fon_site_one"><a onclick="ClickFon('01'); return false;" href="javascript://"><img class="img_fon_site01" src="images/fonsite/fon/01.jpg"/></a></div>
</td>
<td>
<div class="fon_site_one"><a onclick="ClickFon('02'); return false;" href="javascript://"><img class="img_fon_site02" src="images/fonsite/fon/02.jpg"/></a></div>
</td>
<td>
<div class="fon_site_one"><a onclick="ClickFon('03'); return false;" href="javascript://"><img class="img_fon_site03" src="images/fonsite/fon/03.jpg"/></a></div>
</td>
<td>
<div class="fon_site_one"><a onclick="ClickFon('04'); return false;" href="javascript://"><img class="img_fon_site04" src="images/fonsite/fon/04.jpg"/></a></div>
</td>
</tr>
<tr>
<td>
<div class="fon_site_one"><a onclick="ClickFon('05'); return false;" href="javascript://"><img class="img_fon_site05" src="images/fonsite/fon/05.jpg"/></a></div>
</td>
<td>
<div class="fon_site_one"><a onclick="ClickFon('06'); return false;" href="javascript://"><img class="img_fon_site06" src="images/fonsite/fon/06.jpg"/></a></div>
</td>
<td>
<div class="fon_site_one"><a onclick="ClickFon('07'); return false;" href="javascript://"><img class="img_fon_site07" src="images/fonsite/fon/07.jpg"/></a></div>
</td>
<td>
<div class="fon_site_one"><a onclick="ClickFon('08'); return false;" href="javascript://"><img class="img_fon_site08" src="images/fonsite/fon/08.jpg"/></a></div>
</td>
</tr>
</table>
<div class="hr"></div>
<h2><center>Новогодние</center></h2>
<div class="hr"></div>
<table align="top">
<tr>
<td>
<div class="fon_site_one"><a onclick="ClickFon('09'); return false;" href="javascript://"><img class="img_fon_site09" src="images/fonsite/fon/09.jpg"/></a></div>
</td>
<td>
<div class="fon_site_one"><a onclick="ClickFon('10'); return false;" href="javascript://"><img class="img_fon_site10" src="images/fonsite/fon/10.jpg"/></a></div>
</td>
<td>
<div class="fon_site_one"><a onclick="ClickFon('11'); return false;" href="javascript://"><img class="img_fon_site11" src="images/fonsite/fon/11.jpg"/></a></div>
</td>
<td>
<div class="fon_site_one"><a onclick="ClickFon('12'); return false;" href="javascript://"><img class="img_fon_site12" src="images/fonsite/fon/12.jpg"/></a></div>
</td>
</tr>
</table>
</div>
</div>

<div id="fonsite" style="display:none;"> <div style="padding:5px;"> <h2><center>Фон сайта</center></h2> <div class="hr"></div> <table align="top"> <tr> <td> <div class="fon_site_one"><a onclick="ClickFon('01'); return false;" href="javascript://"><img class="img_fon_site01" src="images/fonsite/fon/01.jpg"/></a></div> </td> <td> <div class="fon_site_one"><a onclick="ClickFon('02'); return false;" href="javascript://"><img class="img_fon_site02" src="images/fonsite/fon/02.jpg"/></a></div> </td> <td> <div class="fon_site_one"><a onclick="ClickFon('03'); return false;" href="javascript://"><img class="img_fon_site03" src="images/fonsite/fon/03.jpg"/></a></div> </td> <td> <div class="fon_site_one"><a onclick="ClickFon('04'); return false;" href="javascript://"><img class="img_fon_site04" src="images/fonsite/fon/04.jpg"/></a></div> </td> </tr> <tr> <td> <div class="fon_site_one"><a onclick="ClickFon('05'); return false;" href="javascript://"><img class="img_fon_site05" src="images/fonsite/fon/05.jpg"/></a></div> </td> <td> <div class="fon_site_one"><a onclick="ClickFon('06'); return false;" href="javascript://"><img class="img_fon_site06" src="images/fonsite/fon/06.jpg"/></a></div> </td> <td> <div class="fon_site_one"><a onclick="ClickFon('07'); return false;" href="javascript://"><img class="img_fon_site07" src="images/fonsite/fon/07.jpg"/></a></div> </td> <td> <div class="fon_site_one"><a onclick="ClickFon('08'); return false;" href="javascript://"><img class="img_fon_site08" src="images/fonsite/fon/08.jpg"/></a></div> </td> </tr> </table> <div class="hr"></div> <h2><center>Новогодние</center></h2> <div class="hr"></div> <table align="top"> <tr> <td> <div class="fon_site_one"><a onclick="ClickFon('09'); return false;" href="javascript://"><img class="img_fon_site09" src="images/fonsite/fon/09.jpg"/></a></div> </td> <td> <div class="fon_site_one"><a onclick="ClickFon('10'); return false;" href="javascript://"><img class="img_fon_site10" src="images/fonsite/fon/10.jpg"/></a></div> </td> <td> <div class="fon_site_one"><a onclick="ClickFon('11'); return false;" href="javascript://"><img class="img_fon_site11" src="images/fonsite/fon/11.jpg"/></a></div> </td> <td> <div class="fon_site_one"><a onclick="ClickFon('12'); return false;" href="javascript://"><img class="img_fon_site12" src="images/fonsite/fon/12.jpg"/></a></div> </td> </tr> </table> </div> </div>

На этом установка заканчивается, по аналогии можете добавить свои фоны или изменить имеющиеся.

Скачать архив со скриптом FonSite - Смена фона сайта на jQuery вы можете по ссылке ниже:
Скачать FonSite - смена фона сайта на jquery

Ссылка на GitHub: FonSite