Адаптивный слайдер

[ddale]

Еще раз всем привет. Надеюсь я не утомлю вас вопросами.

Стоит преинтереснейшая задача. Необходимо сделать слайдер изображений. Алгоритм такой: изображение растягивается на весь экран. Если оно может влезть по ширине, но не может по высоте, то двигается вверх или вниз. Если изображение влезает по высоте, но не влезает по ширине, то двигаетсяя влева или вправо. Движение изображения происходит не полностью, а только на так, чтобы показать скрытую часть изображения (это мы подманиваем пользователя).

Т.е. пользователь сдвигает мышку в зону близ одного из краев области просмотри и наблюдает плавное движение картинки, а потом картинка плавно возвращается на место.



Демонстрационная гифка


Как такое вообще сделать? Принимается любой конструктивный бред.

[Deff]

ddale,
Забацайте гиф анимацию итогового действия, вместе с курсором пользователя - имхо объяснения будут короче... или попросите кого нибудь пояснив задачу - иначе разбор полётов будет бесконечным,
Итоговая реализация в точном соотвествии с гифкой в разы кароче(как показывает практика

[ddale]

Deff,
Гифку нельзя. Потому что изображения будет вставлять пользователь и изображения будут и .jpg и .png. Да еще буду делать, чтобы при клике изображение перелистывались. Нужно универсальное решение. Или просто подсказка. Я совсем сбился. Думал сначала, сделать обертку под изображение с шириной в 110% и позиционирование в этой обертке самого изображения так, чтобы оно не влезало с обоих сторон. Но вариант гиблый..

[Deff]

ddale,

Гифку нельзя.

Я про демонстрационную = по описанию долго вникать и корректировать

[ddale]

Deff,

[Deff]

ddale,
Вродь понял про горизонталь - буду думать...

Зы - а вопрос такой: Начальная позиция изображения большего обрамлялки - по центру или по левому краю ?

[ddale]

Deff,
Начальная позиция по центру.

[Serg_pnz]

Это? http://demos111.mootools.net/Scroller (нижний пример)

[ddale]

Serg_pnz,
Вроде да. Только вот я не пойму как его встроить, чтобы он заработал. Я загрузил "MooTools Core 1.4.5 without compatibility" и подключил.
А также взял JS:

window.addEvent('domready', function(){
			var scroll1 = new Scroller('drag', {area: 150, velocity: 1});
			var scroll2 = new Scroller('mousemove', {area: 100, velocity: 1});
			
			// Drag
			$('drag').addEvent('mousedown', function() {
				this.setStyle('cursor', 'url(/demos/Scroller/closedhand.cur), move');
				scroll1.start();
			});
			$('drag').addEvent('mouseup', function() {
				this.setStyle('cursor', 'url(/demos/Scroller/openhand.cur), move');
				scroll1.stop();
			});
			
			
			// Mousemove
			$('mousemove').addEvent('mouseover', scroll2.start.bind(scroll2));
			$('mousemove').addEvent('mouseout', scroll2.stop.bind(scroll2));
		});

HTML:

<div id="mousemove">
    <img alt="" src="images/content/img_1.jpg" class="inside move">
</div>

CSS:

#mousemove, #drag {
    width: 100%;
    height: 100%;
    border: 0;
    overflow: hidden;
    margin: 0 auto;
}
 
#drag { 
    cursor: url(openhand.cur), move;
}
 
.inside {
    width: 2000px;
    height: 1000px;
}
 
.move {
    /*background: #eee url(pattern1.gif);*/
}
 
.drag {
}

Вылезает ошибка

Uncaught TypeError: Cannot call method 'addEvent' of null index.html:28
(anonymous function) index.html:28
returns mootools-core-1.4.5-full-compat.js:1424
(anonymous function) mootools-core-1.4.5-full-compat.js:1429
(anonymous function) mootools-core-1.4.5-full-compat.js:2899
Element.Methods.Events.fireEvent mootools-core-1.4.5-full-compat.js:2898
(anonymous function) mootools-core-1.4.5-full-compat.js:3605
(anonymous function) mootools-core-1.4.5-full-compat.js:3609
returns mootools-core-1.4.5-full-compat.js:1424

Вот строка 28:

$('drag').addEvent('mousedown', function() {

[Deff]

ddale,
mootools с jQuery не оч в дружбе