Moving the Thumbnails (in gallery mode) to the left

[ccasalicchio]

Is it possible to position the thumbnails to the left of the slide?

[xonecas]

I have a similar requirement, where I need to move the thumbstrip to the top. Is this at all possible?

[PixelZombie]

I hacked it into the plugin - don't have the time for a pull request.

in lightslider.js change line 396 to:

$slide.parent().css('padding-left', (settings.vThumbWidth + settings.galleryMargin) + 'px');

and line 421 to:

var gMargin = (settings.vertical) ? 'margin-right' : 'margin-top';

In addition you have to change or overwrite the following CSS-selector like this:

.lSSlideOuter.vertical .lSGallery {
    right: auto;
    left: 0;
}

Hope this helps you guys ;-)

[ccasalicchio]

Thank you Frank, I'll test it out today!

​

On Mon, Dec 12, 2016 at 8:41 AM, Frank Hofmann [email protected] wrote:

I hacked it into the plugin - don't have the time for a pull request.

in lightslider.js change line 396 to:

$slide.parent().css('padding-left', (settings.vThumbWidth + settings.galleryMargin) + 'px');

and line 421 to:

var gMargin = (settings.vertical) ? 'margin-right' : 'margin-top';

In addition you have to change or overwrite the following CSS-selector like this:

.lSSlideOuter.vertical .lSGallery { right: auto; left: 0; }

Hope this helps you guys ;-)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/sachinchoolur/lightslider/issues/289#issuecomment-266396252, or mute the thread https://github.com/notifications/unsubscribe-auth/ACWkP0k8KT2-ITUQeXWx5Yklq5b4152Oks5rHSTvgaJpZM4K2hgV .

[ccasalicchio]

Using your suggestion, I've tweaked a bit further, to avoid not using the vertical to the right

​so, adding ​

​thumbsLeft: false | true

will render either to the left, or the default​

lightslider.js: line 237 - 243

if (settings.vertical) { $slide.parent().addClass('vertical'); elSize = settings.verticalHeight; $slide.css('height', elSize + 'px'); if (settings.thumbsLeft) { $slide.parent().addClass('thumbsLeft'); } }

line 398 (after above change)

if (settings.vertical === true) { var padding = settings.thumbsLeft === true ? 'padding-left': 'padding-right'; $slide.parent().css(padding, (settings.vThumbWidth + settings.galleryMargin) + 'px');}

line 425 (after above change)

var gMargin = (settings.vertical) ? (settings.thumbsLeft) ? 'margin-right' : 'margin-left' : 'margin-top';

​lightslider.css: added after line 260

/* Thumbnails on the left */.lSSlideOuter.vertical.thumbsLeft .lSGallery { right: auto; left: 0; }​

​[image: Inline image 1]​

​It seems to be working great now, thanks!​

On Mon, Dec 12, 2016 at 8:41 AM, Frank Hofmann [email protected] wrote:

I hacked it into the plugin - don't have the time for a pull request.

in lightslider.js change line 396 to:

$slide.parent().css('padding-left', (settings.vThumbWidth + settings.galleryMargin) + 'px');

and line 421 to:

var gMargin = (settings.vertical) ? 'margin-right' : 'margin-top';

In addition you have to change or overwrite the following CSS-selector like this:

.lSSlideOuter.vertical .lSGallery { right: auto; left: 0; }

Hope this helps you guys ;-)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/sachinchoolur/lightslider/issues/289#issuecomment-266396252, or mute the thread https://github.com/notifications/unsubscribe-auth/ACWkP0k8KT2-ITUQeXWx5Yklq5b4152Oks5rHSTvgaJpZM4K2hgV .

[PixelZombie]

Yeah it's better that way, but I didn't need the config part on my project. Otherwise I would have done it with config and all ;-)

Cheers!

[xu4ka]

This method no longer works.

[SilverFoxA]

Not sure if anyone find this helpful but based on my requirement here's what I did

.lSSlideOuter.vertical{
	padding-left: 55px;
}
.lSSlideOuter.vertical .lSGallery{
	left: 0;
}

You can make it dynamic by adding jQuery width function.

[Pankajbatham27]

1. Replace in ( lightslider.min.js ) (padding-right to padding-left) (vertical?"margin-left" to vertical?"margin-right")

2. Add custom css

.lSSlideOuter.vertical .lSGallery{ left: 0; }

[webdiller]

1. Replace in ( lightslider.min.js ) (padding-right to padding-left) (vertical?"margin-left" to vertical?"margin-right")
2. Add custom css

.lSSlideOuter.vertical .lSGallery{ left: 0; }

Works good, thx :)