Forum PHP.pl > [css] lub [js]galeria

Pomoc - Szukaj - Użytkownicy - Kalendarz

peter13135

19.01.2009, 16:39:10

Witam.
Chciałbym zrobić galerię w CSS, podobną do tej która jest na allegro, czyli jedno większe okienko w którym jest fotka, a na dole miniaturki, po kliknięciu w miniaturkę zmienia sie to "większe okienko" na fotke w która sie kliknęło .
Mam nadzieje że jakoś mnie zrozumiecie, jak powiedziałem wolałbym żeby to było w css bo ten język jest dla mnie bardziej czytelny niż js.

Patrzyłem w kod źródłowy na allegro ale jest on dla mnie nie czytelny, proszę o pomoc
Pozdrawiam

erix

19.01.2009, 17:46:00

W samym CSS tego nie osiągniesz. Podobny temat: Temat: JavaScript_galeria_zdjec_jak_na_allegro

peter13135

19.01.2009, 19:08:44

poszukałem troche na necie i coś znalazłem, i mam coś takiego

click

niby działa jak należy, ale czy da sie to wrzucić jakiejś ramki??

edit:// poszukałem na necie i znalazłem na innej stronie prosty skryptcik (js) wygląda w miarę przejrzyście ale ja i tak mam coś źle
link tutaj
click

jak widać po kliknęciu na minuaturkę, miniaturka sie nei zmienia, jaka jest przyczyna?

nikt nie pomoże ?

ziqzaq

19.01.2009, 20:12:54

Wywala ci skrypt przez ten kod:

[PHP] pobierz, plaintext 
<?php
var pictures_big = window.opener.pictures_big;
?>
[PHP] pobierz, plaintext

który ma za zadanie pobrać listę obrazków (tablicę). Nie pobiera tej listy a więc nie ma jak zadziałać.
A więc tworzymy tablicę z obrazkami (to jak sobie stworzysz, lub skąd pobierzesz te obrazki to już od ciebie zależy)

[PHP] pobierz, plaintext 
<?php
//var pictures_big = window.opener.pictures_big;
var pictures_big = Array('http://photos04.otomoto.pl/photos/original/M1/12/70/M1127027_1.jpg','http://photos04.otomoto.pl/photos/original/M1/12/70/M1127027_2.jpg');
?>
[PHP] pobierz, plaintext

zmieniamy indeksy w wywołaniu funkcji (indeksy zaczynają sie od zera!)

[PHP] pobierz, plaintext 
<?php
<ul>
<li><a href="java script:loadBigPicture(0);"><img src="http://photos04.otomoto.pl/photos/original/M1/12/70/M1127027_1.jpg" alt=" " /></a></li>
<li><a href="java script:loadBigPicture(1);"><img src="http://photos04.otomoto.pl/photos/original/M1/12/70/M1127027_2.jpg" alt=" " /></a></li>
</ul>
?>
[PHP] pobierz, plaintext

i voila, działa.

peter13135

19.01.2009, 20:21:51

podziękował ;]

edit:// skrypt jak najbardziej działa, ale czy można tak zrobić by js ładował sobie pliki z folderu do tablicy?? w php to nie stanowi problemu, natomiast js jest dla mnie obce

ziqzaq

20.01.2009, 09:04:22

Więc jaki problem w php zapodać te pliki do tablicy w js?

[PHP] pobierz, plaintext 
<head>
<script ...>
var pictures_big = Array(
<?php
$i = 0;
foreach($moje_pliki as $plik){
     echo ($i>0 ? ',' : '').'''.$plik.''';
     $i++;
}
?>
);
</script>
</head>
[PHP] pobierz, plaintext

Można tą tablicę tworzyć po załadowaniu listy obrazków na stronę - tzn. pobrać przez js z listy obrazków ich ścieżki i zapodać do tablicy "pictures_big". Tutaj świetnie sprawdzają się frameworki bo jeśli te obrazki miałyby klasę np. "galeryjka" to za pomocą np. jQuery pobierasz te obrazki tak: $('.galeryjka'), i masz już obiekt jQuery z wszystkimi obrazkami.
Osobiście poleciłbym ci coś takiego. Tworzysz tylko odpowiednią (uwaga na id, i klasy) listę obrazków (miniaturek), resztą zajmuje się plugin jquery. Do działania wymagana jest biblioteka jQuery i ten plugin który ci podałem (zauważ na końcu js/jquery.gallery.js masz wywoływanie tej galerii, możesz to usunąć i sam wywołać galerię lub zostawić jako "autowywoływanie").
Ogólnie o użytkowanie tej galerii w jquery chyba będzie dla ciebie łatwiejsze - musisz sobie tylko dostosować html i css.

peter13135

20.01.2009, 15:05:22

może i łatwiejsze, ale większa satysfakcja jest wtedy gdy zrobie coś sam, lub przynajmniej rozumiem mechanizm działania

edit://

http://laczek.xaa.pl/galeria/

takie coś mi wyszło, mi się podoba, jeszcze może połączę to z php żeby samo z folderu ładowało i bedzie gitara

erix

20.01.2009, 16:59:34

Cytat

jeszcze może połączę to z php żeby samo z folderu ładowało i bedzie gitara

http://phpedia.pl/wiki/RecursiveDirectoryIterator

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.