Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: galeria zdjec
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
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ę...

  1. <?php
  2. ...
  3. ...
  4. ...
  5. <div class="table">
  6. <div class="tr">';
  7.  
  8. while(($file = readdir($fds)) !== false)
  9. {
  10. if ($file != "." && $file != "..")
  11. {
  12. $i++;
  13.  
  14. echo '
  15. <div class="td">
  16. <div class="img-box">
  17. <a href="./_gallery/_big/_'.$gl_dir.'/'.$file.'" onfocus="blur();">
  18. <img class="no-border gimg" src="./_gallery/_small/_'.$gl_dir.'/'.$file.'" alt="" />
  19. </a>
  20. <div class="number">0'.$i.'</div>
  21. <div class="loup">
  22. <a href="./_gallery/_big/_'.$gl_dir.'/'.$file.'" onfocus="blur();">
  23. <img class="no-border" src="./_gfx/loup.jpg" alt="" />
  24. </a>
  25. </div>
  26. </div>
  27. </div>';
  28.  
  29. if(($gl_counter >= $gl_cols) && (($gl_counter % $gl_cols) == 0))
  30. {
  31. echo '
  32. </div>
  33. <div class="tr">';
  34. }
  35. $gl_counter++;
  36. }
  37. }
  38. echo '</div>';
  39. closedir($fdb);
  40. closedir($fds);
  41. echo '
  42. </div>
  43. ...
  44. ...
  45. ...
  46. ?>


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 questionmark.gif?
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 winksmiley.jpg )
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 winksmiley.jpg

jak masz:
  1. <?php
  2. echo '
  3. <a href="./_gallery/_big/_'.$gl_dir.'/'.$file.'" onfocus="blur();">
  4. <img class="no-border gimg" src="./_gallery/_normal/_'.$gl_dir.'/'.$file.'" alt="" />
  5. </a>
  6. ';
  7. ?>

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):

  1. <?php
  2. echo '
  3. <script type="text/javascript">
  4. function podmien(sciezka)
  5. {
  6.  document.images["podglad"].src="./_gallery/_big/"+sciezka;
  7.  }
  8. </script>
  9.  
  10. <div>
  11. <img name="podglad" class="no-border gimg" src="./_gallery/_normal/_'.$gl_dir.'/'.$file.'" alt="" />
  12. </div>';
  13.  
  14. //tutaj ta petla robiaca miniaturki z tym, że: 
  15. echo '
  16. <img onclick="podmien('.$gl_dir.'/'.$file.')" class="no-border gimg" src="./_gallery/_normal/_'.$gl_dir.'/'.$file.'" alt="" />
  17. ';
  18. ?>


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 smile.gif
MitS
Ok napotkalem na problem ...

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

Cytat
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 winksmiley.jpg


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 questionmark.gif?
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.