добавление изображений в центр внутри div с помощью jquery

Я использую плагин jpg для кросс-слайдов для своего слайд-шоу. Мой контейнер больше, чем изображения внутри него, поэтому тенденция изображений помещается влево. Есть ли способ разместить их в центре контейнера?добавление изображений в центр внутри div с помощью jquery

вот пример сайта с использованием crosSlide, так как у меня нет веб-сайта для загрузки моей страницы-образца.

http://www.hashbangcode.com/blog/crossslide-jquery-plugin-test-348.html

источник

2010-05-19 text

Определение центра элемента с помощью JQuery:

если вы знаете innerWidth родителя и innerWidth элемента можно определить левую позицию, которую нужно применить, чтобы достичь " центр".

$("#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); 
});

Вы, вероятно, хотите, чтобы связать функцию, которая выполняет этот расчет с обработчиком для изменения размера порта дисплея.

источник

2010-05-19 04:04:46 Gabriel

Это не будет работать. Изображения используют абсолютное позиционирование, когда они загружаются в контейнер. Они всегда будут в (0,0) родительского контейнера. – prodigitalson

спасибо @prodigitalson, я пересмотрел свой ответ, чтобы узнать природу плагина. – Gabriel

Возможно, вам понадобится изменить плагин, чтобы сделать это. Я могу быть уверен, не видя, что вы пытаетесь выполнить. Однако это работает с использованием абсолютного положения изображений. Однако это, по-видимому, полагается на контейнер, снабжающий происхождение позиции - например. изображение всегда находится в (0,0) контейнера.

Плагин, похоже, не позволяет вам изменить это простым способом. Однако, если вы посмотрите на опции для "Ken Burns Effect", похоже, у вас есть способ сделать это. Можно ли настроить набор параметров, которые будут создавать эффект, который вы хотите, я не знаю, но это будет моей отправной точкой.

источник

2010-05-19 04:08:37 prodigitalson

положение: «абсолютный», видимость: «скрытый», Align: «центр» // топ: 0, // слева: 0 Я нашел его на сценарий, и я комментирую сверху и слева, заменив их выравнивание по центру, но оно подталкивает изображения вправо. – text

'align' is a vaild property. Вам нужно будет использовать 'text-align: center;' howver thatt wont work, потому что вы устанавливаете его на изображении, нет родителя изображения, для которого нужно применить «text-align». Тем не менее вы можете установить для изображения «display: block; margin: 0 auto; 'и это могло бы центрировать его правильно ... – prodigitalson

Вот JQuery применить к контейнеру после того как они загружены в готовой функции:

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' }); 
});

В основном проходит через каждое изображение, содержащееся в #crossslide и вычисляет, как далеко позиционировать top и left (абсолютно позиционируется относительно #crossslide) в зависимости от того, насколько он меньше.

источник

2010-05-19 04:17:43 mVChr

Я была такая же проблема, так что я искал jquery.cross-slide.min.js файл для «слева» и нашел этот фрагмент кода:

.css({position:"absolute",visibility:"hidden",top:0,left:14,border:0})

отредактированные левое положение и его работал на меня.

источник

2012-12-23 09:27:24

добавление изображений в центр внутри div с помощью jquery

ответ

Смежные вопросы