Product viewer glitches when thumbnail click if initialization method called a second time.

[fatfantasma]

First, nice plugin!

I have a jquery mobile project that is trying to use your plug in. I followed the docs for installation and it works perfectly the first time. However, If I back out of the page and then re-enter the page with the viewer on it it glitches out. Basically, when you click a thumbnail the main image disappears for a second then comes back and then the whole viewer refreshes itself.

At first I thought I was calling the 'smoothproducts()' method on the same html code multiple times was causing the problem but it's fresh uninitialized html every time I go to that page. Only the smoothproducts js code remains in memory which is called multiple times on fresh html. When I do a complete refresh of the app with all new js loads, your plugin works fine on the first try.

Do you have an idea what the problem might be? Is the plugin not initializing properly on the second call? Maybe some left over button click handlers?

More Info:
I can see in chrome tools for a split second that the 'display:block' in the below line changes to 'display:none' for a split second when I click a thumbnail. This only happens on the second initialization of the smoothproducts() method. The width and height style also are react differently.

The above line definitely changes different on the second call.

Even More INFO.
I confirmed that the html is enhanced by your smoothproduct() method exactly the same way for both my first and second page loads. My guess is that the plugin is left in a weird state for the second initialization. Global var issue?

[kthornbloom]

I'm not sure I completely understand how you've got things set up, but it
sounds like either:

1. The html is dynamically changing, but the plugin isn't getting called
   again

Or

2. The html is staying the same, but the plugin is being called multiple
   times.

Either would probably break things!
On Nov 13, 2015 5:16 PM, "fatfantasma" [email protected] wrote:

First, nice plugin!

I have a jquery mobile project that is trying to use your plug in. I
followed the docs for installation and it works perfectly the first time.
However, If I back out of the page and then re-enter the page with the
viewer on it it glitches out. Basically, when you click a thumbnail the
main image disappears for a second then comes back and then the whole
viewer refreshes itself.

At first I thought I was calling the 'smoothproducts()' method on the same
html code multiple times was causing the problem but it's fresh
uninitialized html every time I go to that page. Only the smoothproducts js
code remains in memory which is called multiple times on fresh html. When I
do a complete refresh of the app with all new js loads, your plugin works
fine on the first try.

Do you have an idea what the problem might be? Is the plugin not
initializing properly on the second call?

—
Reply to this email directly or view it on GitHub
#18.

[fatfantasma]

I think I understand what the problem is. However I'm not sure how to fix it. Every time your plugin is initialized (smoothproducts()) it registers 'click' handlers. They are getting registered multiple times so they are piling up on each other and causing the problem. I stepped thru your code and can definitely see it happening. If I go into and out of a page 5 times all your click handlers are getting registered 5 time. Somehow then need to registered only once.

Maybe a separate the initialization method for setting up click handlers and then have separate 'enhance' html method.

[fatfantasma]

This sort of explains the problem. It does talk about setup and tear down methods.

http://stackoverflow.com/questions/12377854/remove-all-jquery-event-handlers

[fatfantasma]

I did try to make a separate 'smoothproducts_init()' method which setup all the click events. I then created a 'smoothproducts()' method that just did the html enhancement. It basically worked. However, it broke the zoom function. I'm a newbie at jquery but you should be able to it right.

I hope you do make the changes because you have a really nice looking plugin :) I just need it to work with Jquery mobile :)

[fatfantasma]

Kevin,

I was able to make simple modifications to your plugin to make everything work nicely. I just added an extra function 'smoothproducts_init()' that just setup all of your event handlers. Everything else was left in the smootheproducts() method with one addition. I moved the Panning/zoom mouse wheel handler in to the smoothproducts() method. So far everything works nicely.

The smoothproducts_init() function should changed so it does not need to extend the selector ultimately. For example, I still use do something like this $(selector).smoothproducts_init() where the selector does nothing. It should just be a "smoothproducts_init()" call. I don't have time to figure that out. :)

I included the file that I changed.
smoothproducts_mod.txt

I hope you make the similar changes because it really makes your awesome plugin more usable in other situations. Sorry for not using Github. I'm still getting used to that also :)

[kthornbloom]

Thanks for looking into it! If you ever feel like working on it and submitting the change via Github, that would be great. Otherwise, I may look into it though it will probably be awhile. :)