带有下一个上一个图标的 Swipebox 幻灯片
Swipebox slide with next previous icon
我正在使用 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 我需要更改幻灯片全屏
初始化后就可以启动了..
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,它既简单又实用。 在 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 我需要更改幻灯片全屏
初始化后就可以启动了..
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>