Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2

How to move titles under lightbox images?


Coral

Question

  • Answers 10
  • Created
  • Last Reply

10 answers to this question

Recommended Posts

This is a bit of a hack, but I think I may have got it working. I think it needs more testing to make sure text is viewable and not overlapping on all screen sizes. You can view it (and test it for me if you want, please) by clicking on the thumbnails here: http://gitanarosa.com/artist/#/whitney-oldenburg/.

You will probably need to adjust code based on the size of you images. Most of these are sized at 519x740.

This is the code I used, add it to the CSS Editor:


/* creates grey overlay without hover, makes text white, and pushes text below image */
.sqs-lightbox-meta {
 background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
 bottom: -80px !important;
 color: #000;
 max-width: 100% !important;
 opacity: 1 !important;
 padding: 10px !important;
}

.sqs-gallery-block-slideshow .meta-inside {
 padding: 5px 0;
 clear: both;
}

.sqs-gallery-block-slideshow .meta .meta-description p {
 padding-top: 0;
 margin-top: -3px;
 font-size: 11px;
 color: #000;
}

/* reduces size of images relative to browser window */
.yui3-lightbox2 .sqs-lightbox-slideshow .sqs-lightbox-padder {
 top: 10%;
 left: 15%;
 bottom: 15%;
 right: 15%;
}

/* reduces space between image and text based on different smaller screen sizes */

@media (max-width: 800px) {
 .sqs-lightbox-meta {
   bottom: -40px !important;
 }
}

@media (min-width: 603) and (max-width: 799px) {
 .sqs-lightbox-meta {
   bottom: -30px !important;
 }
}

@media (max-width: 602px) {
 .sqs-lightbox-meta {
   bottom: -10px !important;
 }
}

Link to comment

Coral, nice website! Looks like you've refined this even more there since posting the above. You got hyperlinks to work in the captions, and your fonts look good at that small size. Is the latter just via Heading styles, or CSS code?

Do you know if there's any way to get the text to appear directly beneath each image, regardless of their size/dimensions?

Link to comment

Since you asked for testing:

On Mac (running Snow Leopard), it works in both Safari & Firefox browsers.

On iPhone 5 (running current iOS, 7.1.1), it works great: your gallery text in lightbox always appears at the bottom of the screen, with the image more or less filling the screen above it. Works whether holding the phone in portrait or landscape. Links work too.

Strangely, it doesn't work on an iPad 3 or 4 (current iOS, 7.1.1). When holding iPad in portrait mode, titles get partly cut off (and descriptions below don't appear). When holding it in landscape mode, no text appears at all.

Link to comment

I used your code to add titles to my light box galleries. Works great so far! I had to do some tweaking of the numbers to get titles to work responsively on my devices, which I think I'm just about figured out.

What I can't find a solution for is having titles show up on videos in lightbox galleries. Videos have a different interface to set up are they not .meta descriptions?

Link to comment

Hi, I think I figured out a better way to move the titles/captions below the images. I heavily used the code written by @Coral above but I just wasn't happy using all the media queries.

I'm still testing this, but so far so good. Let me know if there are bugs or improvements. :) Oh, I'm using the Native template.


.sqs-lightbox-meta {
  background: none repeat scroll 0    0 rgba(0, 0, 0, 0.0) !important;
  max-width: 100% !important;
  color: #FFF;
  opacity: 1 !important;
  padding-left: 0px !important;
  margin-bottom: -60px !important;
}

/* adjusts lightbox text color */
.sqs-lightbox-meta p, .sqs-lightbox-meta h1 {
color: black !important;
}

/* reduces size of images relative to browser window */
.yui3-lightbox2 .sqs-lightbox-slideshow .sqs-lightbox-padder {
  top: 5%;
  bottom: 8%;
}


Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...