I am building a iPhoto like (Read rip-off) interface for thumbnails
and I am having a couple problems that I thought some one on the list
might be able to assist me on ...
first off here is the page: http://v4.incontrolsolutions.com/galltest/
I am no Javascript whizz and I am sure there is a FAR more efficient
way to do what I am trying. Having said that, the 2 things I was
looking for advise are :
1) The Slider... I must be missing something as I cant for the life
of me figure out how to get the range to be from .25 - 1. Setting the
minimum and maximum dont seem to have the effect I would expect.
<div id="track" style="position:absolute; left:25px;
top:10px; width:
150px; height:10px;">
<div id="scaller" style=" width:10px; height:15px;
background-
image: url(slidder2.png)"></div>
</div>
var scalebar = new Control.Slider(''scaller'',
''track'',{
sliderValue:1,
minimum:.25,
onSlide:function(v){doscale(v)},
onChange:function(v){doscale(v)}
});
2) I am using getElementsByClassName to get all the images to scale,
and then running a "for" loop and then resizing each image''s
containing div
even with only 25 images in there now, it is a little choppy. There
must be a better/more efficient way to scale all elements of a given
class...
Oh ya, I have only tested this on Firefox, so I have no idea what
will happen in IE!!!
Thanks!!!
______________________________________________________________________
Alex Duffield . Principal . InControl Solutions . http://
www.incontrolsolutions.com
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Timo Hoepfner
2006-Jan-31 08:43 UTC
Re: resizing multiple images using getElementsByClassName
Hi Alex, I cannot help you with the details, but here''s a description on how to do iPhoto like image resizing with scriptaculous: http://www.agilepartners.com/blog/2005/12/07/iphoto-image-resizing- using-javascript/ Hope this helps, Timo Am 31.01.2006 um 05:23 schrieb Alex Duffield:> I am building a iPhoto like (Read rip-off) interface for thumbnails > and I am having a couple problems that I thought some one on the > list might be able to assist me on ... > > first off here is the page: http://v4.incontrolsolutions.com/galltest/_______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Alex Duffield
2006-Jan-31 17:23 UTC
Re: resizing multiple images using getElementsByClassName
Cool, thanks, but they are just doing a while loop aswell. And as for a iPhoto like scale they are missing it a bit. In his (her?) example the images all scale up to the top left, but in iPhoto, the images scale from there center, until there is enough room for one more or one less column. (Take a look in my example I posted) However that site did point out a bug in Mac Firefox that is probably responsible for some of the stuttering I am seeing as I am using Mac Firefox. It runs a lot smother in Safari and I tested it in IE Windows and the scaling was fairly smooth, but I wil need to do a test and see how it works with 100+ images.. I acutely switched over to using ".each" instead of the while loop and I "Think" it is a little better, but I know that Thomas Fuchs is doing the same sort of thing in fluxiom (http://www.fluxiom.com) and based on the video clip there he is getting WAY better performance than the method I am doing... Any how, if any one can offer some advice on optimizing this I would be for ever in your debt! Cheers. ______________________________________________________________________ Alex Duffield . Principal . InControl Solutions . http:// www.incontrolsolutions.com On 31-Jan-06, at 12:43 AM, Timo Hoepfner wrote:> Hi Alex, > > I cannot help you with the details, but here''s a description on how > to do iPhoto like image resizing with scriptaculous: > > http://www.agilepartners.com/blog/2005/12/07/iphoto-image-resizing- > using-javascript/ > > Hope this helps, > > Timo > > > Am 31.01.2006 um 05:23 schrieb Alex Duffield: > >> I am building a iPhoto like (Read rip-off) interface for >> thumbnails and I am having a couple problems that I thought some >> one on the list might be able to assist me on ... >> >> first off here is the page: http://v4.incontrolsolutions.com/ >> galltest/ > > >_______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Siegfried Puchbauer
2006-Jan-31 18:50 UTC
Re: resizing multiple images using getElementsByClassName
what about modifying the global stylesheet? all the images have the same
classname and onchange of the slider you just modify the class style... -->
no loop through the dom elements
just define an empty <style> section in the head and do smth like that in
your onslide func:
var style = document.getElementsByTagName(''style'')[0];
style.innerHTML = ''.imageClass { height: '' + height +
''%; width: '' + width +
''%; }'';
i don''t know if it works in all browsers ... i just tested altering the
style tag in firefox ... and the changes affected to the page
only a thought that crossed my mind...
brgds sigi
2006/1/31, Alex Duffield
<alex-GLL9njBnHiGqPKKiFzS5XxZCeNDtXRbv@public.gmane.org>:>
> Cool, thanks, but they are just doing a while loop aswell. And as for a
> iPhoto like scale they are missing it a bit. In his (her?) example the
> images all scale up to the top left, but in iPhoto, the images scale from
> there center, until there is enough room for one more or one less column.
> (Take a look in my example I posted)
> However that site did point out a bug in Mac Firefox that is
> probably responsible for some of the stuttering I am seeing as I am using
> Mac Firefox. It runs a lot smother in Safari and I tested it in IE Windows
> and the scaling was fairly smooth, but I wil need to do a test and see how
> it works with 100+ images..
> I acutely switched over to using ".each" instead of the while
loop and I
> "Think" it is a little better, but I know that Thomas Fuchs is
doing the
> same sort of thing in fluxiom (http://www.fluxiom.com) and based on the
> video clip there he is getting WAY better performance than the method I am
> doing...
>
> Any how, if any one can offer some advice on optimizing this I would be
> for ever in your debt!
>
> Cheers.
>
> ______________________________________________________________________
>
> *Alex Duffield* *.* *Principal* *.* *InControl Solutions* *.* *
> http://www.incontrolsolutions.com*
<http://www.incontrolsolutions.com/>
>
>
>
>
> On 31-Jan-06, at 12:43 AM, Timo Hoepfner wrote:
>
> Hi Alex,
> I cannot help you with the details, but here''s a description on
how to do
> iPhoto like image resizing with scriptaculous:
>
>
>
http://www.agilepartners.com/blog/2005/12/07/iphoto-image-resizing-using-javascript/
>
> Hope this helps,
>
> Timo
>
>
> Am 31.01.2006 um 05:23 schrieb Alex Duffield:
>
> I am building a iPhoto like (Read rip-off) interface for thumbnails and I
> am having a couple problems that I thought some one on the list might be
> able to assist me on ...
> first off here is the page: http://v4.incontrolsolutions.com/galltest/
>
>
>
>
>
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>
>
>
--
Mit freundlichen Grüßen
Siegfried Puchbauer
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
One way to do this with minimal code at resize time is to manipulate the style rule for a class that is used by every image. I haven''t tried this, and this is something I''ve only read the documentation for: 1. Set a class on each image you want to resize together 2. On initialize, enumerate the document.stylesheets array and for each sheet, the cssRules array to find a cssRule with a selectorText of the class you set in 1 3. On resize, change the width and height of the cssRule returned in 2 (To get the resize from the middle effect, also set the top and left properties appropriately (set the position property in (1) for this to work)) I think the entire cssText of the cssRule must be set, so I would keep this class to only the information needed to do the cool resize. _____ From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of Alex Duffield Sent: Tuesday, January 31, 2006 9:23 AM To: Timo Hoepfner Cc: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org Subject: Re: [Rails-spinoffs] resizing multiple images usinggetElementsByClassName Cool, thanks, but they are just doing a while loop aswell. And as for a iPhoto like scale they are missing it a bit. In his (her?) example the images all scale up to the top left, but in iPhoto, the images scale from there center, until there is enough room for one more or one less column. (Take a look in my example I posted) However that site did point out a bug in Mac Firefox that is probably responsible for some of the stuttering I am seeing as I am using Mac Firefox. It runs a lot smother in Safari and I tested it in IE Windows and the scaling was fairly smooth, but I wil need to do a test and see how it works with 100+ images.. I acutely switched over to using ".each" instead of the while loop and I "Think" it is a little better, but I know that Thomas Fuchs is doing the same sort of thing in fluxiom (http://www.fluxiom.com) and based on the video clip there he is getting WAY better performance than the method I am doing... Any how, if any one can offer some advice on optimizing this I would be for ever in your debt! Cheers. ______________________________________________________________________ Alex Duffield . Principal . InControl Solutions . <http://www.incontrolsolutions.com/> http://www.incontrolsolutions.com On 31-Jan-06, at 12:43 AM, Timo Hoepfner wrote: Hi Alex, I cannot help you with the details, but here''s a description on how to do iPhoto like image resizing with scriptaculous: http://www.agilepartners.com/blog/2005/12/07/iphoto-image-resizing-using-jav ascript/ Hope this helps, Timo Am 31.01.2006 um 05:23 schrieb Alex Duffield: I am building a iPhoto like (Read rip-off) interface for thumbnails and I am having a couple problems that I thought some one on the list might be able to assist me on ... first off here is the page: http://v4.incontrolsolutions.com/galltest/ _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Yehuda Katz
2006-Feb-01 19:17 UTC
Re: resizing multiple images using getElementsByClassName
Try defining the image size in ems and changing the font-size style of a container. On 1/31/06, Siegfried Puchbauer <siegfried.puchbauer-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > what about modifying the global stylesheet? all the images have the same > classname and onchange of the slider you just modify the class style... --> > no loop through the dom elements > > just define an empty <style> section in the head and do smth like that in > your onslide func: > > var style = document.getElementsByTagName(''style'')[0]; > style.innerHTML = ''.imageClass { height: '' + height + ''%; width: '' + width > + ''%; }''; > > i don''t know if it works in all browsers ... i just tested altering the > style tag in firefox ... and the changes affected to the page > > only a thought that crossed my mind... > > brgds sigi > > 2006/1/31, Alex Duffield <alex-GLL9njBnHiGqPKKiFzS5XxZCeNDtXRbv@public.gmane.org>: > > > > Cool, thanks, but they are just doing a while loop aswell. And as for a > > iPhoto like scale they are missing it a bit. In his (her?) example the > > images all scale up to the top left, but in iPhoto, the images scale from > > there center, until there is enough room for one more or one less column. > > (Take a look in my example I posted) > > However that site did point out a bug in Mac Firefox that is > > probably responsible for some of the stuttering I am seeing as I am using > > Mac Firefox. It runs a lot smother in Safari and I tested it in IE Windows > > and the scaling was fairly smooth, but I wil need to do a test and see how > > it works with 100+ images.. > > I acutely switched over to using ".each" instead of the while loop and I > > "Think" it is a little better, but I know that Thomas Fuchs is doing the > > same sort of thing in fluxiom ( http://www.fluxiom.com) and based on the > > video clip there he is getting WAY better performance than the method I am > > doing... > > > > Any how, if any one can offer some advice on optimizing this I would be > > for ever in your debt! > > > > Cheers. > > > > ______________________________________________________________________ > > > > *Alex Duffield* *.* *Principal* *.* *InControl Solutions* *.* *http://www.incontrolsolutions.com > > * <http://www.incontrolsolutions.com/> > > > > > > > > > > On 31-Jan-06, at 12:43 AM, Timo Hoepfner wrote: > > > > Hi Alex, > > I cannot help you with the details, but here''s a description on how to > > do iPhoto like image resizing with scriptaculous: > > > > http://www.agilepartners.com/blog/2005/12/07/iphoto-image-resizing-using-javascript/ > > > > > > Hope this helps, > > > > Timo > > > > > > Am 31.01.2006 um 05:23 schrieb Alex Duffield: > > > > I am building a iPhoto like (Read rip-off) interface for thumbnails and > > I am having a couple problems that I thought some one on the list might be > > able to assist me on ... > > first off here is the page: http://v4.incontrolsolutions.com/galltest/ > > > > > > > > > > > > > > _______________________________________________ > > Rails-spinoffs mailing list > > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > > > > > > > > -- > Mit freundlichen Grüßen > > Siegfried Puchbauer > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > >-- Yehuda Katz Web Developer (ph) 718.877.1325 (fax) 718.686.4326 _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs