PhotoSwipe、Rails、Coffee 根本不起作用

Question

Can't understand why PhotoSwipe doesn't show anything when I'm trying to add it into Rails project无法理解为什么 PhotoSwipe 在我尝试将其添加到 Rails 项目时不显示任何内容

Used this gem: https://github.com/skakri/photoswipe-rails使用这个宝石： https : //github.com/skakri/photoswipe-rails
Step by step reproduced manual: https://photoswipe.com/documentation/getting-started.html#init-add-pswp-to-dom分步转载手册： https : //photoswipe.com/documentation/getting-started.html#init-add-pswp-to-dom
Wrote 'click' handler But it shows nothing写了“点击”处理程序但它什么也没显示

Code I wrote:我写的代码：

<body>
  <!-- some Rails and other stuff -->
  <%= render 'shared/photoswipe' %> 
</body>

shared/_photoswipe.html.erb contains full copy of div class="pswp" from 2) Invisible div successfully added at the end of page shared/_photoswipe.html.erb 包含 div class="pswp" 的完整副本 2) Invisible div 在页面末尾成功添加

Added some coffee code for PhotoSwipe init on click handler在点击处理程序上为 PhotoSwipe init 添加了一些咖啡代码

$ ->
  $PhotoContainer = $('#MainPhoto')
  $PhotoContainer.click ->
    $pswpElement = document.querySelectorAll('.pswp')[0]
    $items = []
    $('.photo-item').each ->
      $Img = $(@)
      $items.push( { src: getUrlFromImg($Img).bigImgUrl, w: 1000, h: 1000 } )

    $options = {
      history: false,
      focus: false,
      index: 0
    }
    $gallery = new PhotoSwipe( $pswpElement, PhotoSwipeUI_Default, $items, $options)
    $gallery.init()

When I click on #MainPhoto container event fired, $items array correctly fills by image urls and sizes and calls PhotoSwipe init() function, but nothing shows on screen当我点击#MainPhoto 容器事件触发时，$items 数组正确填充图像网址和大小并调用 PhotoSwipe init() 函数，但屏幕上没有显示任何内容

Answer 1

gem is improperly written should add gem 写错了应该添加

@import "photoswipe/index";
@import "photoswipe/photoswipe";
@import "photoswipe/default-skin/default-skin";

into application.scss进入application.scss

PhotoSwipe、Rails、Coffee 根本不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-10-20 13:19:31

PhotoSwipe、Rails、Coffee 根本不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-10-20 13:19:31

解决方案1
0 已采纳 2020-10-20 13:19:31