Adding images to center inside a div using jquery
I am using jQuery CrossSlide plugin for my slideshow. My container is larger than the images inside it, so the trend of the images is pushed to the left. Is there a way to center them in the container?
here's an example site using crosSlide as I don't have a website to load my sample page.
http://www.hashbangcode.com/blog/crossslide-jquery-plugin-test-348.html
a source to share
Determining the center of an element with jQuery:
if you know the inner width of the parent element and the inner width of the element, you can determine the left position that needs to be applied to reach the "center".
$("#crossslide img").each(function() {
// let cl be (half parent width) - (half element width).
cl = ($(this).parent().innerWidth() / 2) - ($(this).innerWidth() / 2);
// we can set the left position to that value to achieve center
$(this).css("left", cl);
});
You probably want to link a function that performs this computation with a handler to resize the mapped port.
a source to share
Here's the jQuery being applied to your container after being loaded into the finished function:
var xSlideWidth = $('#crossslide').width();
var xSlideHeight = $('#crossslide').height();
$('#crossslide').find('img').each(function(i,obj) {
var objXdiff = (xSlideWidth - $(obj).width())/2;
var objYdiff = (xSlideHeight - $(obj).height())/2;
$(obj).css({ 'left':objXdiff+'px', 'top':objYdiff+'px' });
});
Basically goes through each image it contains #crossslide
and calculates how far to place top
and left
(absolutely positioned relative to # scrolling) depending on how small it is.
a source to share
You may need to modify the plugin to do this. I can be sure without seeing what you are trying to accomplish. However, this works using the absolute position of the images. However, this seems to rely on the container supplying the origin of the item - eg. the image is always in the (0,0) container.
The plugin doesn't seem to let you change this in an easy way. However, if you look at the Ken Burns Effect options , it seems to have a way to do it. Whether it is possible to tweak a set of parameters that will generate the effect you want, I don't know, but that will be my starting point.
a source to share