CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Alex
Alex

Reputation: 35861

Bootstrap image gallery always opens at top of page

I'm using the Bootstrap image gallery by Blueimp. I've placed its container at the bottom of my Index.cshtml page:

<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

Here's an example anchor tag that links to the gallery:

<a href="~/images/press/french/BABYBOOK-Couv-P-Ete-2014.png" 
  target="_blank" data-gallery="#blueimp-gallery">
  <img src="~/images/press/french/thumbs/BABYBOOK-Couv-P-Ete-2014.jpg" 
    class="img-responsive magazine" />
</a>

When you click to open the gallery, it opens at the top of the page. I think these CSS rules control its position:

.blueimp-gallery {
  position: fixed;
  z-index: 999999;
  overflow: hidden;
  background: #000;
  background: rgba(0,0,0,.9);
  opacity: 0;
  display: none;
  direction: ltr;
  -ms-touch-action: none;
  touch-action: none;
}

.blueimp-gallery, .blueimp-gallery>.slides>.slide>.slide-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -moz-backface-visibility: hidden;
}

The position:fixed and top:0, right:0, bottom:0, left:0 have something to do with the gallery always opening at the top of the page.

Is there a way to have the gallery open right where the user is on the page, so when they close the gallery, it returns them to their original location? Or is there a way to know where the user was on the page and return him/her to that spot after the gallery is closed?

Upvotes: 2

Views: 1325

Answers (3)

dtrejogo
dtrejogo

Reputation: 251

All these solutions are like workarounds, I had the same issue with blueimp-gallery and finally I realized that it was happening because the library hides the page scroll bar by default, and when you open it goes straight to the top.

So in the options set hidePageScrollbars:false

when you initilialize the library:

blueimp.Gallery(links,{hidePageScrollbars:false});

Upvotes: 2

Alex
Alex

Reputation: 35861

I tried a different Bootstrap gallery and experienced the same issue: http://ashleydw.github.io/lightbox/. It must be something to do with other logic on the page. Switched back to the Blueimp Gallery, and used this kludge that will make the user believe they stayed at the same location on the page.

Add a DIV to the page:

<div id="overlay"></div>

Style it so it will obscure the entire page when it's displayed:

#overlay {
    background-color:#000; 
    width:100%; 
    height:100%; 
    position:fixed; 
    top:0; 
    bottom:0; 
    right:0; 
    left:0; 
    z-index: 999999; 
    display:none;
}

Use the Blueimp API via jQuery to show/hide this div. Also, onopen of the gallery (fired before the gallery sends the user to the top of the page), detect the user's location (scrollTop). Then use the onclose, fired before the gallery closes, to scroll to that location on the page. I had to use the animate() function; the regular scrollTop didn't work for some reason.

This all goes into the $(window).load() function:

var scrollPosition; 
$('#blueimp-gallery')
    .on('open', function (event) {
        // Gallery open event handler
        $('#overlay').show();
        scrollPosition = $(window).scrollTop();
    })
    .on('opened', function (event) {
        // Gallery opened event handler
    })
    .on('slide', function (event, index, slide) {
        // Gallery slide event handler
    })
    .on('slideend', function (event, index, slide) {
        // Gallery slideend event handler
    })
    .on('slidecomplete', function (event, index, slide) {
        // Gallery slidecomplete event handler
    })
    .on('close', function (event) {
        // Gallery close event handler

        $('html, body').animate({
            scrollTop: scrollPosition
        }, 600, function () {
            $('#overlay').hide();
        });
        //$('html').scrollTop(scrollPosition);
    })
    .on('closed', function (event) {
        // Gallery closed event handler
    });

Hope this helps others.

Upvotes: 1

Kinburn101
Kinburn101

Reputation: 1162

It is hard to replicate your specific problem but you could try something of this nature:

.blueimp-gallery{
position:fixed;
top:50%; 
left:50%;
width:80%;  /* adjust as per your needs */
height:80%;   /* adjust as per your needs */
margin-left:-40%;   /* negative half of width above */
margin-top:-40%;   /* negative half of height above */
}

Let me know if this works.

Upvotes: 1

Related Questions