php photo gallery with lightbox

Σε αυτή την περιοχή μπορείτε να βρείτε ή να αναζητήσετε πληροφορίες σχετικές με την PHP

Συντονιστές: WebDev Moderators, Super-Moderators, PHP Moderators

Απάντηση
Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από vassilism » 18 Ιούλ 2008 23:57

Αυτό είναι ένα βοήθημα για photo gallery με php βασισμένο στο βοήθημα για Thumbnails του fafou.
http://www.freestuff.gr/forums/viewtopi ... cd2eb99c52

Τι κάνει αυτό το script?

Το script δουλεύει ως εξής:

1 Ο χρήστης ανεβάζει μια φωτογραφία με κατάληξη jpg ή gif.
2 Αυτόματα δημιουργούνται 2 φωτογραφίες, η μια είναι το Thumbnail και η άλλη σε κανονική διάσταση, οι φωτογραφίες αυτές αποθηκεύονται στον φάκελο fotos.
3 Ο χρήστης έχει την δυνατότητα να βλέπει τις φωτογραφίες σε μορφή μιας photo gallery και να τις μεγενθύνει με το εφέ lightbox.

Πώς γίνετε η εγκατάσταση του script?

H εγκατάσταση του script γίνετε ως εξής:

1 Με το phpmyadmin φτιάχνουμε μια νέα βάση δεδομένων και τις δίνουμε όνομα images.
2 Επιλέγουμε την βάση δεδομένων images και πάμε sql για να φτιάξουμε τον πίνακα.
3 Για την δημιουργία του πίνακα γράφουμε τα παρακάτω:

Κώδικας: Επιλογή όλων

