Изменение div background-image на конкретное изображение с помощью jquery

Question

Изменение div background-image на конкретное изображение с помощью jquery

0

Я почти не знаю jquery вообще. Зная HTML, PHP и CSS, я могу немного это понять и изменить уже существующие скрипты, но теперь я надел кирпичную стену.

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

Я попытался изменить фоновое изображение "фона", нажав "changer". Изображение, которое должно было быть новым фоном, - это DSC_2363, который я ввел в функцию.

РЕДАКТИРОВАТЬ: страницу можно просмотреть на странице http://lautamaki.net/omasivu2/

Мой CSS выглядит так:

      .background{
        background-image: url(images/DSC_1418.JPG);
        background-size: cover;
        background-color: black;
        width: 100%; height: 100%;
        position: fixed; top: 0; left: 0;
      }

Jquery:

    $('.changer').click(function(image){
      $('.background').css("background-image", "url(images/".image.".JPG)");
    });

И, наконец, HTML:

<div class="background">
</div>
<div class="content">
  <img class="changer" src="images/DSC_2363.JPG" width="30" onClick="function(DSC_2363)">
</div>

Я знаю, что уже есть такие вопросы, но никто из них мне не помог. Надеюсь, кто-то получит то, что я пытаюсь и могу мне помочь, спасибо!

EDIT: Изменено

 $('.background').css("background-image", "url(images/".image.".JPG)");

в

 $('.background').css("background-image", "url(images/"+image+".JPG)");

но все еще не работает.

user3414353 13 март 2014, в 10:26

Источник

0

проверить обновленный ответ
Tushar Gupta - curioustushar 13 март 2014, в 09:19

Теги:

jquery

html

background-image

3 ответа

Ещё вопросы

Felix · Answer 1 · 2014-03-13T07-09-00.000Z

Вам нужно использовать + вместо . объединить строку в Javascript

$('.changer').click(function(image){
    $('.background').css("background-image", "url(images/" + image + ".JPG)");
});

Mr.G · Answer 2 · 2014-03-13T07-53-00.000Z

попробуй это:

 $('.changer').on('click',function(image){
      $('.background').css("background-image", "url(images/"+image+".JPG)");
    });

Tushar Gupta · Answer 3 · 2014-03-13T07-16-00.000Z

В JavaScript мы используем + для конкатенации не .

$('.changer').click(function (image) {
    $('.background').css("background-image", "url(images/" + image + ".JPG)");
    //                                                     ^       ^
});

Обновленный код после OP Обновленный вопрос

Измените свой html add data-image = "DSC_2363" вместо функции onclick

<div class="content">
  <img class="changer" data-image = "DSC_2363" src="images/DSC_2363.JPG" width="30" >
</div>

JS

$('.changer').click(function () {
    var image = $(this).data('image'); //get data-image attribute
    $('.background').css("background-image", "url(images/" + image + ".JPG)");
});