Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [PHP][CSS] Galeria - Jak wyświetlić duży obrazek?, Problem podczas tworzenia galerii
PaulPavello
post 17.08.2011, 23:03:27
Post #1





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 17.08.2011

Ostrzeżenie: (0%)
-----


Witam. Piszę stronkę na której chcę umieścić mini galerię. Nie chcę używać gotowych skryptów, więc tworzę sam galerię i mam już coś takiego:
  1. <?php
  2. printf("<center><a href='index.php?mod=galerie'>Wróć do widoku wszystkich galeri</a></center>");
  3. $licz=1;
  4. $katalog_galeri=$_GET[kat];
  5. $krotnosc_pomniejszenia=$_GET[pomn];
  6. $obiekt_zdjecia=dir($katalog_galeri);
  7. printf("<center><table border='3'><tr>");
  8. while($zdjecie = $obiekt_zdjecia->read())
  9. {
  10. if($zdjecie!='.' && $zdjecie!='..' && $zdjecie!='info.txt')
  11. {
  12. $pelny_adres=$katalog_galeri.$zdjecie;
  13. $zdjecie_rozmiar=getimagesize($pelny_adres);
  14. $zdjecie_width=$zdjecie_rozmiar[0]/$krotnosc_pomniejszenia;
  15. $zdjecie_height=$zdjecie_rozmiar[1]/$krotnosc_pomniejszenia;
  16. if($licz%3==0)
  17. {
  18. printf("<td><img src='$pelny_adres' width='$$zdjecie_width' height='$zdjecie_height'></td></tr><tr>");
  19. $licz++;
  20. }
  21. else
  22. {
  23. printf("<td><img src='$pelny_adres' width='$$zdjecie_width' height='$zdjecie_height'></td>");
  24. $licz++;
  25. }
  26. }
  27. }
  28. printf("</tr></table></center>");
  29. ?>


Owy skrypt ma za zadanie wyświetlić z danego katalogu wszystkie obrazki. Nie jest on zabezpieczony przeciwko jakimś innym typom plików, gdyż założyłem z góry, że w katalogu z galeriami znajdą się tylko i wyłącznie pliki z obrazkami a także plik info.txt potrzebny do wyświetlenia wszystkich galerii znajdujących się na stronie. Użytkownik po wybraniu konkretnej galerii przenoszony jest do powyższego skryptu, który jak narazie wyświetla tylko miniaturki obrazków z danej galerii, lecz nie wiem jak zrobić żeby teraz na tym co mam wygenerowane na stronie został wyświetlony <div>, który skonfigurowałem w następujący sposób:

  1. #krycie
  2. {
  3. width: 100%;
  4. height: 100%;
  5. position: fixed;
  6. z-index: 100;
  7. top: 0px;
  8. left: 0px;
  9. background-image: url(images/gallery.png);
  10. background-repeat: repeat;
  11. }



Wiadomo, można zrobić w linku odnośnik do tej samej strony i ją przeładować i jednym IF'em załatwić wyświetlenie div'a, ale niestety biorę pod uwagę, że w galerii mogą być zdjęcia duże i dużo ich może w niej być co utrudnia załadowanie strony na nowo i pewnie spowolni skrypt albo go unieruchomi. Pytanie do was jest takie: czy da się zrobić tak żeby po kliknięciu ładował się sam div (a nie cała strona od nowa)questionmark.gif

Ten post edytował PaulPavello 17.08.2011, 23:07:06
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
PaulPavello
post 20.08.2011, 16:14:32
Post #2





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 17.08.2011

Ostrzeżenie: (0%)
-----


Pogrzebałem trochę w necie i pokombinowałem z tym co wysłał kolega wyżej i mam teraz coś takiego:


  1. $(document).ready(function(){
  2.  
  3. $('table img').click(function() { // #table to id z <table>
  4.  
  5. var src = $(this).attr('src');
  6. $('#krycie').removeAttr('background');
  7. $('#krycie').css('background-image', 'url(images/gallery.png)');
  8. $('#krycie').css('position', 'fixed');
  9. $('#krycie').css('width', '100%');
  10. $('#krycie').css('height', '100%');
  11. /* var div = */$('#kycie').html('<center><img src="'+src+'"> class="krycie"</center>');
  12. // alert(src);
  13. });
  14. $('#krycie').click(function() {
  15. $('#krycie').css('background', '#FFFFFF');
  16. $('#krycie').css('position', 'fixed');
  17. $('#krycie').css('width', '0%');
  18. $('#krycie').css('height', '0%');
  19.  
  20. });
  21.  
  22. });


Puki co działa to tak, że jak kliknę na obrazek to wyświetla mi się tło takie jak chcę, ale niestety nie jest przeźroczyste - obrazek ma przeźroczystość, jak to naprawić?
A poza tym na tle nadal nie widać obrazka:(


Ładuje mi się już obrazek trochę niepotrzebnego kodu wywaliłem:
  1. $(document).ready(function(){
  2.  
  3. $('table img').click(function() { // #table to id z <table>
  4.  
  5. var src = $(this).attr('src');
  6. $('#krycie').css('position', 'fixed');
  7. $('#krycie').css('width', '100%');
  8. $('#krycie').css('height', '100%');
  9. $('#krycie').html('<center><img src="'+src+'" width="800" height="600"></center>');
  10. });
  11. $('#krycie').click(function() {
  12. $('#krycie').css('width', '0%');
  13. $('#krycie').css('height', '0%');
  14. $('#krycie img').detach();
  15.  
  16. });
  17.  
  18. });


Niestety tło tego DIV'a nadal jest takie jakby był to obrazek bez przeźroczystości, a szkoda, wie ktoś jak temu zaradzićquestionmark.gif


NAPRAWIŁEM! Miałem w CSSie dołożony do #krycie background: #FFFFFF; i to psuło efekt;)

Ten post edytował PaulPavello 20.08.2011, 16:40:23
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 20:35