带有html控件和内容而不是弹出窗口的Swipebox幻灯片 [英] Swipebox slide with html control and content instead of popup

问题描述

我正在使用swipebox，它既简单又有用.我想显示带有下一个上一个图标的第一个图像.当用户单击(或在移动设备中触摸滑动)时，下一个图像幻灯片将显示下一个图像. >

如您在我的设计中所见，有幻灯片，还有许多其他html control-content-div-buton ......

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

这是我的查看代码

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

解决方案

我刚刚尝试使用venobox使用内联显示图像的内容；对我来说很完美. http://lab.veno.it/venobox/

I am using swipebox it is easy and useful.I want show first image with next-previous icon.When user click(or touch-swipe in mobile) next image slide will show next image.My needed design is here

as you can see in my design there is slide and also there is many other html control-content-div-buton......

but swipebox show pop up and it just show slide as below. This is not good for me because there is information-content-links and other html control in my page(design).Slide is just a part of my mobile web site page.So i need change slide full screen and pop

here is my view code

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

解决方案

I just tried venobox to display content with the image using inline; works perfect for me. http://lab.veno.it/venobox/

这篇关于带有html控件和内容而不是弹出窗口的Swipebox幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！