Я не профессионал MooTools, так что я думаю, что для тех, у кого больше опыта, решение моей маленькой проблемы довольно простое.
У меня есть простая Галерея изображений с квадратным изображением для "большого" Imagepreview. Он использует 5 изображений. Идентификатор изображения, который нужно установить, исходит из карусели. На данный момент выглядит (короче) так:
<script type="text/javascript">
function slide(pic_thumb) {
// Galerie Slides
var pic = pic_thumb;
myFx = new Fx.Scroll('gallery');
myFx.toElement('medium_slice_image_'+(pic));
}
<div id="gallery" style="overflow:hidden;position:relative;z-index:2;">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:middle; text-align: center;">
<a id="link_0" href=""><img id="medium_slice_image_0" src=""></a>
</td>
<td style="vertical-align:middle; text-align: center;">
<a id="link_1" href=""><img id="medium_slice_image_1" src=""></a>
</td>
</tr>
</table>
</div>
.....
<div id='thumb_{$counter}' style="width:81px;height:48px;float:left;margin-top:1px;margin-left:7px;" onclick="slide({$counter})">
До сих пор я использовал для большого изображения для предварительного просмотра также квадратные изображения, но я бы предпочел использовать оригинальные изображения для предварительного просмотра, сохраняя исходное соотношение сторон, чтобы широкое изображение было, например. вертикально по центру.
Моя проблема в том, что fx.scroll использует размер изображения в качестве точки для прокрутки. так что два меньших изображения (150x150 пикселей) будут отображаться вместе в окне предварительного просмотра (300x300 пикселей).
Я понятия не имею, как я могу решить эту проблему, чтобы каждое изображение использовало размер 300x300 пикселей для прокрутки, даже если он меньше и центрирован.
Пожалуйста, помогите мне. Спасибо