Place Lightbox close button on top right area

css lightbox2
SunT picture SunT · May 16, 2014 · Viewed 9k times · Source

How can I do this? Mine appears in the bottom right side. I am using Lightbox v2.7.1.

Answer

APAD1 picture APAD1 · May 16, 2014

You need to move the data container above the outer container. Replace the code beginning on line 59 of the lightbox.js file with this:

Lightbox.prototype.build = function() {
  var self = this;
  $("<div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div><div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div>").appendTo($('body'));

Related questions

Javascript and CSS Lightbox that can view PDFs

Has anyone ever found any lightbox type javascript / css code that can display PDFs? I have tried many libraries and none have worked for me. The environment needs to be IE6/IE7 compatible. I am looking for something similar to …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More