Board Logo

Secondary initialization of Slide Bar
Alexxx14 - 6/5/2007 at 09:10 PM

Hi! I like your script - it helped me to solve some tasks but with current realization i've got problem. I'll explain what i want to do.

I have an admin page where user adds picture to the news items and I use Tigra Slide Bar to zoom that image. Actually i use it only to get a digit to which other PHP script zoom picture - and it does it's work. But...

Image uploads without page reloading (javascript) and other image may have width that differs from the previous one's. I already made what I had to get new image width, but i have to set it's value to the n_maxValue setting of the Slide Bar. And I don't want the page to reload for this - so I just want to reinitialize the Slide Bar again with new params I have.

How can i do that? Is it possible?

Sorry for my bad english - it's not my native language, I'm from Ukraine.

Thanks in advance for reply and help!

tigra - 6/5/2007 at 10:04 PM

The slider control wasn't designed to be reinitialized on the fly, but that should not be a problem in your case. You can have fixed n_MaxValue (say 1000) and just use it as the ratio

var n_result = Math.round(n_picWidth / n_maxValue * n_value);

Say one image is 800px wide and another is 1024px wide. If user sets the slider in the middle in first case you get 400px and in second 512.


Alexxx14 - 6/6/2007 at 06:47 PM

Hi! Thanks for reply.

You see, if i do as you said it kinda solve my problem but that part which apply to the maxValue - if I move slider to the right my image gets the right size, but when I want to select some less size i see that the minValue has moved to the middle of the slider bar (it depends on current image size). So now if i move pointer to the 425 or 512 (for example) and less values the image stays without change and that decreases the usability of my slider bar as now user doesn't know when the image stops to minimize.

One more thing that i forgot to tell - the minValue for the PHP script that cuts images is 70(px), so if the value is less than 70 it cuts image to 70px on it's small side. That's why if i use your formula and if the picture is not very big the n_result value begins to be less than 70 after i set pointer to the mark 500 or so and user doesn't see the picture to change.

That's how everything is difficult :)

I will be greatful if you give me some solution for the problem!!!

"??N???N?????" - And hey, have you been in Ukraine? :)

tigra - 6/6/2007 at 07:25 PM

That's not difficult a all. Instead of applying the ratio to values range from 0 .. n_picWidth apply it to 70 .. n_picWidth

var n_result = Math.round((n_picWidth - 70) / n_maxValue * n_value) + 70;

This maps the slider's range 0..n_maxValue to pixel sizes 70 .. n_picWidth
If you need to allow sizes more than the current image's size then you can do:

var n_result = Math.round((n_maxPicWidth - n_minPicWidth) / n_maxValue * n_value) + n_minPicWidth;

re."??N???N?????" - yes

tigra - 6/6/2007 at 07:34 PM

Of course you'll have to add check to make sure (n_picWidth - 70) or (n_maxPicWidth - n_minPicWidth) returns positive number, otherwise n_result = n_minPicWidth

Alexxx14 - 6/7/2007 at 07:34 PM

Thank you very much for help! I tried your solution but it didn't suit my task for 100%. The deal is that Math.round function gives a value which can be bigger than 70px and if i set for example "if ( width < 80 ) { width = 70 }" it causes sometimes cases when at the most left position of the pointer the image is still not 70px and is 72, 75 px or so.
But still - thank you, if i didn't find another way i would use your solution.

What i did. I left everything as it was when i downloaded the script and made a little change in slide.js - after this:

for (s_key in a_init)
this[s_key] = a_init[s_key];

I've wrote this:

this.n_maxValue = getsize();

And getsize() function just returns the size of the newly selected picture. And now it works. Of course I've got few problems with such realization - i have to click on the slider bar first to activate it and only than i can drag it (because i create new object on the fly and ID of the active slider is still same as it was on the older slider. But i hope i'll find out how to solve this.

Thanks again for the script!

Back to forum: