Помогите! Смена фоновой картинки.

[tania2509]

Добрый день!

Пожалуйста, помогите разобраться.

У меня очень простой сайт, фоновая картинка и несколько ссылок.

 

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

Я думаю, что для умных людей это не сложно, но я потратила уже 2 недели, чтобы попытаться разобраться(((

 

Где размещать эту команду?? В html, JS или CSS???

 

Спасибо всем, кто откликнется!

[satantx]

Скинь код или ссылку на сайт. Так сложно что то понять

[tania2509]

Скинь код или ссылку на сайт. Так сложно что то понять

 

http://inaugurationofrussia.ru

Edited January 28, 2015 by tania2509

[jdk]

Думаю можно фону задать несколько стилей стилей, с разными фоновыми картинками и при щелчке по ссылке переключать фон.

Что то вроде:

$('#index_slider').removeClass("index_background");$('#index_slider').addClass("index_background_2");

[Aleksandr.L]

http://jsfiddle.net/7Lb5k176/

 

Так?

[tania2509]

http://jsfiddle.net/7Lb5k176/

 

Так?

 

Да!) Только можно, пожалуйста, доступным языком пояснить что необходимо сделать для этого эффекта..? 

 

Думаю можно фону задать несколько стилей стилей, с разными фоновыми картинками и при щелчке по ссылке переключать фон.

Что то вроде:

$('#index_slider').removeClass("index_background");$('#index_slider').addClass("index_background_2");

 

Возможно. А куда нужно поместить эту команду? Я буду пробовать.

[Andryshok]

Так человек же вам вон все сделал

в css файле создаете фоны

.new-bg {    background: url(http://goo.gl/0virQo);    background-size: cover;}и еще один например фон.new-bg1 {    background: url(http://моя картинка.jpg);    background-size: cover;}

прописан класс то по чему жамкать

.popup {    display: none;    width: 50%;    background: rgba(255, 255, 255, 0.5);    padding: 10px;    border-radius: 10px;для другойссылки сделайте еще один такой же и обзовите .popup1

Код жабасприта который меняет фон

$('.open').click(function() {    $('.popup').bPopup({        onOpen: function() {            $('body').addClass('new-bg');        },         onClose: function() {            $('body').removeClass('new-bg');        }    });});

для вашего второго фона он будет примерно таким

$('.popup1').bPopup({.....

[tania2509]

 

Так человек же вам вон все сделал

в css файле создаете фоны

.new-bg {    background: url(http://goo.gl/0virQo);    background-size: cover;}и еще один например фон.new-bg1 {    background: url(http://моя картинка.jpg);    background-size: cover;}

прописан класс то по чему жамкать

.popup {    display: none;    width: 50%;    background: rgba(255, 255, 255, 0.5);    padding: 10px;    border-radius: 10px;для другойссылки сделайте еще один такой же и обзовите .popup1

Код жабасприта который меняет фон

$('.open').click(function() {    $('.popup').bPopup({        onOpen: function() {            $('body').addClass('new-bg');        },         onClose: function() {            $('body').removeClass('new-bg');        }    });});

для вашего второго фона он будет примерно таким

$('.popup1').bPopup({.....

 

Да, спасибо! Я уже пытаюсь это все подстроить.

Только у меня код немного другой:

<a href="#" onclick="$('#exampleModal7').arcticmodal()">“ы<br>станешь<br>лучше</a><div style="display: none;"><div class="b-modal" id="exampleModal7"><div width="100%" style="text-align: justify;"><font color=ffffff><font style="font-family:'HelveticaNeueCyr-Thin',Sans-Serif; text-shadow: 1.5px 2.598px 15px rgb( 49, 49, 49 ); font-size: 12pt;"><br>ТЕКСТ<div align="right" style="height: 165px; background: url('img/sign.png') right no-repeat; background-position-x: 78%;"><br><br>“ать€на  узнецова,<br>ƒиректор проекта</div></div></font></div></div></div>

Если я правильно все поняла, то в моем случае '.popup' - это '.b-modal'

Не могу разобраться с JS - можно ли данную команду просто добавить к готовому коду??

Если да, то как правильно это сделать? Я попыталась добавить и подставить свои значения, но не работает((

[Andryshok]

впишите жабаскрипт прямо в код HTML , оберните его тегами 

 <script>   ваш код  который обрабатывает нажатие  </script>

[tania2509]

 

впишите жабаскрипт прямо в код HTML , оберните его тегами 

 <script>   ваш код  который обрабатывает нажатие  </script>

 

Спасибо, что помогаете!

Извините меня криворукую(((( не получается((((

Вставила скрипт в <body> - не работает.

Попыталась подставить свои данные из css, может из-за этого не работает??

<script>$('.block2').click(function() {    $('.b-modal').arcticmodal({        onOpen: function() {            $('body').addClass('new-bg1');        },         onClose: function() {            $('body').removeClass('new-bg');        }    });});</script><div class="mainblock"><div id="layer1"><!-- “ы станешь лучше --><a href="#" onclick="$('#exampleModal7').arcticmodal()">“ы<br>станешь<br>лучше</a><div style="display: none;"><div class="b-modal" id="exampleModal7"><div width="100%" style="text-align: justify;"><font style="font-family:'HelveticaNeueCyr-Thin',Sans-Serif; font-size: 12pt;">ТЕКСТ<div align="right" style="height: 165px; background: url('img/sign.png') right no-repeat; background-position-x: 78%;"><br><br>“ать€на  узнецова,<br>ƒиректор проекта</div></font></div></div></div><!-- /“ы станешь лучше -->

В CSS данные такие:

.block2 { 	font-family:'HelveticaNeueCyr-Roman',Sans-Serif;	font-size: 22pt;	text-align: justify;	text-transform: uppercase;/*	text-shadow: 1px 1px 2px black;  –Я–∞—А–∞–Љ–µ—В—А—Л —В–µ–љ–Є */    width: 900px;    }.b-modal {                position: relative;                width: 700px;		height: 595px;                padding: 24px;                              /*  border: 3px solid #bbb; */                border-radius: 10px;                }

И не могу понять, что отображает в скрипте 'body' ((((

 

Спасибо больше за помощь!!

[Aleksandr.L]

tania2509, для начала нужно подключить плагин:

<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.11.0.min.js"></script>

Разметка такая:

<a href="#" class="open">Жми</a> // При клике на эту ссылку будет появляться блок ниже и меняться фон.<div class="popup"> // Этот блок будет появляться при клике на ссылку.	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora provident sed ut ipsa voluptatum quisquam fugit iste incidunt numquam maxime impedit adipisci neque officiis nemo obcaecati quidem facere ullam! Dolore.</p></div>

Скрипт:

$('.open').click(function() {    $('.popup').bPopup({        onOpen: function() {            $('body').addClass('new-bg'); // при клике по ссылке - background поменяется, т.е. добавили тегу <body> класс "new-bg";        },                                // в этом классе установлен новый background        onClose: function() {            $('body').removeClass('new-bg'); // при закрытии этот класс "new-bg" у <body> удаляется, соответственно будет стандартный bg.        }    });});

И да, чтобы скрипт работал - нужно подключить жуквери.

[tania2509]

tania2509, для начала нужно подключить плагин:

<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.11.0.min.js"></script>

Разметка такая:

<a href="#" class="open">Жми</a> // При клике на эту ссылку будет появляться блок ниже и меняться фон.<div class="popup"> // Этот блок будет появляться при клике на ссылку.	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora provident sed ut ipsa voluptatum quisquam fugit iste incidunt numquam maxime impedit adipisci neque officiis nemo obcaecati quidem facere ullam! Dolore.</p></div>

Скрипт:

$('.open').click(function() {    $('.popup').bPopup({        onOpen: function() {            $('body').addClass('new-bg'); // при клике по ссылке - background поменяется, т.е. добавили тегу <body> класс "new-bg";        },                                // в этом классе установлен новый background        onClose: function() {            $('body').removeClass('new-bg'); // при закрытии этот класс "new-bg" у <body> удаляется, соответственно будет стандартный bg.        }    });});

И да, чтобы скрипт работал - нужно подключить жуквери.

 

   

У меня подключен уже плагин jquery.arcticmodal-0.2., через него никак нельзя это добавить ??

 

Скрипт к нему такой

<script type="text/javascript"> jQuery(document).ready(function(){    jQuery('.catLink').click(function(){      jQuery(this).parent().children('div.catCont').toggle('normal');      return false;    });  });</script>

А в html так

<div class="mainblock"><div id="layer1"><a href="#" onclick="$('#exampleModal7').arcticmodal()">“ы<br>станешь<br>лучше</a><div style="display: none;"><div class="b-modal" id="exampleModal7">

[Aleksandr.L]

У меня подключен уже плагин jquery.arcticmodal-0.2., через него никак нельзя это добавить ??

 

http://jsfiddle.net/bcbmfw0d/

Edited January 29, 2015 by Aleksandr.L

[tania2509]

 

У меня подключен уже плагин jquery.arcticmodal-0.2., через него никак нельзя это добавить ??

 

http://jsfiddle.net/bcbmfw0d/

 

 

Спасибо большое!

Подставила все, как вы написали.

 

Но получилось так

 

И смена фона не происходит.

Может я что-то не учла ??

[Andryshok]

[Aleksandr.L]

И смена фона не происходит. Может я что-то не учла ??

 

Я не знаю, как еще объяснить.