Как я могу вертикально выровнять миниатюры неизвестной высоты, используя jQuery? - PullRequest
Новая
       14

Как я могу вертикально выровнять миниатюры неизвестной высоты, используя jQuery?

1 голос
/ 08 мая 2010

Хорошо, я начинающий в этом, на самом деле, я все еще создаю свой первый веб-сайт. Я пытаюсь сделать все это путем ручного кодирования без CMS, чтобы попытаться узнать как можно больше как можно быстрее. Если этот пост находится не в том месте, я прошу прощения, и указатель на правильное место будет признателен.

Здесь я пытаюсь собрать кусочек jQuery, который автоматически выровняет мои миниатюры по вертикали в моей галерее изображений (все они разных размеров). Они находятся в пределах фиксированного размера div, и функция, которую я пытаюсь выполнить, выглядит примерно так: 

<script type="text/javascript">

$('#ul.photo).bind(function() {

var smartVert=$(this);

var phty=ob.("ul.photo img").height(); //get height  of photos

var phtdif=Math.floor(208 - phty); //subtract height of photo from div height

var phttop=Math.floor(phtdif / 2); //gets padding reqd.

$ob.("ul.photo").css({'padding-top' : phttop}) //sets padding to center thumbnail

});

smartVert();

</script>

Неудивительно, что это не сработает, если какая-то любезная душа может сжалиться над полным нубом и указать, где я иду не так (вероятно, при написании полного тарабарства это будет мое первое предположение), это было бы очень полезно - даже если бы вы могли просто указать мне направление обучения по этим вопросам. Я посмотрел и нашел одну ссылку, в которой говорилось, что такую ​​функцию легко создать, но она не проработана.

Ответы [ 3 ]

1 голос
/ 08 мая 2010

сделал здесь код для вас

например:

HTML 

<div id="yourdiv">
    <img height="200" width="100" src="x" />
    <img height="100" width="100" src="x" />
    <img height="150" width="100" src="x" />
    <img height="300" width="100" src="x" />
</div>​

1010 * CSS * 

#yourdiv {
    height: 400px;
    background-color: black;
}
#yourdiv img {
    margin: 0 10px;
}

JS 

$(document).ready(function() {
    var $yourdiv = $("#yourdiv");
    var divHeight = $yourdiv.height();

    $("img",$yourdiv).each(function() {
        var imgElement = $(this);
        var imgPadding = (Math.floor((divHeight-imgElement.height()) / 2));
        imgElement.css('margin-top',imgPadding+'px');
    });
});​

1016 *

Редактирование:

для лучшего выравнивания: установите ваши изображения, чтобы блокировать и плавать их влево. затем очистите ваш div.

изменить 2:

цикл по набору объектов с циклом for выполняется быстрее, чем .each

0 голосов
/ 08 мая 2010

вот css для моей галереи: 

.contentphoto {
    position:relative;
         width:64%
    margin:auto;
    left:10.375em;
    top:-36.625em;
    background-color: #7EC0EE;
    background-image: none;
    background-repeat: no-repeat;
    background-position:center;
    z-index:1;
}

ul.gallery{
    width: 100%; 
    padding-left: 3.2em;
    margin:  0;
    list-style: none;
}

ul.gallery li {
    float: left;
    width: 200px;           /*Set default width*/
    padding: 0;
    margin: 5px 0;
    display: inline;
}

.photo {
    height: 13em;
    font-size: 1em;
    margin-right: 10px;  /*Creates the 10px gap */
    padding: 20px;
    background: #e3e1d5;
}

.photo img {        /*Flexible image size with border*/
         width: 89%;    /*Took 1% off of the width for IE6 bug*/
         padding: 5%;
    background:#fff;
    margin: 0 auto;
    display: block;
    -ms-interpolation-mode: bicubic;

извините за то, что поместил это в другое поле ответа, но кнопка комментария перестала работать ...

0 голосов
/ 08 мая 2010

Предполагается, что $('#ul.photo') содержит несколько <img> тегов: 

 $('#ul.photo img').each(function() {
   var $img = $(this);
   $img.css('padding-top', (208 - $img.height()));
 });
...