Centering images
Permalink Browser Info Environment
Is there an easy way to get the images to center within the div?
So far I've changed the function in view.php to this:
This centers the image but there's a weird shift, left or right of about 40px when it transitions. I'm using 'fade' to transition.
So far I've changed the function in view.php to this:
<script type="text/javascript">
$(function(){
$("#powerSliderContainer<?php echo $bID; ?>").cycle({
fx: '<?php echo $transitionType ?>',
next: '#powerSliderNext<?php echo $bID; ?>',
prev: '#powerSliderPrev<?php echo $bID; ?>',
pager: '#powerSliderPagination<?php echo $bID; ?>',
cleartypeNoBg: true,
timeout: '<?php echo $slideDelay ?>000',
before: centerImg
});
function centerImg() {
$('.powerSlide').css({left: '50%', marginLeft: -$(this).width()/2});
$('.powerSlide').css({top: '50%', marginTop: -$(this).height()/2});
};Viewing 15 lines of 17 lines. View entire code block.
This centers the image but there's a weird shift, left or right of about 40px when it transitions. I'm using 'fade' to transition.
| Type: | Discussion |
|---|---|
| Status: | New |
Thanks for the quick response.
That won't work though as the link and the image both have inline styles dynamically applied to them with: position: absolute; top: 0px; left: 0px;
Uploading consistent sized images is not really an option for a CMS either, most clients aren't that savy. Ideally any extension involving images would allow for resizing images to a cache (I realise that this is a free extension you're offering).
Anyway, in terms of centering the image, we'd need to overide the function which is adding the inline styles. Any ideas?
Really appreciate your time.
That won't work though as the link and the image both have inline styles dynamically applied to them with: position: absolute; top: 0px; left: 0px;
Uploading consistent sized images is not really an option for a CMS either, most clients aren't that savy. Ideally any extension involving images would allow for resizing images to a cache (I realise that this is a free extension you're offering).
Anyway, in terms of centering the image, we'd need to overide the function which is adding the inline styles. Any ideas?
Really appreciate your time.
Sorry, I meant applying that to .powerSliderShell - which has no inline styles. But like I said, that only centers the shell.
I realize not everyone is blessed with great clients, but educating users on how to re-size images using the built-in editor on C5 (visit the file library and hitting "edit" when selecting an image), will beat dynamically cropping an image any day. You'll get some nasty results that way.
I should also mention that there are no inline styles on the image itself. You can do:
I realize not everyone is blessed with great clients, but educating users on how to re-size images using the built-in editor on C5 (visit the file library and hitting "edit" when selecting an image), will beat dynamically cropping an image any day. You'll get some nasty results that way.
I should also mention that there are no inline styles on the image itself. You can do:
.powerSlide img { display: block; margin: 0 auto; }
That didn't work on it's own as the anchor tag still has inline styles but I found if I set the width in css it works:
This works perfectly but of course if I wanted to add another block somewhere else I wouldn't be able to make it a different size.
Thanks for your help. Great support!
I had a look at the image editor earlier. It's pretty good but quite a lot of extra steps. I use Magento quite a bit (yes I'm a masochist). Magento does a really good job of resizing and caching images with a number of options for proportional resizing. From a client point of view uploading an image and hitting save and having it magically appear fitted to it's container is an expectation. They're a bit spoilt nowadays I guess.
.powerSlide { width:700px;}
This works perfectly but of course if I wanted to add another block somewhere else I wouldn't be able to make it a different size.
Thanks for your help. Great support!
I had a look at the image editor earlier. It's pretty good but quite a lot of extra steps. I use Magento quite a bit (yes I'm a masochist). Magento does a really good job of resizing and caching images with a number of options for proportional resizing. From a client point of view uploading an image and hitting save and having it magically appear fitted to it's container is an expectation. They're a bit spoilt nowadays I guess.
the anchor tag doesn't matter. It already has a width set on it. If you auto margin the image inside of it, it should center it inside the anchor tag.
Do you have a link so I can see it on your site?
C5 does have that ability as well, but again, I've seen that screwed up much more often than teaching the client to resize the image. I do know that the built in editor is a bit cumbersome though.
Do you have a link so I can see it on your site?
C5 does have that ability as well, but again, I've seen that screwed up much more often than teaching the client to resize the image. I do know that the built in editor is a bit cumbersome though.
Am working locally sorry so can't give you a link.
The problem is the anchor tag has a width and height which is calculated by the jquery cycle function so my anchor tag has this inline style on it:
So you see it's always going to sit top left without adding the width of the slideshow in the css (over-riding the inline style):
The problem is the anchor tag has a width and height which is calculated by the jquery cycle function so my anchor tag has this inline style on it:
position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1; width: 369px; height: 377px;
So you see it's always going to sit top left without adding the width of the slideshow in the css (over-riding the inline style):
.powerSlide { width:700px;}
would do it.