Как скопировать эскизы неизвестной высоты с помощью jQuery?

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

Здесь, я пытаюсь собрать часть 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>

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

источник

2010-05-07 user335780

made some code here for you

, например:

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>

Css

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

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

редактировать:

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

редактировать 2:

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

источник

2010-05-07 20:31:47 choise

Вы не просматриваете ни одну из ваших переменных ... – gnarf

scoped и cached – choise

Спасибо, но я стараюсь использовать переменную image- размеры в жидкой компоновке. Может быть, это выходит за рамки меня, но кроме этого вопроса о вертикальном выравнивании, похоже, он прекрасно сочетается ............ Я действительно ценю, что вы тратите время на ответьте мне, кстати, немного боялся, что меня пожевали бы за то, что я ничего не знал, как я сделал на другом форуме. – user335780

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

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

источник

2010-05-07 20:37:28 gnarf

thankyou, я ценю ваше время, чтобы ответить на мой вопрос, однако я не думаю, что я объяснил себя должным образом. Сожалею. Взгляните на мой комментарий выше для лучшего объяснения (я думаю!). – user335780

здесь является 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;

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

источник

2010-05-08 17:14:23 user335780

Как скопировать эскизы неизвестной высоты с помощью jQuery?

ответ

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