Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

thumbItemClass bug fixed #26

Open
kalelqs opened this issue Jul 21, 2017 · 1 comment
Open

thumbItemClass bug fixed #26

kalelqs opened this issue Jul 21, 2017 · 1 comment

Comments

@kalelqs
Copy link

kalelqs commented Jul 21, 2017

Hi there.

There is a bug when you try to add more then one class to the thumb item selector ('owl-thumb-item').

On js:

thumbItemClass: 'owl-thumb-item class2 class3 class4',

They are created like this:

<button class="owl-thumb-item" class2="" class3="" class4="">...</button>

To fix that problem, i edited some lines on the original js:

this line:
this._thumbcontent._thumbcontainer.append('<button class=' + options.thumbItemClass + '><img src="' + this._thumbcontent[i].attr('src') + '" alt="' + this._thumbcontent[i].attr('alt') + '" /></button>');

...to this:
this._thumbcontent._thumbcontainer.append('<button class="' + options.thumbItemClass + '"><img src="' + this._thumbcontent[i].attr('src') + '" alt="' + this._thumbcontent[i].attr('alt') + '" /></button>');
(the double quotes on button class was missing).

and this:
var index = $(e.target).parent().is(this._thumbcontent._thumbcontainer) ? $(e.target).index() : $(e.target).closest('.'+options.thumbItemClass).index();

...to this:
var index = $(e.target).parent().is(this._thumbcontent._thumbcontainer) ? $(e.target).index() : $(e.target).closest('.'+options.thumbItemClass.replace(/\s+/g, ".")).index();
(preparing the selector to get more then one class)

The problem was solved an additional classes now is working:

<button class="owl-thumb-item class2 class3 class4"></button>

(and thanks for this great Owl extension, btw!)

@kalelqs
Copy link
Author

kalelqs commented Jul 21, 2017

Hey, again.

Also, there is an bug when using more then one thumbContainerClass — it makes the carousel scroll to the last item if clicking on the container but not on items.

To fix that i added .replace(/\s+/g, ".") to the thumbContainerClass selector, turning the code to this:

this._thumbcontent._thumbcontainer = $('.' + options.thumbContainerClass.replace(/\s+/g, "."));

this._identifier = $(e.target).closest('.' + options.thumbContainerClass.replace(/\s+/g, ".")).data('slider-id');

Problem solved ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant