PhotoSwipe，Rails，咖啡根本不起作用

编程问答 2022-06-07

问题描述

当我尝试将其添加到Rails项目中时，无法理解photoswipe为什么不显示任何内容

  1. 使用了以下宝石：https://github.com/skakri/photoswipe-rails
  2. 分步复制的手册：https://photoswipe.com/documentation/getting-started.html#init-add-pswp-to-dom
  3. 编写“点击”处理程序 却什么也没显示

我写的代码：

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

shared / _photoswipe.html.erb包含2中的div class =“ pswp”的完整副本） 在页面末尾成功添加了不可见的div

为点击处理程序中的photoswipe初始化添加了一些咖啡代码

$ ->
  $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()

当我单击#MainPhoto容器事件时，$ items数组正确地填充了图像的URL和大小，并调用了photoswipe init（）函数，但屏幕上没有任何显示

解决方法

gem书写不正确 应该添加

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

进入application.scss

coffeescriptphotoswiperuby-on-rails