带有html控件和内容的Swipebox幻灯片而不是弹出窗口

时间:2015-03-25 20:54:00

标签: jquery swipe slide mobile-website photoswipe

我正在使用swipebox它很简单实用。我想要显示第一个图像和下一个上一个图标。当用户点击(或在移动设备上轻触一下)时,下一个图像幻灯片将显示下一个图像。我需要的设计在这里

enter image description here 你可以在我的设计中看到有幻灯片,还有很多其他的HTML控件 - 内容 - div-buton ......

但是swipebox show弹出,它只显示如下幻灯片。 这对我不好,因为我的页面(设计)中有信息内容链接和其他html控件.Slide只是我移动网站页面的一部分。所以我需要更改幻灯片全屏和弹出

enter image description here

这是我的观看代码

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

});

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

1 个答案:

答案 0 :(得分:0)

我刚试过venobox用内联显示图像的内容;适合我。 http://lab.veno.it/venobox/