- Posts: 10
- Thank you received: 0
Discussion about Hot Spinner Joomla module.
rotating images not centered
-
etherlen
Inactive member - Topic Author
- New Member
Less
More
12 years 5 months ago #19637
by etherlen
rotating images not centered was created by etherlen
love the extension, just can't center the rotating images. tried a few css edits in this forum, didn't help.
usadayhikes.com/gran/
Thanks,
usadayhikes.com/gran/
Thanks,
Please Log in to join the conversation.
-
josemanuelsh
- Visitor
12 years 5 months ago #19646
by josemanuelsh
Replied by josemanuelsh on topic Re: rotating images not centered
I had the same problem, I fixed it by changing lines 427 and 428 of jquery.holest.carousel.js, just comment the last part like this:
var x = Math.sin(a) * self.options.radius * radius_diff + self.THIS.offset().left;// + self.options.center[0];
var y = Math.cos(a) * (self.options.radius * self.options.horisontal_aspect);// + self.THIS.offset().top + self.options.center[1];
You will have to find those commands in the MIN version, or just use the uncompressed one like I did.
Hope it helps.
var x = Math.sin(a) * self.options.radius * radius_diff + self.THIS.offset().left;// + self.options.center[0];
var y = Math.cos(a) * (self.options.radius * self.options.horisontal_aspect);// + self.THIS.offset().top + self.options.center[1];
You will have to find those commands in the MIN version, or just use the uncompressed one like I did.
Hope it helps.
Please Log in to join the conversation.
-
etherlen
Inactive member - Topic Author
- New Member
Less
More
- Posts: 10
- Thank you received: 0
12 years 5 months ago #19647
by etherlen
Replied by etherlen on topic Re: rotating images not centered
Thanks,that fixed the horizontal centering but not the vertical. The rotating images are still going off the top of the screen. If I put the original code back for the var y = Math then the images drop below center.
Please Log in to join the conversation.
-
josemanuelsh
- Visitor
12 years 5 months ago #19650
by josemanuelsh
Replied by josemanuelsh on topic Re: rotating images not centered
I fixed it! You were right, so I went back and rechecked everything.
The Problem:
The absolute positioning used to center the images was using the whole window (browser) to calculate the movement of the images. This is usually fine, but if your template uses any DIV with CSS position set to relative, it ruins everything.
The Fix:
Instead of using the whole window to center the spinner, let’s just use the module container, that way we don’t have to worry about our template CSS. These are the steps to fix the problem.
1. In file tmpl/default.php
Go to lines 85 and 86 and replace the numbers 4 for 2’s
2. In file js/jquery.holest.carousel.js
Go to line 154 and change “static” for “relative”
Go to lines 427 and 428 and remove the offset parameters
After those lines add the following to “fine tune” the centering of the images
Got to line 537 and change the 20 for a 30 to fix a small issue related to the padding value of the Info Box
Notes:
- Remember that the spinning will be centered inside its container; you will have to adjust the vertical position of the Info Box with the “Info Box Vertical Position” parameter in the module.
- You will have to change the JavaScript file you call in you tmpl/default.php file (line 90) to use the uncompressed version of the file, since it is the one we just modified.
- I have tested this in IE9, FF, Chrome and Safari, but I am sure it will not work IE6 (kidding)
I hope this helps.
The Problem:
The absolute positioning used to center the images was using the whole window (browser) to calculate the movement of the images. This is usually fine, but if your template uses any DIV with CSS position set to relative, it ruins everything.
The Fix:
Instead of using the whole window to center the spinner, let’s just use the module container, that way we don’t have to worry about our template CSS. These are the steps to fix the problem.
1. In file tmpl/default.php
Go to lines 85 and 86 and replace the numbers 4 for 2’s
Code:
$rotationCenterX = ($moduleWidth / 2) - ($rotatingImageWidth / 2);
$rotationCenterY = ($moduleHeight / 2) - ($rotatingImageHeight / 2);
2. In file js/jquery.holest.carousel.js
Go to line 154 and change “static” for “relative”
Code:
self.THIS.css('position','relative');
Go to lines 427 and 428 and remove the offset parameters
Code:
var x = Math.sin(a) * self.options.radius * radius_diff + self.options.center[0] ;
var y = Math.cos(a) * (self.options.radius * self.options.horisontal_aspect) + self.options.center[1] ;
After those lines add the following to “fine tune” the centering of the images
Code:
x = x + (self.options.item_width / 2) - (Item.width() / 2);
Got to line 537 and change the 20 for a 30 to fix a small issue related to the padding value of the Info Box
Code:
jQuery(this).css('width',(sender.INFOPANEL.innerWidth() - 30) + 'px');
Notes:
- Remember that the spinning will be centered inside its container; you will have to adjust the vertical position of the Info Box with the “Info Box Vertical Position” parameter in the module.
- You will have to change the JavaScript file you call in you tmpl/default.php file (line 90) to use the uncompressed version of the file, since it is the one we just modified.
- I have tested this in IE9, FF, Chrome and Safari, but I am sure it will not work IE6 (kidding)
I hope this helps.
Please Log in to join the conversation.
-
etherlen
Inactive member - Topic Author
- New Member
Less
More
- Posts: 10
- Thank you received: 0
12 years 5 months ago #19670
by etherlen
Replied by etherlen on topic Re: rotating images not centered
Thanks for the detailed explanation, impressive support. I will try your suggestions as soon as I have a few minutes. Will let you know in a day or two.
Please Log in to join the conversation.
-
etherlen
Inactive member - Topic Author
- New Member
Less
More
- Posts: 10
- Thank you received: 0
12 years 5 months ago #19723
by etherlen
Replied by etherlen on topic Re: rotating images not centered
Your edits did the trick, nice job. Now that the images are centered I noticed that the text box is a few pixels off center - to the right. Didn't see where to adjust that. Any ideas? Thanks
usadayhikes.com/gran/
usadayhikes.com/gran/
Please Log in to join the conversation.
Time to create page: 0.182 seconds