带有下一个上一个图标的 Swipebox 幻灯片

Question

我正在使用 swipebox，它既简单又实用。在 demo 中有所有幻灯片图像，当单击任何图像时它显示幻灯片。

我想破坏点击，我想在第一次默认显示幻灯片。

我将显示第一张图片和下一张 - 上一张 icon.When 用户点击滑动下一张图片幻灯片将显示下一张 image.My 需要的设计在这里

我修改了photoswipe.js

我改

$(document).on('click', selector, function (event) {

和

$(document).on('Load', selector, function (event) {

但是没用任何变通解决方案？

我不想要幻灯片的全屏透明背景。我只想显示下一张和上一张图片 icon.When 用户点击下一张和上一张显示下一张图片。

这是我的查看代码

<script type="text/javascript">
    $(document).ready(function () {
        $('.swipebox').swipebox();
    });
</script>

<div class="content">
    <div class="display-img" style="overflow: hidden; text-align: center;">

                foreach (var item in Model.Images.Take(8))
        {

                <a rel="gallery-1" href="@item.Url" class="swipebox" >
                <img src="@item.ThumbnailUrl" alt="image" style="width:22%;height:35%;">
            </a> 



        }
        <div class="specifications">
            @if (ViewBag.Culture == "tr")
            {
                <img src="~/Content/images/display_foot_bg.png" width="280" />

            }
            else
            {
                <img src="~/Content/images/display_foot_bg2.png" width="280" />
            }
        </div>

编辑：用 darren sweeney 回答我

我添加了此代码以查看

<script type="text/javascript">
    $(document).ready(function () {
        $('.swipebox').swipebox();
        $('.swipebox:first').click();
         // simply faking a click on the selector which starts the slide

    });
</script>

不是 works.Without 单击它显示幻灯片的任何图像。

但我需要这样的页面:http://i.stack.imgur.com/xBWMO.png 不像这样

因为我的 page.Slide 中有信息内容链接和其他 html 控件只是我的移动网站的一部分 page.So 我需要更改幻灯片全屏

Answer 1

初始化后就可以启动了..

Code.photoSwipe('a', '#Gallery');
Code.PhotoSwipe.Current.show(0);

UPDATE忽略上面的内容，最简单的选择是：

<script type="text/javascript">
  $(document).ready(function () {
    $('.swipebox').swipebox();
    $(selector).click(); // simply faking a click on the selector which starts the slide
  });
</script>

带有下一个上一个图标的 Swipebox 幻灯片

Swipebox slide with next previous icon

jquery

swipe

slide

mobile-website

photoswipe