galeria zdjec Opcje

[MitS]

Witam!

Mam problem ze stworzeniem galerii zdjęć w js (tzn galerie mam zrobioną ale chodzi o jeden efekt)
Ponizej zapodaje kod, a za chwilke wszystko wytłumaczę...

[PHP] pobierz, plaintext 
<?php
...
...
...
<div class="table">
	<div class="tr">';
 
	while(($file = readdir($fds)) !== false)
	{
			if ($file != "." && $file != "..")
			{
		$i++;
 
		echo '
		<div class="td">
			<div class="img-box">
				<a href="./_gallery/_big/_'.$gl_dir.'/'.$file.'" onfocus="blur();">
					<img class="no-border gimg" src="./_gallery/_small/_'.$gl_dir.'/'.$file.'" alt="" />
				</a>
				<div class="number">0'.$i.'</div>
				<div class="loup">
					<a href="./_gallery/_big/_'.$gl_dir.'/'.$file.'" onfocus="blur();">
						<img class="no-border" src="./_gfx/loup.jpg" alt="" />
					</a>
				</div>
			</div>
		</div>';
 
	if(($gl_counter >= $gl_cols) && (($gl_counter % $gl_cols) == 0))
		{
		echo '
		</div>
		<div class="tr">';
	}					
	$gl_counter++;
}
}	
echo '</div>';
closedir($fdb);
closedir($fds);
echo '
</div>
...
...
...
?>
[PHP] pobierz, plaintext 

jest taka linijka ktora odpowiedzialna jest za wyswietlanie zdjec wiekszych od miniaturek ale o tej samej nazwie (tylko w innym folderze).

<a href="./_gallery/_big/_'.$gl_dir.'/'.$file.'" onfocus="blur();">
<img class="no-border gimg" src="./_gallery/_normal/_'.$gl_dir.'/'.$file.'" alt="" />
</a>


potem mam petle, ktora wyswietla wszystkie obrazki z miniaturkami w odpowiednim miejscu:
<div class="img-box">
<a href="./_gallery/_big/_'.$gl_dir.'/'.$file.'" onfocus="blur();">
<img class="no-border gimg" src="./_gallery/_small/_'.$gl_dir.'/'.$file.'" alt="" />
</a>
<div class="number">0'.$i.'</div>
<div class="loup">
<a href="./_gallery/_big/_'.$gl_dir.'/'.$file.'" onfocus="blur();">
<img class="no-border" src="./_gfx/loup.jpg" alt="" />
</a>
</div>
</div>

i chcem zrobic by po kliknieciu w taką miniature pokazalo mi sie zdjecie bez przeladowania strony w polu wyżej czyli tu:
<a href="./_gallery/_big/_'.$gl_dir.'/'.$file.'" onfocus="blur();">
<img class="no-border gimg" src="./_gallery/_normal/_'.$gl_dir.'/'.$file.'" alt="" />
</a>

jak to uczynic bez przeladowania strony ?

[vokiel]

Do każdego obrazka przypiszesz funkcję, która zamieni src obrazka z podglądem na dany z miniaturki (tyle, że duży rozmiar oczywiscie )
Rozumiem, że masz jeden duży obrazek na stronie, miniaturki do reszty, i chcesz, żeby po kliknięciu w miniaturkę w tym dużym sie wyswietlało powiększone (bez przeładowania strony oczywiście

jak masz:

[PHP] pobierz, plaintext 
<?php
echo '
<a href="./_gallery/_big/_'.$gl_dir.'/'.$file.'" onfocus="blur();">
<img class="no-border gimg" src="./_gallery/_normal/_'.$gl_dir.'/'.$file.'" alt="" />
</a>
';
?>
[PHP] pobierz, plaintext 

to obrazek otwiera Ci się normalnie w oknie...
zatem trzeba zrezygnować z <a href=""> na rzecz javy, żeby było bez przeładowania.

skoro miniatruki i duże rozmiary masz takie same, tlko różnią sie ścieżką, to mógłbyś zrobić mniej więcej tak (kod nie jest jakoś kompletny do użycia bo pisze z palca):

[PHP] pobierz, plaintext 
<?php
echo '
	<script type="text/javascript">
	  function podmien(sciezka)
	  {
	   document.images["podglad"].src="./_gallery/_big/"+sciezka;
	   }
	</script>
 
<div>
<img name="podglad" class="no-border gimg" src="./_gallery/_normal/_'.$gl_dir.'/'.$file.'" alt="" />
</div>';
 
//tutaj ta petla robiaca miniaturki z tym, że: 
echo '
<img onclick="podmien('.$gl_dir.'/'.$file.')" class="no-border gimg" src="./_gallery/_normal/_'.$gl_dir.'/'.$file.'" alt="" />
';
?>
[PHP] pobierz, plaintext 

spróbój tak, mam nadzieję, że to coś pomoże, może to nie jest gotowiec do użycia, ale pokazuje tylko sposób, ideę...

ja bym to robił trochę inaczej, bo jeśli masz w tych folderach tylko zdjęcia, to proponowałbym je nazwać po kolei indeksami '1.jpg', '2.jpg'... itd, potem w php sprawdzić tylko ile jest tych zdjęć, i zrobić pętlę, która wyświetli miniaturki od 1 do ilości tych zdjęć, będzie trochę szybciej (ale tylko jeśli nazwy tych zdjęć nie są jakoś szczególnie ważne), będzie czytleniej w kodzie bo będziesz przekazywał do funkcji po prostu id zdjęcia -liczbę.
Możesz zrobić jedno duże zdjęcie, a pod spodem np 5 miniaturek, i po kliknięciu kolejnej zmienić obrazek w dużym, a także w miniaturkach...


działaj

[MitS]

Ok napotkalem na problem ...

moj caly kod galerii wygląda tak:
http://rafb.net/p/YX9RaT60.html

to obrazek otwiera Ci się normalnie w oknie...
zatem trzeba zrezygnować z <a href=""> na rzecz javy, żeby było bez przeładowania.

napisales ze trzeba zrezygnować z tego znacznika a np. przyszla taka sytuacja że potrzebuje go to jak mam zrobić by w nim (href="") był link obrazka tego co wybralem w miniaturkach ...

może to zobrazuje


w ogole to mam 3 foldery o nazwach:
_big
_normal
_small

to co na obrazku widać w dolnej czesci tyczy sie folderu _small
wyżej to co obsluguje js dotyczy _normal
zaś folderu _big bedzie tyczył sie skrypt o nazwie lightbox - > http://www.huddletogether.com/projects/lightbox2/

i ten link ktory mowiles bym zlikwidowal tyczy sie wlasnie tego lightboxa
<a href="./_gallery/_big/_women/001.jpg" rel="lightbox[roadtrip]" onfocus="blur();">
<img name="podglad" class="himg nrm_img" src="./_gallery/_normal/_women/001.jpg" alt="" />
</a>

no i wlasnie tu jest problem bo nie wiem jak zrobić by to co zaproponowales wspolgralo z lightboxem czyli zamiast 001.jpg w linku ladowal sie odpowiedni numerek w zaleznosci tego jaki sie wybralo w miniaturkach.

Macie jakies pomysly ?

Ten post edytował MitS 18.03.2007, 10:04:22