[PHP][CSS] Galeria - Jak wyświetlić duży obrazek?, Problem podczas tworzenia galerii Opcje

[PaulPavello]

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:

[PHP] pobierz, plaintext 
<?php
	printf("<center><a href='index.php?mod=galerie'>Wróć do widoku wszystkich galeri</a></center>");
	$licz=1;
	$katalog_galeri=$_GET[kat];
	$krotnosc_pomniejszenia=$_GET[pomn];
	$obiekt_zdjecia=dir($katalog_galeri);
	printf("<center><table border='3'><tr>");
	while($zdjecie = $obiekt_zdjecia->read())
	{
		if($zdjecie!='.' && $zdjecie!='..' && $zdjecie!='info.txt')
		{
			$pelny_adres=$katalog_galeri.$zdjecie;
			$zdjecie_rozmiar=getimagesize($pelny_adres);
			$zdjecie_width=$zdjecie_rozmiar[0]/$krotnosc_pomniejszenia;
			$zdjecie_height=$zdjecie_rozmiar[1]/$krotnosc_pomniejszenia;
			if($licz%3==0)
			{
				printf("<td><img src='$pelny_adres' width='$$zdjecie_width' height='$zdjecie_height'></td></tr><tr>");
				$licz++;
			}
			else
			{
				printf("<td><img src='$pelny_adres' width='$$zdjecie_width' height='$zdjecie_height'></td>");
				$licz++;
			}
		}
	}
	printf("</tr></table></center>");
?>
[PHP] pobierz, plaintext 

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:

[HTML] pobierz, plaintext 
#krycie
{
 width: 100%;
 height: 100%;
 position: fixed;
 z-index: 100;
 top: 0px;
 left: 0px;
 background-image: url(images/gallery.png);
 background-repeat: repeat;
}
[HTML] pobierz, plaintext 

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)

Ten post edytował PaulPavello 17.08.2011, 23:07:06

[CuteOne]

Nie jest on zabezpieczony przeciwko jakimś innym typom plików

1.No to się pewnego ranka zdziwisz jak ktoś ci serwer załatwi

2. Nie używaj printf do tego typu wyświetlania stringów - od tego jest echo

A co do tematu (jQuery):

[JAVASCRIPT] pobierz, plaintext 
$(function() { // taki onload :)
 
    $('#table img').click(function() { // #table to id z <table>
 
            var src = $(this).attr('src');
            var div = $('#kycie').html('<img src="'+src+'" class="jakas_klasa" />');
    });
});
[JAVASCRIPT] pobierz, plaintext 

Wyświetlanie obrazka to nie problem - problemem jest jego zniknięcie tak więc poszukaj na necie jakiejś gotowej galerii jQuery, która rozwiąze ten problem za ciebie

[PaulPavello]

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

[HTML] pobierz, plaintext 
$(document).ready(function(){
 
	    $('table img').click(function() { // #table to id z <table>
 
		    var src = $(this).attr('src');
		    $('#krycie').removeAttr('background');
		    $('#krycie').css('background-image', 'url(images/gallery.png)');
		    $('#krycie').css('position', 'fixed');
		    $('#krycie').css('width', '100%');
		    $('#krycie').css('height', '100%');
/*		    var div = */$('#kycie').html('<center><img src="'+src+'"> class="krycie"</center>');
//		    alert(src);
	    });
	    $('#krycie').click(function() {
	    	$('#krycie').css('background', '#FFFFFF');
		    $('#krycie').css('position', 'fixed');
		    $('#krycie').css('width', '0%');
		    $('#krycie').css('height', '0%');
 
	    });
 
    });
[HTML] pobierz, plaintext 

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:

[PHP] pobierz, plaintext 
$(document).ready(function(){
 
	    $('table img').click(function() { // #table to id z <table>
 
		    var src = $(this).attr('src');
		    $('#krycie').css('position', 'fixed');
		    $('#krycie').css('width', '100%');
		    $('#krycie').css('height', '100%');
		    $('#krycie').html('<center><img src="'+src+'" width="800" height="600"></center>');
	    });
	    $('#krycie').click(function() {
		    $('#krycie').css('width', '0%');
		    $('#krycie').css('height', '0%');
		    $('#krycie img').detach();
 
	    });
 
    });
[PHP] pobierz, plaintext 

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


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