클립 클립 이미지 URL을 잡고 배경 이미지로 scss로 전달

Question

나는 이미지의 목록을 표시하는 색인 페이지을 가지고 있습니다. 이미지의 하나를 클릭에

, 나는 이미지 URL를 잡아 내 는 #header div에에 배경 이미지 나의 CSS/SCS들에 전달하고자합니다. 다음은

내가 지금까지 무엇을했는지 있습니다 :

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; 
} 

는 귀하의 지원은 깊이와 귀중하게 이해할 수있을 것이다.

Answer 1

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; 
} 

Answer 2

나는 Dharam의 대답 @ 사용하여 나를 위해 작동 무엇을 게시 할 수 있습니다. 말했다

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

index.html.haml

이하 물론 페치

$('.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 

에서, 지금 아래와 같은 일을 수행 할 수 있습니다

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

그리고 그게 내가 작동합니다. 이케의 매력.