[Slider] Pomoc przy pisaniu Opcje

[SpiJay]

Witajcie !

Pilnie potrzebuję pomocy z "wprawieniem w ruch" następującego fragmentu mojej strony.

(IMG:http://spijay.com/demo/slider.png)

KOD (wyszczuplony):

[HTML] pobierz, plaintext 
			<div id="slide">
				<div class="slide-desc">
					<h1>Wino nazwa1</h1>
					<div id="kraj">Kraj: <span>Włochy</span></div>
					<div id="smak">Smak: <span>słodkie</span></div>
					<div id="kolor" style="padding-bottom: 15px;">Kolor: <span>Czerwone</span></div>
					<div id="opis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt, sapien nec eleifend viverra, lorem lacus mattis nisl, in semper nisl enim nec diam.</div>
					<div class="price">
						<span>Cena: <span style="padding: 0 !important;">250zł</span></span>
						<a class="more" href="#">Szczegóły</a>
					</div>
				</div>
				<img src="images/slide.jpg" />
			</div>
 
			<div style="clear: both; margin-bottom: 25px;"></div>
 
			<div id="mini-slide">
				<div class="mini-wraper">
					<div class="mini-desc">
						<div class="mini-name">Nazwa wina</div>
						<div><span class="color cena" cena="240">Cena:</span><br/>210zł</div>
						<div><span class="color kraj" kraj="Szwecja">Kraj:</span><br/>Szwecja</div>
						<div><span class="color smak" smak="słodkie">Smak:</span><br/>słodkie</div>
						<div><span class="color kolor" kolor="czerwone">Kolor:</span><br/>Czerwone</div>
					</div>
					<img src="thumbs/1.jpg" slide="fullsize/1.jpg" class="quick" nazwa="Wino nazwa1" cena="250zł" kraj="Włochy" smak="słodkie" kolor="czerwone" opis="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt, sapien nec eleifend viverra, lorem lacus mattis nisl, in semper nisl enim nec diam." />
				</div>
				<div class="mini-wraper">
					<div class="mini-desc">
						<div class="mini-name">Nazwa wina</div>
						<div><span class="color cena" cena="240">Cena:</span><br/>220zł</div>
						<div><span class="color kraj" kraj="Włochy">Kraj:</span><br/>Włochy</div>
						<div><span class="color smak" smak="słodkie">Smak:</span><br/>słodkie</div>
						<div><span class="color kolor" kolor="czerwone">Kolor:</span><br/>Czerwone</div>
					</div>
					<img src="thumbs/2.jpg" slide="fullsize/2.jpg" class="quick" nazwa="Wino nazwa2" cena="250zł" kraj="Włochy" smak="słodkie" kolor="czerwone" opis="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt, sapien nec eleifend viverra, lorem lacus mattis nisl, in semper nisl enim nec diam." />
				</div>
				<div class="mini-wraper">
					<div class="mini-desc">
						<div class="mini-name">Nazwa wina</div>
						<div><span class="color cena" cena="240">Cena:</span><br/>230zł</div>
						<div><span class="color kraj" kraj="Chorwacja">Kraj:</span><br/>Chorwacja</div>
						<div><span class="color smak" smak="słodkie">Smak:</span><br/>słodkie</div>
						<div><span class="color kolor" kolor="czerwone">Kolor:</span><br/>Czerwone</div>
					</div>
					<img src="thumbs/3.jpg" slide="fullsize/3.jpg" class="quick" nazwa="Wino nazwa3" cena="250zł" kraj="Włochy" smak="słodkie" kolor="czerwone" opis="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt, sapien nec eleifend viverra, lorem lacus mattis nisl, in semper nisl enim nec diam." />
				</div>
				<div class="mini-wraper">
					<div class="mini-desc">
						<div class="mini-name">Nazwa wina</div>
						<div><span class="color cena" cena="240">Cena:</span><br/>240zł</div>
						<div><span class="color kraj" kraj="Francja">Kraj:</span><br/>Francja</div>
						<div><span class="color smak" smak="słodkie">Smak:</span><br/>słodkie</div>
						<div><span class="color kolor" kolor="czerwone">Kolor:</span><br/>Czerwone</div>
					</div>
					<img src="thumbs/4.jpg" slide="fullsize/4.jpg" class="quick" nazwa="Wino nazwa4" cena="250zł" kraj="Włochy" smak="słodkie" kolor="czerwone" opis="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt, sapien nec eleifend viverra, lorem lacus mattis nisl, in semper nisl enim nec diam." />
				</div>
[HTML] pobierz, plaintext 

Zasada miałaby być taka jak na obrazku, aczkolwiek ładowanie zdjęć do dużego slidera, miałoby się także odbywać po kliknięciu na miniaturkę.
Brak auto przewijania.

Proszę o pomoc,
pozdrawiam !

Ten post edytował SpiJay 1.04.2013, 23:59:51

[SpiJay]

Poprawilem gorny, przykladowy kod - moj blad.

Chciałbym uzyskać pomoc, dlatego piszę tutaj.
Uczę się zasady działania i zachowania elementow w jQuery i taki slider, to dla mnie nie lada wyzwanie.

czemu w atrybucie rel znajduje sie opis zdjecia? chcesz zeby Google zeswirowalo?

i tutaj wlasnie pytanie, jaki wplyw na np seo ma budowanie takich elementow:

[HTML] pobierz, plaintext 
<img src="male.jpg" slide="duze.jpg" nazwa="nazwa" rodzaj="test" kolor="czerwone" opis="bla bla" />
[HTML] pobierz, plaintext 

Dotychczas zrobilem cos takiego:

[JAVASCRIPT] pobierz, plaintext 
				$('.mini-wraper').click(function () {
					var duzy = $(this).find('img').attr('slide');
					var duzy_aktywny = $('#slide img').attr('src');
 
					if(duzy != duzy_aktywny) {
						$('.slide-desc').fadeOut(400,function () {
							$('#slide img').fadeOut(400,function () {
								$(this).attr("src", duzy).fadeIn(400,function () {
									$('.slide-desc').fadeIn(400);
								});
 
							});
						});
					}
				});
[JAVASCRIPT] pobierz, plaintext 

Adresy do obrazow beda wyswietlane z bazy.

Tam gdzie sa te 4 obrazki miniaturek, bedzie wynik w petli z bazy, dlatego ten slider nie ma byc wymagajacy i ma korzystac z danych dostepnych w atrybutach przypisanych do obrazkow. Pozdrawiam !

PS. Chyba, że masz lepsze rozwiazanie ?

Ten post edytował SpiJay 2.04.2013, 00:03:44