Dostałem zlecenie aby napisać galerię, taką trochę nietypową.
Wszystko mam tylko nie mogę sobie poradzić z odpowiednim wyświetlaniem obrazków. Galeria jest w tym nietypowa, że zdjęcia w niej są bardzo długie, ale nie wysokie rzędu 10000px * 1000px (dziesięć tysięcy * tysiąc). Takie zdjęcie ma być przewijane w pionie i poziomie w swoim divie. Tyle, że w poziomie ma się przewijać w kółko (sprawiać wrażenie sklejonego cylindra), a w pionie tylko do krawędzi (panorama nie jest sferyczna a cylindryczna).
Na razie zabrałem się za przewijanie poziome i utknąłem na takim czymś:

[HTML] pobierz, plaintext 
<div class = "panorama"><div class = "left">&lt;</div><div class = "center">&FilledSmallSquare;</div><div class = "right">&gt;</div><img src = "panorama.jpg" alt = "p"/></div>
[HTML] pobierz, plaintext 

To jest ostylowane cssem:

[HTML] pobierz, plaintext 
.panorama {width: 500px; height: 300px;  overflow: hidden; position: relative;}
.panorama .left, .panorama .right, .panorama .center {width: 30%; height: 100%; position: absolute;}
.panorama .left {left: 0; text-align: left}
.panorama .right {right: 0; text-align: right}
.panorama .center {right: 35%; text-align: center}
.panorama img {height: 150%; width: auto;}
[HTML] pobierz, plaintext 

W jquery coś wykombinowałem takiego:

[HTML] pobierz, plaintext 
var predkosc = 2000;
var skok = 200;
$('.right').mouseover(function() {
	$('.panorama').children('img').stop().animate({marginLeft : '+=' + skok + 'px'}, predkosc);
});
$('.center').mouseover(function() {
	$('.panorama').children('img').stop();
});
$('.left').mouseover(function() {
	$('.panorama').children('img').stop().animate({marginLeft : '-=' + skok + 'px'}, predkosc);
});
$('.panorama').mouseleave(function() {
	$('.panorama').children('img').stop();
});
[HTML] pobierz, plaintext 

To co tu mam, przewija mi obrazek ale skokowo. Tzn jeśli wjadę myszką na diva left lub right, to przewinie mi się o 200px i staje. muszę myszą wyjechać z tego diva i po ponownym wjechaniu znowu robi taki skok.
Nie wiem czy w ogóle od tej strony się za to zabrałem:)). No nie mam przewijania obrazka w kółko.
Pomocy..

Może ten link będzie przydatny:

http://www.jquery4u.com/plugins/10-jquery-...s/#.UHLbKU0xpr1

Technicznie efekt panoramy osiąga się przez dołożenie drugiego kontenera z tym samym zdjęciem po tej stronie, do której zmierza użytkownik. Gdy kontener z 'nowym' obrazkiem zajmie całą stronę, 'stary' należałoby skasować i tyle. Oczywiście, zdjęcie musi być prawdziwie panoramiczne, inaczej nic z tego nie wyjdzie.

Przewijanie możesz zrobić na dwa sposoby.
- pierwszy - przyciskami, za pomocą funkcji animate(), ale z parametrem 'linear'. Dlaczego 'linear'? Bo wtedy element przesuwa ze stałą prędkością. Domyślnie jest 'swing', czyli efekt rozpędzania się i zwalniania. Lepiej jest zrobić przyciski aktywne (przycisk myszy wciśnięty/kursor wjeżdża na przycisk = przewijamy) niż pasywne (kliknięcie/wjazd przewija o x pikseli). Ustawiasz zdarzenie 'mousedown' (dla klikania)/'mouseenter' (dla najechania) (zaczyna przewijać) i 'mouseup'/'mouseleave' (wywołuje funkcję stop()).
- drugi - prostszy dla obu stron - przeciąganie myszą. Ustawiasz, żeby po zdarzeniu 'mousedown' odczytał poziomą pozycję myszy i zapisał ją, a następnie dodawał lub odejmował od margin-left zmianę pozycji myszy względem parametru startowego.

Tak, wiem, że linear animuje ze stałą prędkością. Takie szczegóły na potem, teraz chcę zrobić odpowiednie przewijanie w kółko.
Pomyślałem, że mogę zmienną skok ustawić na jakąś bardzo dużą wartość, tak żeby panorama mogła przewinąć się kilka razy. To zapobiegnie takiemu skakaniu. Do tego dobiorę odpowiedni czas, żeby animacja nie szła za szybko. Mogę pobrać długość obrazka i pomnożyć ją np przez 5 i będę miał duży skok.
Powiedzcie mi tylko czy width() pobierze mi rzeczywistą długość czy taką jaka na stronie jest ustawiona np przez css dla tagu img?
To, żeby dołożyć drugi obrazek z lewej jeśli margines lewy będzie większy od 0 lub z prawej jeśli lewy będzie na minusie większy od długości obrazka, to też wiem, ale nie wiem jak to zrealizować.

Zanim miałem jeszcze trochę czasu rano poprawiłem skrypt według tego co napisałem powyżej.

[HTML] pobierz, plaintext 
var dlugosc = $('.panorama').children('img').width();
var skok = dlugosc * 5;
var predkosc = skok * 5;
$('.right').mouseenter(function() {
	$('.panorama').children('img').stop().animate({marginLeft : '+=' + skok + 'px'}, predkosc, 'linear');
});
$('.right').mouseleave(function() {
	$('.panorama').children('img').stop();
});
$('.left').mouseenter(function() {
	$('.panorama').children('img').stop().animate({marginLeft : '-=' + skok + 'px'}, predkosc, 'linear');
});
$('.left').mouseleave(function() {
	$('.panorama').children('img').stop();
});
[HTML] pobierz, plaintext 

No i działa tak jak zakładałem, ale internet explorer klatkuje, a chrome nie potrafi pobrać długości w pierwszej linii.