У меня есть индексная страница, которая отображает список изображений.Захватите изображение скрепки изображения и передайте его scss в качестве фонового изображения

По щелчку на любом из изображений, я хочу, чтобы захватить IMAGE_URL и передать его в моей CSS/ в СКС фона изображения в моем #header DIV.

Ниже то, что я сделал до сих пор:

index.html.haml

%header 
%div#has-zoom 

%section 
    - @images.each do |image| 
    = image_tag image.image.url(:thumb), class: 'touched'

image.coffee

$('.touched').click -> 
    $('#head-zoom').addClass 'enlarge'

image.css.scss

.enlarge { 
      background-image: image-url(<%= image_tag image.image.url(:thumb) %>); 
      height: 100vh; 
      background-size: cover; 
      background-position: center; 
}

Ваша помощь будет глубоко и дорого ценится.

источник

2016-09-06 Dayo Greats

Вы не можете сделать это в image.css.scss, так как .scss получает предварительно скомпилированный файл .css на стороне сервера перед его отправкой в браузер. И интерактивность, которую вы пытаетесь, находится на стороне клиента.

Вы можете сделать следующее:

$('.touched').click -> 
    var image_src = $(this).attr('src') 
    $('#head-zoom').addClass('enlarge') 
    $('#head-zoom').css('background-image', 'url('+image_src+')')

И обновить .enlarge к следующему:

.enlarge { 
    height: 100vh; 
    background-size: cover; 
    background-position: center; 
}

источник

2016-09-06 23:26:48 Dharam

Как может кто-то тогда что-то делать? ** CSS ('Фоновое изображение', гиперссылка ('<% = image_tag.image.url (: среда)') **; я сделал это, я получил ** ошибка не определен метод **. Обратите внимание, что изменение фонового изображения зависит от кликаемого события, т. Е. Изменения фона события onClicked.спасибо @Dharam –

'instance_variables', которые вы установили в' controller', доступны в ваших 'views', но не в' .scss'-файлах. Вы можете использовать простой ruby в файлах '.scss', которые преобразуются при компиляции в файлы' .css'. Но вы не можете использовать переменные экземпляра, установленные в 'controller' в файлах' .scss'. – Dharam

Я только что дал ваш ответ на голосование. Как лучше я могу затем захватить изображение, щелкнув и передать его в css. Заранее спасибо. @Dharam –

Я должен отправить то, что работает для меня с помощью @ ответа дхаров в.

$('.touched').click -> #-> Gets element with the class="touched" 
var image_src = $(this).attr('src') 
#-> (this).attr('src') is a jquery method that grabs/returns a value. 
#-> In my case, returns the clicked img src's value = http://localhost:3000/system/images/images/000/000/018/thumb/%2846%29.jpg?1472555101

Который, конечно, выбирается из ниже

index.html.haml

= image_tag image.image.url(:thumb), class: 'touched'

Тем не менее, я теперь может сделать что-то, как показано ниже:

$('#head-zoom').addClass('enlarge') 
    $('#head-zoom').css('background-image', 'url('+image_src+')')

И это работает l ike очарование.

источник

2016-09-09 00:19:48

Захватите изображение скрепки изображения и передайте его scss в качестве фонового изображения

index.html.haml

image.coffee

image.css.scss

ответ

index.html.haml

Смежные вопросы