Search code examples
jqueryswipeslidemobile-websitephotoswipe

Swipebox slide with next previous icon

I am using swipebox it is easy and useful. In demo there is all slide images and when click any image it show slide.

I want to destroy click and i want to show slide in first time-default.

I will show first image with next-previous icon.When user click-swipe next image slide will show next image.My needed design is here enter image description here

I modified photoswipe.js

i change 

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

with 

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

but it does not work any workaround solution?

I don't want fullscreen,transparent background for slide. I just want to show one image with next and previous icon.When user click next and previous it show next-previous image.

here is my view code 

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

edited: with darren sweeney answears i

i added this code to view 

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

    });
</script>

not it works.Without click any images it show slide.

But i need page like this:https://i.sstatic.net/xBWMO.png not like this enter image description here

because there is information-content-links and other html control in my page.Slide is just a part of my mobile web site page.So i need change slide full screen

Solution

  • After you have initialized it you can start it.. 

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

    UPDATE IGNORE above, the simplest option is this:

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