Попытка установить свойство css LEFT для использования Jquery - Центрирование изображения внутри DIV

Question

Этот код предназначен для изменения расположения галерейных изображений внутри их квадратных блоков.Все изображения имеют заданную высоту, например, 100 пикселей.Но их ширина различна.Вместо того, чтобы показывать только самые левые 100px каждого изображения, я бы предпочел, чтобы он показывал центр.

Все, что мне нужно, это просмотреть каждое изображение и изменить свойство left, чтобы сместить изображения влево.

$('img.gall_imgs').load(function() {

    var $imgWidth = parseInt($(this).width); // "$(this)" or "this"? parseInt() needed?
    var $divWidth = parseInt($(this).closest('div').width);

    if($imgWidth > $divWidth) { // if img is wider than its containing div, we'll shift it left
        var $position = -1 * ($imgWidth/2 - $divWidth/2); // will give decimals?
        $position = parseInt($position) + "px"; // make $position format "123px". parseInt() needed here?
        // var $position = '-50px'; // tested with pre-set position
            this.css("left", $position); // "$(this)" or "this"?
        }
    //}
});

Кроме того, я даже не знаю, как проверить значения переменных внутри jquery.Я попытался добавить предупреждение ($ imgWidth), но оно, очевидно, не сработало.

РЕДАКТИРОВАТЬ: Вот CSS и HTML, которые у меня сейчас есть:

.gall_thumb_img { // the div surrounding the img

    width:200px;
    height:200px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
    text-align:center; // just added this per suggestions. No effect

}
.gall_thumb_img img{ // the img
    position:absolute;

    display:block;
    height:200px;
    min-width:200px;

}

HTML:

<div id="gall_box">
    <div class="gall_thumb_box" id="gall_thumb_box_0" >
            <div class="gall_thumb_img" id="gall_thumb_img_0" >

                <a href="?c=ecards&v=single&idx=23&img_dir=nature">

                <img class="gall_img" id="img0" src="http://example.com/small.jpg?20111211044810"></a>
                </div>
    </div>
</div>

РЕДАКТИРОВАТЬ2: Вот что я изменил jquery на основе различных предложений.Все еще без изменений в конечном результате.

$(window).load(function() {
    $('img.gall_imgs').each(function() {
        var imgWidth = $(this).width(); // "$(this)" or "this"?
        var divWidth = $(this).closest('div').width();
        alert(imgWidth);
        if(imgWidth > divWidth) {
            var position = -1 * (imgWidth/2 - divWidth/2); // will give decimals?
            position = position + "px"; // make position format "123px". 
            // var position = '-50px'; // tested with set position
                this.css("left", position); // "$(this)" or "this"?
            }
    });
});

Центр выравнивания текста - хорошая идея, которую я буду использовать, если смогу заставить его работать, но я все еще хотел бы знать, почему мой код jquery не работает,Спасибо.

Answer 1

Вы можете использовать функцию jQuery $ .each, чтобы просмотреть все теги img и изменить их.

Вы также можете использовать div с background-image и background-position 'top center'? Я думаю, что вам будет полезно показать "центральную" часть изображения.

Кстати, почему вы используете знак $ в ваших переменных?

Answer 2

Сначала вам нужно .append <img />, а затем попытаться получить / установить его свойства.

Как указано в комментариях ниже, если они уже есть на вашей страницеВам не нужно слушать событие onload.Вы должны использовать jQuery.each для их перебора.

Примерно так:

$(function(){
    $('img.gall_imgs').each(function() {

        var that = $(this);

        var $imgWidth = that.width();
        var $divWidth = that.parent().width();

        if($imgWidth > $divWidth) {
            var $position = -1 * ($imgWidth/2 - $divWidth/2);
            $position = $position.toString() + "px";
            that.css("left", $position);
        }
    });
});

Answer 3

как то так

$('img.gall_imgs').each(function() {

var $imgWidth = parseInt($(this).width());
var $divWidth = parseInt($(this).closest('div').width());

Answer 4

Другие ответы здесь содержали некоторые подсказки, но они почти не меняли код, который я предоставил, и ни один из них не работал. Поэтому я собираюсь ответить на свой вопрос и опубликовать, что сработало.

Эта функция будет центрировать изображения по горизонтали внутри div, который имеет фиксированную ширину с переполнением, установленным на скрытый, и активируется при загрузке изображения. Без этой функции были бы видны только левые N пикселей, где N - ширина содержащего элемента div. С помощью этой функции вместо нее видны центральные пиксели.

$(window).load(function() {
    $("img.gall_img").each(function() {
        var imgWidth = $(this).width(); // use "$(this)" b/c "width()" is jquery
        var divWidth = $(this).closest('div').width();
        //alert(imgWidth + " and " + divWidth);
        if(imgWidth > divWidth) {
            var position = Math.round(-1 * ((imgWidth/2) - (divWidth/2))); // round up to next integer
            position = position + "px"; // make position format "123px". parseInt() needed here?
                $(this).css("left", position); // use "$(this)" b/c "css()" is a jquery function (otherwise, could use "this")
            }
    });
});

Вещи, которые я узнал.

1. "$ (document) .ready" здесь не работает. Необходимо использовать «$ (window) .load», потому что функция готовности срабатывает перед изображениями загружены. Чтобы манипулировать положением и размером изображения, нужно подождать пока они полностью не загружены.
2. $ (this) = this, за исключением того, что вы используете $ (this), когда хотите получить доступ к функциям jQuery (например, width () и css ()) и свойствам.
3. $ ("tag"). Each: циклически перебирает указанную коллекцию тегов (или других объектов), применяя код внутри "each ()" к каждому члену коллекции в свою очередь. Используйте «this» или «$ (this)» внутри для обозначения текущему участнику.
4. Трудно отлаживать jQuery с помощью Google Chrome.

Answer 5

Вам не нужен intParse, а width - это функция jQuery, поэтому вы должны написать 'width ()':

$('img.gall_imgs').load(function() {

    var $imgWidth = $(this).width();
    var $divWidth = $(this).closest('div').width();

    if($imgWidth > $divWidth) {
        var $position = Math.round(-1 * ($imgWidth - $divWidth) ) + "px";
        $(this).css("left", $position);
    }
});

Другой (и лучший) вариант - использовать атрибут cssmsgstr "выравнивание текста: центр;"Внутри блоков изображения находятся внутри, поэтому он работает, потому что изображения отображаются встроенными в его контейнер.

PD- "alert ($ imgWidth);"должен показать вам его значение, иначе выполнение не достигнет этой строки кода.