да.
я тогда лепил полностью это все на jquery, потом переделал на CSS, твой совет был правильным.
но, мне не дает покоя ситуация, когда изображения меньше требуемого размера, а они все должны быть вписываться в окно 650px по ширине и 500px по высоте - ни больше, ни меньше.
что я сделал:
всем изображений при создании через ббкод присваивается класс
Код: Выделить всё
.highslide-horizontal {
margin: 5px 0;
max-width: 650px;
width: 99%;
}
и здесь все нормально, стабильно и красиво. большие изображения не превышают 650 точек, маленькие вытягиваются до 650пх.
но, с вертикальными изображениями не все так красиво, как хотелось бы, они тоже вытягивыются по ширине до 650, но становятся очень большими.
через CSS можно убрать 99% ширину и вместо этого поставить ограничение по высоте, но тогда небольшие изображения не достигают требуемого размера.
вот изза этого я продолжил сыр-бор.
сделал второй класс
Код: Выделить всё
.highslide-vertical {
height: 500px;
max-height: 500px;
width: auto;
}
в котором отключаю растягивание по горизонтали, включаю ограничение по высоте 500 и дотягивание высоты до 500 если изображение меньше требуемого размера.
т.е. по-умолчанию все изображения считаются горизонтальными отрабатываются первым стилем.
затем срабатывает функция jquery
Код: Выделить всё
// расчет высоты изображений, подмена классов
function imageResize() {
$('.highslide img').each(function () {
if ($(this).height() > 500) {
$(this).removeClass('highslide-horizontal').addClass('highslide-vertical');
}
});
}
которая определяет высоту изображения и меняет класс - все стабильно, красиво и так как мне хочется
собака зарыта в другом месте:
изображения подгружаются с различных фотохостингов и при первой загрузке страницы на это уходит некоторое время.
т.е. функция срабатывает раньше, чем становится доступной высота изображения - вот здесь проблема.
при повторной загрузке страницы или ее обновлении изображения скорее всего кэшированы - поэтому проблем нет.
пока ничего лучше не придумал, чем вызвать один раз функция для кэшированных изображений при формировании страницы
Код: Выделить всё
(function($) {
// пересчитываем высоту изображений при загрузке кэшированных изображений
imageResize();
второй раз с задержкой в 1 сек.
Код: Выделить всё
// пересчитываем высоту для изображений, загружаемых в первый раз
$(document).ready(function() {
setTimeout(imageResize,1000);
});
этот вариант работает приемлемо, не думаю, что он слишком грузный, так как скрипт отрабатывается при загрузке страницы, изображений максимум может быть несколько десятков, из которых функция обработает единицы, причем условие сроботает либо сразу, либо с задержкой в 1 сек.
как решить по другому - не знаю. попросил помощи, но наши мудрые гуру упорно молчат, наверное что-то знают.
