Lightbox questions

Charly · January 2, 2014

Well made the leap yesterday at Denise's advice and took my new sm site live: Imagery by Charly Trying to rectify a some issues with Lightbox/Galleries. To preface in my All Galleries CSS box I have inserted the code to hide all Titles and have changed the layout of my Galleries in Entire site CSS box. Both codes are from Aaron's site For the most part they work like a dream! Thanks Aaron!

The issues:

1. Lightbox (single image click to enlarge): The captions are waaaaaay at the bottom of screen and what's up with those left frame arrows.

a. Is there any way to get captions to center below the image at a pixel amount I designate?
b. Any way to remove those darn arrows? [SOLVED]
c. Since I have up small, low res. images, can I remove the lower right side image size icon for viewers to click on somehow? [SOLVED - create code for all galleries to display:none]
d. Some Titles or Headlines (can't rid them in Lr 4.4 no matter what I try) still show. First image in the Architecture ~ B&W, for example, when taken to lightbox says DC Trip 2010 when it should be caption "Grand Entryway" Yet if I hover over the stupid arrows, DC Trip 2010 moves up covering "Grand Entryway". Grrrr... [SOLVED]

2. Galleries: I'm on a 27" iMac and perhaps on smaller displays some of these aren't issues.

a. Selected image is right up against left browser frame. If I put in a left margin amount with this effect smaller displays? [SOLVED]
b. Captions are not centered under selected image, most not even close. Any way to correct this? [SOLVED - perhaps not the correct way, but added a margin left w/percentage]
c. Caption is way below image. How can I rectify this? [SOLVED]
d. To stop the right side thumbs from being tight against the Slideshow button, I added top margin to them. Now every gallery seems to have different look where the thumbs are concerned. Is there a better way to fix this? Perhaps moving up the Slideshow button is an option? [SOLVED - Figured out code to reposition the Slideshow button]

3. Slideshow: There's no captions at all. How can I add them; centered just below image? I've looked over my CSS code and cannot find that they were removed.

My apologies for being pretty much code stupid and having to ask all these questions. I played around most of yesterday to try and fix them myself to no avail, so a wasted day with nothing accomplished and now I'm here. Thanks in advance for your time and assistance!

denisegoldberg · January 2, 2014

For captions in lightbox, you might try Lamah's customization at http://www.sherlockphotography.org/Customisations/Lightbox-captions. You might also look at leftquark's lightbox customizations at http://www.aaronmphotography.com/Customizations/Lightbox.

There may be a customization to remove the arrows in lightbox but I can't seem to locate it. But - I don't understand why you would remove the arrows. I often open lightbox and use the arrows to browse through photos in the gallery.

Are you really not looking at your site on devices other than a 27" iMac? Even on that device resizing the browser window should give you an idea what others see. I regularly look at (and work on) my site on a 23" monitor, but I also look at it on a 15" laptop, a tablet, and a phone. If you don't have multiple devices I'd recommend checking it using this tool - http://quirktools.com/screenfly/. Enter a URL for your site, then select different display sizes / devices.

I'm not aware of a way to add captions to the slideshow.

--- Denise

beardedgit · January 2, 2014

Regarding those Lightbox arrows... I didn't like the huge ones provided as standard so I made them smaller and IMHO they looked much better... so much better that acting on a visitor's sugestion I'm experimenting with triples, feedback from visitors is positive. Example at http://beardedgit.smugmug.com/Panoramas/i-jJQSbvT/A

Charly · January 3, 2014

denisegoldberg wrote: »

For captions in lightbox, you might try Lamah's customization at http://www.sherlockphotography.org/Customisations/Lightbox-captions. You might also look at leftquark's lightbox customizations at http://www.aaronmphotography.com/Customizations/Lightbox.

There may be a customization to remove the arrows in lightbox but I can't seem to locate it. But - I don't understand why you would remove the arrows. I often open lightbox and use the arrows to browse through photos in the gallery.

Are you really not looking at your site on devices other than a 27" iMac? Even on that device resizing the browser window should give you an idea what others see. I regularly look at (and work on) my site on a 23" monitor, but I also look at it on a 15" laptop, a tablet, and a phone. If you don't have multiple devices I'd recommend checking it using this tool - http://quirktools.com/screenfly/. Enter a URL for your site, then select different display sizes / devices.

I'm not aware of a way to add captions to the slideshow.

--- Denise

Thanks for the reply Denise! I am using Aaron's (leftquark) caption centering. I wonder if I'm having issues due to using his left side layout?

The arrows seem useless to me, especially seeing them way at the bottom left of my 27" monitor. When I hover on the little up/down arrow it just moves up the caption, which in my case is just a title I put in and usually one line. And yes I do manipulate my browser to see how my site looks at different sizes.

beardedgit wrote: »

Regarding those Lightbox arrows... I didn't like the huge ones provided as standard so I made them smaller and IMHO they looked much better... so much better that acting on a visitor's sugestion I'm experimenting with triples, feedback from visitors is positive. Example at http://beardedgit.smugmug.com/Panoramas/i-jJQSbvT/A

Also thanks for your reply! Yanno it wasn't until I went to your link that I saw what the arrows were for.

Here's the problem, my site is completely black with a darker white/lighter gray. I can't even distinguish what they're for, so how would anyone else? Thus would like to remove all that on the very bottom; all icons, the bar, box and place the caption below the image centered with my designated margins.

:

Charly · January 3, 2014

Just one thing left to tackle
Well I figured out all but one code that is going to be a tough one for this illiterate code person. I deciphered that the arrows in Lightbox was a widget footer. And as I previously said, with the color of my site and since I don't put in lengthy captions, it's useless and confusing for my customers. I placed a display: none code in to remove it. Now what I need help with:

1. A way to place a container (think that's what I need) under the Lightbox image to place my caption in. Fairly certain I can figure out the margins/padding/etc. Just would appreciate help to start off with. Thanks!

Once done with this, I can concentrate on keywording and adding more images.

:

denisegoldberg · January 4, 2014

Charly wrote: »

1. A way to place a container (think that's what I need) under the Lightbox image to place my caption in. Fairly certain I can figure out the margins/padding/etc. Just would appreciate help to start off with.

Did you try Lamah's customization to always show captions in lightbox? I linked to this customization above, but here's the link again - http://www.sherlockphotography.org/Customisations/Lightbox-captions.

--- Denise

Charly · January 4, 2014

denisegoldberg wrote: »

Did you try Lamah's customization to always show captions in lightbox? I linked to this customization above, but here's the link again - http://www.sherlockphotography.org/Customisations/Lightbox-captions.

--- Denise

Indeed I did Denise, but had left that part out. My apologies! When I put in all the code from Sherlock, it changed way more than I wanted. i.e. made my images pretty much full screen when I have only 800px on long side up. For a long time I tried to manipulate the code to bring my image in LB normal size/centered again and lessen the bottom space, though no joy. Finally gave up and just removed the widget footer again. lol

Gosh that is a lot of code! And I'm not savvy enough with code to attempt any more manipulation with his code.

That's why I asked for help.... Was hoping for a line or two to add the caption to bottom of image. It shouldn't be that difficult. hehehe I mean when the cursor hovers on the image an ugly yellow box comes up with the caption in it. Speaking of which, any way to change that grotesque color?

James Lyall · January 6, 2014

beardedgit wrote: »

Regarding those Lightbox arrows... I didn't like the huge ones provided as standard so I made them smaller

I do like your smaller arrows. Could you post the code which you used? I would like single arrows, but smaller like your ones.

beardedgit · January 6, 2014

James Lyall wrote: »

I do like your smaller arrows. Could you post the code which you used? I would like single arrows, but smaller like your ones.

Give me an hour or so and I'll see what I can do.

beardedgit · January 6, 2014

James Lyall wrote: »

I do like your smaller arrows. Could you post the code which you used? I would like single arrows, but smaller like your ones.

Here you go, it's messy code, maybe someone else could have a stab at making it a tad tidier:

/* Lightbox: shrink, side-shift & tweak the GBFO nav arrows, play with controls' background transparency */
.sm-lightbox .sm-lightbox-nav .sm-button {
  width: 42px;
  margin: 0px;
  padding: 0px
}
.sm-user-ui .sm-lightbox .sm-lightbox-nav {
  width: 22px;
  background-color: transparent!important
}
.sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools .sm-button {
  background-color: transparent!important
}
.sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon {
  color: #FFFFFF!important
}
.sm-lightbox .sm-lightbox-nav .sm-fonticon {
  margin-top: -1px;
  font-size: 22px;
  font-weight:bold
}
.sm-lightbox .sm-lightbox-nav.sm-lightbox-nav-right .sm-fonticon {
  margin-left: -2px
}
.sm-lightbox .sm-lightbox-nav.sm-lightbox-nav-left .sm-fonticon {
  margin-left: -5px
}

Good luck with it

James Lyall · January 6, 2014

beardedgit wrote: »

Here you go, it's messy code, maybe someone else could have a stab at making it a tad tidier:Good luck with it

How very kind of you to take the trouble; many thanks, I shall give it a go and report back.

James Lyall · January 6, 2014

James Lyall wrote: »

I shall give it a go and report back.

Works perfectly! Now I need to sort out the arrow background to make it smaller (like the arrows)
Many thanks.

Lightbox questions

Comments