Image Positioning Javascript

[cotton31]

Hi,

I need to arrange x number of images in a circle around another image, equally spaced.

I need to do this via javascript, as this will be handled by an onclick event - the user clicks on one of 3 initial images, which then moves to the center of the screen and several (between 5 and 7) related images are displayed in a circle around it.

I'm struggling with how I'd calculate where on a circle they'd be positioned?

Any help?

Cheers!

 

[cotton31]

Almost there! Here's the code I'm using for anyone interested:

var radius = 275;
var fields = $('.field'), container = $('#container'), width = container.width(), height = container.height();
var angle = 0, step = (2*Math.PI) / fields.length;
fields.each(function() {
    var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2);
    var y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);
    if(window.console) {
        console.log($(this).text(), x, y);
    }
    $(this).css({
        left: x + 'px',
        top: y + 'px', 
        position: 'absolute'
    });
    angle += step;
});

 

[sist_si]

Can you put this in a JSfiddle so we can see how it's performing atm

 

[cotton31]

Sure, here you go: Link

Very basic example, I'm using actual images with mine but it's essentially the same. I found that I had to increase the radius to fit my images on as they are fairly big, but I've reset it to 200 for this demo.

 

[cotton31]

Slight thread revival here!

This is still working as above, however I've changed the images slightly (they are now a bit wider) and I've noticed that it doesn't quite work as well as it was doing, for two reasons:

1. It would look better if the path the images were aligning to was an oval rather than a circle - my trigonometry is failing me so help with this would be appreciated!
2. As the images are aligning their left edge to the circle path, those on the left had side of the circle are effectively inside it, and those on the right are outside (hope that makes sense!) - this may get better with changing the path to an oval, but any ideas around this would good!

Cheers,
Matt

 

[SimonCHere]

For part 2 why not just take away half the width and height of your image containers from the x and y coordinates so the center of your images is on the line rather than the top and left.

 

[cotton31]

Thanks Simon, that does indeed make it look better!

I think I was getting too caught up in getting those on the right left-aligned and those on the left right-aligned!

Cheers! Any help with part 1 would be appreciated!

 

[SimonCHere]

Thanks Simon, that does indeed make it look better!

I think I was getting too caught up in getting those on the right left-aligned and those on the left right-aligned!

Cheers! Any help with part 1 would be appreciated!

Just try changing the y coord to this:

var y = Math.round(height/2 + 0.5 * radius * Math.sin(angle) - $(this).height()/2);

basically for each point you are reducing the y position.

simon

 

[cotton31]

That works great Simon! Thanks for your help.

 

[SimonCHere]

You're welcome.