CREATE TABLE `uploads` (
  `id` int(3) unsigned NOT NULL auto_increment,
  `title` varchar(250) collate utf8_unicode_ci NOT NULL,  
  `image` varchar(20) collate utf8_unicode_ci NOT NULL,
  `thumb` varchar(20) collate utf8_unicode_ci NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;
4 Διαγράφουμε το αρχείο data_base.sql.
5 Ανοίγουμε το αρχείο db.php και δίνουμε το δικό μας username και password στις μεταβλητές $username $password. Εάν θέλουμε μπορούμε να αλλάξουμε τις διαστάσεις που θα παίρνει το Thumbnail και η εικόνα από τις μεταβλητές $limage και $thumbsize. Το αποθηκεύουμε και το κλείνουμε.
6 Δίνουμε CHMOD=777 στον φάκελο fotos
7 Ανεβάζουμε όλα τα αρχεία του φακέλου php photo gallery with lightbox στον server.

Τα αρχεία που μας ενδιαφέρουν είναι 2

1 το αρχείο insert.php με το οποίο γίνετε η καταχώρηση των εικόνων.
2 το αρχείο photo_gallery.php με το οποίο βλέπουμε την photo gallery.


Εδώ μπορείτε να κατεβάσετε το βοήθημα
Συνημμένα
php_photo_gallery_with_lightbox.zip
(139.56 KiB) Μεταφορτώθηκε 977 φορές
Τελευταία επεξεργασία από το μέλος vassilism την 05 Ιαν 2009 19:12, έχει επεξεργασθεί 2 φορές συνολικά.

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από Basilakis » 19 Ιούλ 2008 02:46

Δώσε μας και ένα demo, plz :D


Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13307
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από EneMe » 19 Ιούλ 2008 16:26

Απ'οτι είδα, τα thumbs δεν έχουν τις σωστές αναλογίες διαστάσεων... και το κινούμενο gif χάλασε...

Προσωπικά δεν με νοιάζει για τα gifs, αλλά για τα thumbs..

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από vassilism » 19 Ιούλ 2008 17:16

Κοίταξε να δεις, τα gif αν είναι κινούμενα ή αν έχουν transparency χαλάνε, είναι θέμα της GD library.

Όσο για τις σωστές αναλογίες των thumbs διορθώνετε πολύ εύκολα.
Απλά το έχω κάνει έτσι για να φαίνονται όλες οι εικόνες στις ίδιες διαστάσεις στην photo gallery.

Μπορείς να το διορθώσεις και τα thumbs να παίρνουν τις σωστές διαστάσεις, ως εξής:
Ανοίγουμε το αρχείο photo_gallery.php και στην γραμμή 52 που λέει

Κώδικας: Επιλογή όλων

$diastaseis = 'width=120 , height=80';
Μπορείς να βάλεις $diastaseis = 'width=120';
Με αυτόν τον τρόπο η εικόνα παίρνει το σωστό ύψος.

Επίσης αν αφήσεις τη μεταβλητή diastaseis κενή, δηλ $diastaseis = ''; παίρνει τις σωστές διαστάσεις.

Γενικά παίζοντας με αυτήν την μεταβλητή και με τα width & height μπορείς να εμφανίζεις τα thumbs όπως θέλεις εσύ.

Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13307
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από EneMe » 19 Ιούλ 2008 18:38

Προς το παρόν δουλεύω κάτι άλλο που προέκυψε online...

Θα το ψάξω, κι αν μπορέσω, θα επανέλθω μέσα στην εβδομάδα (είμαι και φαντάρος, μην ξεχνιόμαστε) :lol:

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από Basilakis » 19 Ιούλ 2008 19:49

Δεν δουλεύει σωστά ρε συ Βασίλη

Αυτό που πρέπει να κάνει, είναι να δημιουργεί τα thumb σύμφωνα με τις διαστάσεις τις εικόνας...

http://www.jailbait.gr/gallery/pack/pack15/

Κάπως έτσι δηλαδή... Αλλίως σκοτώνει την εικόνα :$

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από vassilism » 19 Ιούλ 2008 20:03

Συνονόματε μάλλον δεν είδες το προηγούμενο post.
Μια χαρά δουλεύει.
Όπως εξήγησα και παραπάνω έδωσα ένα δικό μου height για να φαίνονται όλες οι φωτογραφίες στις ίδιες διαστάσεις στην photo gallery.
Αν βγάλεις το height θα δεις ότι δεν χαλάει καθόλου την εικόνα.
Η μόνη προϋπόθεση είναι να δηλώσεις το πλάτος στις μεταβλητές $limage και $thumbsize στο αρχείο db.php για να ξέρει το script τις μέγιστες διαστάσεις του πλάτους του thumb και της μεγάλης εικόνας.
Κάντο εγκατάσταση και πειραματίσου με τον κώδικα για το δεις καλύτερα.

Άβαταρ μέλους
Banavas
Script Master
Δημοσιεύσεις: 1367
Εγγραφή: 21 Νοέμ 2004 20:25
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από Banavas » 19 Ιούλ 2008 20:11

vassilism έγραψε:Κοίταξε να δεις, τα gif αν είναι κινούμενα ή αν έχουν transparency χαλάνε, είναι θέμα της GD library.

Όσο για τις σωστές αναλογίες των thumbs διορθώνετε πολύ εύκολα.
Απλά το έχω κάνει έτσι για να φαίνονται όλες οι εικόνες στις ίδιες διαστάσεις στην photo gallery.

Μπορείς να το διορθώσεις και τα thumbs να παίρνουν τις σωστές διαστάσεις, ως εξής:
Ανοίγουμε το αρχείο photo_gallery.php και στην γραμμή 52 που λέει

Κώδικας: Επιλογή όλων

$diastaseis = 'width=120 , height=80';
Μπορείς να βάλεις $diastaseis = 'width=120';
Με αυτόν τον τρόπο η εικόνα παίρνει το σωστό ύψος.

Επίσης αν αφήσεις τη μεταβλητή diastaseis κενή, δηλ $diastaseis = ''; παίρνει τις σωστές διαστάσεις.

Γενικά παίζοντας με αυτήν την μεταβλητή και με τα width & height μπορείς να εμφανίζεις τα thumbs όπως θέλεις εσύ.

Δεν λύνεται το θέμα τόσο απλά.
Αν η αρχική εικόνα σου είναι όρθια και μάλιστα στενή όπως αυτή με την γάτα τότε το thumb θα βγει πολύ ψηλό και πολύ δυσανάλογο ως προς τα άλλα.
Πρέπει να βάλεις καποια if με τα οποία να ελέγχεις αν είναι όρθια ή οριζόντια η εικόνα και να δίνεις ανάλογα σταθερό το πλάτος ή το ύψος
κάπως έτσι (απόσπασμα από δικό μου script που ταιριάζει στην περίσταση)

Κώδικας: Επιλογή όλων

list($width, $height) = getimagesize("../pictures/".$ph_photo);
if  ($width> $height){
 $newwidth="50";
 $newheight = $newwidth/($width / $height) ;
 $newheight = intval($newheight );
}else {
 $newheight="50";
 $newwidth=$newheight*($width / $height) ;
  $newwidth = intval($newwidth);
}
Happy coding....
Μάρκος
http://lasernet.gr

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από vassilism » 19 Ιούλ 2008 23:06

Banavas έγραψε: Αν η αρχική εικόνα σου είναι όρθια και μάλιστα στενή όπως αυτή με την γάτα τότε το thumb θα βγει πολύ ψηλό και πολύ δυσανάλογο ως προς τα άλλα.
Σωστά. Αλλά όμως θα βγει στην κανονική της διάσταση. Πράγμα το οποίο θέλουν και τα παιδιά παραπάνω.

Σχετικά με τις εικόνες θα φέρω ένα παράδειγμα.
Έχουμε την εικόνα 1.jpg με πλάτος 423 και ύψος 600.
Η συγκεκριμένη εικόνα δεν είναι τετράγωνη, έχει μεγάλο ύψος.
Αν σε αυτήν την εικόνα θέλουμε να της δώσουμε πλάτος 100 τότε το ύψος θα βγει 142.
Αυτές είναι οι κανονικές διαστάσεις τις εικόνας.
Αν το ύψος το κάνουμε μικρότερο ή μεγαλύτερο από 142 τότε η εικόνα θα ξεχειλώσει.
Ας πάμε τώρα αντίστροφα, αν σε αυτήν την εικόνα δώσουμε ύψος 100 τότε το σωστό πλάτος με βάση τις διαστάσεις της πρέπει να είναι 71.

Από τα παραπάνω συμπεραίνουμε ότι δεν μπορούμε να πετύχουμε τέλειο αποτέλεσμα στην περίπτωση που θέλουμε να είναι όλα τα thumbs το ίδιο.

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από Basilakis » 20 Ιούλ 2008 00:13

Δηλαδή δεν σου αρέσει το if του Banavas? Εγώ το βρίσκω αρκετά ενδιαφέρων...

Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13307
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από EneMe » 20 Ιούλ 2008 00:34

Aν θέλουμε η μέγιστη διάσταση -όποια κι αν είναι αυτή- να είναι 120 πχ κι η άλλη να βγει όσο να'ναι, αρκεί να έχει τις αρχικές αναλογίες;

Άβαταρ μέλους
Alice_Cooper
Δημοσιεύσεις: 1947
Εγγραφή: 11 Μάιος 2007 00:33
Τοποθεσία: Ioannina
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από Alice_Cooper » 20 Ιούλ 2008 11:25

EneMe έγραψε:Aν θέλουμε η μέγιστη διάσταση -όποια κι αν είναι αυτή- να είναι 120 πχ κι η άλλη να βγει όσο να'ναι, αρκεί να έχει τις αρχικές αναλογίες;
tote xrisimopihs afto pou evale o banavas
opou $newwidth="50"; tha ginei $newwidth="120";
kai $newheight="50"; tha ginei $newheight="120";

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

php photo gallery with lightbox

Δημοσίευση από fafos » 20 Ιούλ 2008 15:53

yparxei kai h aplh lysh me style:

Κώδικας: Επιλογή όλων

style='max-width:120px;max-height:90px;'
ena paradeigma efamoghs edo:

http://mountain-camp.gr/album.php?c=26 (me 100X75px)

sta tags ths photo den prepei na dinetai width=xx kai height=xx gia na doulepsei sosta..


oso gia ta gif animations, mporeitai na xrhsimopoihsete mia class opou tha elenxei an auto to gif einai animation.. katopin lete sto script oti an einai pragmati animation gif na mhn to peiraksei alla na to afhsei opos exei..

h class elenxou:


Κώδικας: Επιλογή όλων

<?php
class gif_info &#123;
    var $line, $error, $globalTable, $globalTableSize, $globalTableSort;
    var $pallete = array&#40;&#41;;
    var $info = array&#40;&#41;;
    function gif_info&#40;$img&#41; &#123;
        $handle = fopen&#40;$img,'rb'&#41;;
        $this->line = fread&#40;$handle, filesize&#40;$img&#41;&#41;;
        fclose&#40;$handle&#41;;
        if &#40;&#40;substr&#40;$this->line, 0, 6&#41; != "GIF89a"&#41; && &#40;substr&#40;$this->line, 0, 6&#41; != "GIF87a"&#41;&#41; &#123;
            $this->error = true;
            $this->show_error;
        &#125;
        else &#123;
            $this->info&#91;'format'&#93; = substr&#40;$this->line, 0, 6&#41;;
        &#125;
    &#125;
    //Returns an array &#40;0 => width, 1 => height&#41;
    function get_size&#40;&#41; &#123;
        if &#40;$this->error&#41; &#123;
            $this->show_error&#40;&#41;;
        &#125;
        else &#123;
            $widtha = substr&#40;$this->line, 6, 1&#41;;
            $widthb = substr&#40;$this->line, 7, 1&#41;;
            $width = hexdec&#40;bin2hex&#40;$widthb.$widtha&#41;&#41;;
            $heighta = substr&#40;$this->line, 8, 1&#41;;
            $heightb = substr&#40;$this->line, 9, 1&#41;;
            $height = hexdec&#40;bin2hex&#40;$heightb.$heighta&#41;&#41;;
            $this->info&#91;'width'&#93; = $width;
            $this->info&#91;'height'&#93; = $height;
            return array&#40;$width, $height&#41;;
        &#125;
    &#125;
    //Returns pixel aspect ratio if set.
    //Don't know why anyone would want this info, but here it is.
    function pixel_aspect_ratio&#40;&#41; &#123;
        if &#40;$this->error&#41; &#123;
            $this->show_error&#40;&#41;;
        &#125;
        else &#123;
            $ratio = hexdec&#40;substr&#40;$this->line, 12, 1&#41;&#41;;
            if &#40;$ratio&#41; &#123;
                $aspectRatio = &#40;$ratio + 15&#41; / 64;
            &#125;
            else &#123;
                $aspectRatio = "None Specified";
            &#125;
            $this->info&#91;'aspectRatio'&#93; = $aspectRatio;
            return $aspectRatio;
        &#125;
    &#125;
    //Misc info
    function global_color_info&#40;&#41; &#123;
        if &#40;$this->error&#41; &#123;
            $this->show_error&#40;&#41;;
        &#125;
        else &#123;
            $val = hexdec&#40;bin2hex&#40;substr&#40;$this->line, 10, 1&#41;&#41;&#41;;
            if &#40;$val & 128&#41; &#123;
                $this->globalTable = true;
            &#125;
            $resolution = &#40;$val & 64&#41; ? 4 &#58; 0;
            $resolution += &#40;$val & 32&#41; ? 2 &#58; 0;
            $resolution += &#40;$val & 16&#41; ? 1 &#58; 0;
            $this->globalTableSize = &#40;$val & 4&#41; ? 4 &#58; 0;
            $this->globalTableSize += &#40;$val & 2&#41; ? 2 &#58; 0;
            $this->globalTableSize += &#40;$val & 1&#41; ? 1 &#58; 0;
            $this->globalTableSort = &#40;$val & 8&#41;;
            $this->info&#91;'resolution'&#93; = $resolution;
        &#125;
    &#125;
    //If global table found, returns array of hex color values
    function get_color_table&#40;&#41; &#123;
        if &#40;$this->error&#41; &#123;
            $this->show_error&#40;&#41;;
        &#125;
        elseif &#40;$this->globalTable&#41; &#123;
            $tableSize = 3 * pow&#40;2, $this->globalTableSize + 1&#41;;
            $val = substr&#40;$this->line, 13, $tableSize&#41;;
            $i = 0;
            while &#40;$i <= $tableSize / 3&#41; &#123;
                array_push&#40;$this->pallete, bin2hex&#40;substr&#40;$val, $i, 3&#41;&#41;&#41;;
                $i = $i + 3;
            &#125;
            $this->info&#91;'pallete'&#93; = $this->pallete;
            return $this->pallete;
        &#125;
    &#125;
    //Returns number of frames in GIF
    //Returns 1 if image is not animated
    function get_frames&#40;&#41; &#123;
        if &#40;$this->error&#41; &#123;
            $this->show_error&#40;&#41;;
        &#125;
        else &#123;
            $frames = explode&#40;'21f904', bin2hex&#40;$this->line&#41;&#41;;
            $this->info&#91;'frames'&#93; = sizeof&#40;$frames&#41; - 1;
            return $this->info&#91;'frames'&#93;;
        &#125;
    &#125;
    function info_dump&#40;&#41; &#123;
        if &#40;$this->error&#41; &#123;
            $this->show_error&#40;&#41;;
        &#125;
        else &#123;
            $this->get_size&#40;&#41;;
            $this->pixel_aspect_ratio&#40;&#41;;
            $this->global_color_info&#40;&#41;;
            $this->get_color_table&#40;&#41;;
            $this->get_frames&#40;&#41;;
            return $this->info;
        &#125;
    &#125;
    function show_error&#40;&#41; &#123;
        echo 'Not a valid GIF file';
    &#125;
&#125;
$image = new gif_info&#40;'ONOMA.gif'&#41;;
$info = $image->info_dump&#40;&#41;;


?> 

tora me ena if kseroume an auto to gif einai animation h oxi:

Κώδικας: Επιλογή όλων


if&#40;$info&#91;frames&#93;  > 1&#41; &#123; echo 'auto to gif einai animation';&#125;
else &#123; echo 'auto to gif DEN einai animation';&#125;

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από vassilism » 21 Ιούλ 2008 18:23

Πατρίδα μάγεψες πάλι :D

Παρακάτω δίνω μερικά demo για καλύτερη κατανόηση εμφάνισης των thumbs.

1 Σε αυτό το demo τα thumbs εμφανίζονται με αυτές τις διαστάσεις, έχοντας δώσει σταθερό width & height στην μεταβλητή $diastaseis.

2 Σε αυτό το demo τα thumbs εμφανίζονται με τις κανονικές διαστάσεις, αδειάζοντας την τιμή στην μεταβλητή $diastaseis.

3 Σε αυτό το demo τα thumbs εμφανίζονται με αυτές τις διαστάσεις, έχοντας δώσει height:90; στα css του script μας.

Γενικά παίζοντας με τις τιμές μπορούμε να εμφανίζουμε τα thumbs όπως θέλουμε.

Απάντηση

Επιστροφή στο “PHP Προγραμματισμός”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες