模式中的上一个和下一个数据切换仅适用于已分页的照片

蒂米·冯·海斯(Timmy Von Heiss)

编辑

那么,当我尝试单击上一个但尚未分页时会发生什么?Heroku中没有错误或消息。它返回什么吗?我以前的方法意味着,如果有以前的链接,肯定会有更多照片。

模态中的上一个和下一个按钮可以正常工作,直到我看到已分页的照片的末尾为止。因此,例如,每页有9张照片。如果我在照片的第一页上,而我在最后一张照片上单击上一个,则它将不会打开第十张照片。链接是正确的,但是模态无法打开照片,因为控制器尚未将其分页。

show.html.erb

<% @photos.in_groups_of(3, false).each do |group| %>
    <div class="row instagram">
      <% group.each do |photo| %>
        <a data-toggle="modal" href=<%="#"+"#{photo.id}"%>>
          ...
        <div class="modal" id=<%="#{photo.id}"%> tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
        ... 
        <a class="modaldirection" data-dismiss="modal" data-toggle="modal" href=<%="#"+"#{photo.previous_modal.id}"%>>

类Photo <ActiveRecord :: Base

def previous_modal
  if self.class.where("id < ?", id).last == nil
    return self
  else
    return self.class.where("id < ?", id).last
  end  
end 

类UsersController

def show
  @user = User.find(params[:id])
  @photos = @user.photos.approved.order('created_at desc').paginate(page: params[:page], per_page: 9)
    respond_to do |format|
      format.html
      format.js
    end
end
mb21

不确定我是否完全理解这个问题。但是通常,在制作图库时,您会在服务器上输出所有照片的列表...

<div class="galleria">
<% @photos.each do |photo| %>
  <%= image_tag photo %>
<% end %>
</div>

...然后使用JavaScript使其成为一个交互式画廊。例如使用Galleria

<script>
  Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
  Galleria.run('.galleria');
</script>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用上一个和下一个按钮切换 src 和 onclick?

上一个和下一个按钮不适用于Angular Bootstrap日历

下一个和上一个按钮不适用于多个日历

WordPress链接分页仅显示下一个和上一个按钮

图像切换仅适用于实时网站上的一个 ID

切换到DBExt中的下一个/上一个连接

13.10中的应用程序切换器的下一个,上一个,上一个,下一个快捷方式

分页下一个上一个

如何在 RecyclerView 中显示下一个和上一个数据设置水平滚动

使用React Hooks单击上一个/下一个按钮时在div之间切换

JQuery 数据表分页:显示当前页面的 2 个上一个和下一个数字

切换到下一个/上一个应用程序的命令

分页表tr添加上一个和下一个jquery

JPA分页与数字和下一个,上一个

如何使我的“上一个”和“下一个”按钮在分页上工作?

使用jQuery在循环中分页上一个和下一个

分页:使用PHP的上一个和下一个

jQuery分页的下一个和上一个按钮不起作用

AngularMaterial mat-slide-toggle切换开关仅适用于第一个组件

CSS:复选框切换效果仅适用于第一个复选框

如何为该滑块添加下一个和上一个按钮,而不是data-link =“ n”(删除分页并仅添加下一个和上一个按钮)

脚本IF ELSE仅适用于php中的第一个数据

如何使用“下一个”和“上一个”按钮代替list.js分页中的数字?

如何创建遍历数组中URL的jquery上一个和下一个按钮(分页)

如何从 twbs 分页插件中删除“第一个”、“上一个”、“下一个”和“最后一个”按钮

下一个列表切换时如何关闭切换

上一个/下一个链接不适用于模型中的第一条记录和最后一条记录(导轨)

如何找到列之间的差异,但仅适用于熊猫中的下一个非零值?

如何设置下一个和上一个表单将影响哪个数据源?