当在Jquery中单击图像时，为什么图像显示在下面？

Question

can you please tell me why my image display below when I click the thumb nail image.I am using lightbox plugin I study doc from here https://github.com/lokesh/lightbox2/ In example it show image above the image..which css file I am missing ? fiddle http://jsfiddle.net/xnhtg1t1/

<a class="example-image-link lightbox" href="https://dl.dropboxusercontent.com/s/51wtwmqnnokotj6/image-1.jpg?dl=0" data-lightbox="example-1"><img class="example-image" src="https://dl.dropboxusercontent.com/s/w85pcbopymjzn76/thumb-1.jpg?dl=0" alt="image-1" /></a>

Answer 1

Remove the GET variable ?dl=0 from your JS and CSS urls and it works. jsFiddle Demo

That is Dropbox's download parameter , while although it is set to false.. it is still causing the issue.

Answer 2

Make position of the Lightbox absolute instead of relative.

.lightbox {
   position: absolute;
}

Or even FIXED. And then it will appear on top of the page. Then you can construct the lightbox styles however you like.

http://jsfiddle.net/xnhtg1t1/2/