search

blueimp / Gallery

blueimp Gallery is a touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading.
https://blueimp.github.io/Gallery/
Other
3.75k stars 984 forks source link

Clicking on image only opens a black transparent screen #158

Closed KamenRider closed 10 years ago

KamenRider commented 10 years ago

Hi guys,

I was trying to integrate this plugin for the usage of gallery but I have some issues.

I included the file "jquery.blueimp-gallery.min.js" as well as adding the lightbox dialog as stated in the documentation. The gallery do opens up when I clicked on the image but only a black transparent background was opened up. I did not see the images.

I noticed that a new div element was created and wrapped the lightbox dialog (div with the id "blueimp-gallery") when I click on any image. This caused the image not to be seen. I discovered when playing around the inspect element feature on chrome.

The original lightbox dialog looks like this.

<div id="blueimp-gallery" class="blueimp-gallery">
  <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>

After clicking on any image to open the lightbox is looks like this.

<div style="margin: 0px; position: fixed; overflow: hidden; height: 0px;">
  <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-display blueimp-gallery-left" style="display: block; margin: -616px 0px 0px;">
    .. and so on

Noticed the additional div generated infront. It is causing the issue. I am no sure why it is generated because it behaves differently as compared to the demo page

May I ask for your help on the solution to my problem? I can provide more information if needed.

Thanks!

blueimp commented 10 years ago

Sorry but I don't have the time to give individual support at the moment. Ideally, if you follow the setup guide closely, you should be able to make it work: https://github.com/blueimp/Gallery#jquery-plugin-setup

KamenRider commented 10 years ago

Hi Sebastian,

Thanks for the reply!

I did my own debugging and noticed that Squeezebox is responsible for the bugs. May I know if there is any known issue for blueimp gallery and Squeezebox prior to this? Because as long as I remove Squeezebox then blueimp gallery will work perfectly fine.

Thanks!

blueimp commented 10 years ago

I've never heard of Squeezebox before now, but since it's also working as a lightbox plugin, there might be issues when including both.