css gallery height προβλημα

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

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

Απάντηση
pimpogio
Δημοσιεύσεις: 1080
Εγγραφή: 28 Δεκ 2010 14:08

css gallery height προβλημα

Δημοσίευση από pimpogio » 28 Μαρ 2011 13:01

εχω μια gallery με css το θεμα ειναι οτι οι φωτο δεν εχουνε ολες ιδια αναλογια πλευρων
αλλες ειναι μακροστενες και αλλες ευρειες...
οι διαφορες στο λογο πλευρων ειναι μεγαλες και ετσι δεν φαινονται καλα οταν εχω
5 φωτο ανα γραμμη επειδη δεν εχουνε ολες το ιδιο υψος...

Ποια ειναι η ποιο καλη λυση ωστε να φαινονται χωρις μεγαλες διαφορες ?
το crop δεν μου κανει η συμπιεση παλι τις δειχνει παραμορφωμένες..
Τι μπορω να κανω ?

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

css gallery height προβλημα

Δημοσίευση από fafos » 28 Μαρ 2011 15:59

lysh 1... pairneis to megethos tou thumb kai an to ypsos einai megalytero apo XX pixels tou dineis height:XXpx (opu XXpx to megisto ypsos pou theleis).. paradeigma edo: http://www.e-q.gr/eq-gallery.php


lysh 2... vazeis to thumb san background efoson exeis panta idio to platos... san thumb vazeis ena transparent png arxeio XX x XX pixels.. paradeigma edo: http://www.isida.gr/gallery.php
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

pimpogio
Δημοσιεύσεις: 1080
Εγγραφή: 28 Δεκ 2010 14:08

css gallery height προβλημα

Δημοσίευση από pimpogio » 28 Μαρ 2011 19:25

το 1ο βγαζει το προβλημα απο καθετα και το παει
οριζοντια καπου δεν μου κολαει τοσο καλα...

το 2ο μου αρεσει θα το κοιταξω...

thx

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

css gallery height προβλημα

Δημοσίευση από fafos » 28 Μαρ 2011 20:06

pimpogio έγραψε:το 1ο βγαζει το προβλημα απο καθετα και το παει
οριζοντια καπου δεν μου κολαει τοσο καλα...

το 2ο μου αρεσει θα το κοιταξω...

thx
to 2o einai pio "stroto" alla mporei na prokypsei provlhma emfanishs tou thumb... skpepsou gia paradeigama mia photo me megalo ypsos kai h mish photo na einai enas mple ouranos.. sthn thumb tha deixnei ena aplo mple.. kata ta alla kai gia mena einai o sostos tropos.. alla o teleios einai na kaneis crop meta to anevasma ths photo.. des to vohthima gia thn gallery me php kai jquery pou exo dosei edo mesa..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

pimpogio
Δημοσιεύσεις: 1080
Εγγραφή: 28 Δεκ 2010 14:08

css gallery height προβλημα

Δημοσίευση από pimpogio » 15 Απρ 2011 15:51

επαναφερω το θεμα για καλυτερη λυση...

εχουμε

<ul>
<li> <div><img ...../><div></li>
<li> <div><img ...../><div></li>
<li> <div><img ...../><div></li>
<li> <div><img ...../><div></li>
</ul>

μπορεις να κανεις

ul div {max-height:180px;overflow:hidden}

αλλα αυτο δεν ειναι η καλυτερη λυση

με jquery πως θα οριζω το height/max-height για ολα τα div σε οσο ειναι το height του κοντοτερου div ?

επισης την εικονα μεσα στο div πως θα τις βαζω το καταλληλο margin-top:-xx px
ωστε να την κοβει το ιδιο πανω κατω και να μην την κοβει μονο απο κατω ?

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

css gallery height προβλημα

Δημοσίευση από Khronos » 15 Απρ 2011 16:01

Αν και είπες οτι δεν σου κάνει το crop εγώ θα σου προτείνω αυτή την κλάση και ίσως αλλάξεις γνώμη.

https://github.com/masterexploder/PHPTh ... asic-Usage

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

css gallery height προβλημα

Δημοσίευση από korgr » 15 Απρ 2011 16:45

Πάμε σε λύσεις Odyssey :p
Αφορά τον κώδικα εμφάνισης ενός thumbnail που μπορείς να το βάλεις μέσα στο <li> σου
Το παράδειγμα υποθέτει πως έχεις ορίσει πριν στην php σου δύο μετβλητές $w και $h για το πλάτος και ύψος του κάθε thumbnail.

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

<div class="thumb_container" style="background&#58;url&#40;thumb.jpg&#41; center center;">
<a href="big_image.jpg">
<img src="blank.gif" style="width&#58;<?php echo $w;?>px; height&#58;<?php echo $h;?>px; border&#58;0" alt="click to enlarge" title="click to enlarge">
</a>
</div>

CSS (πρέπει να δώσεις το ύψος και το πλάτος που έχεις ορίσει στην php σου για τα thumbnails, για παράδειγμα 100Χ100pixels):

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

.thumb_container &#123;
	position&#58;relative;
	width&#58;100px;
	height&#58; 100px;
	overflow&#58; hidden;
&#125;
Το τέχνασμα είναι να χρησιμοποιείς ένα blank gif ως image (με πλάτος και ύψος 100% του parent ή στις ρητές διαστάσεις του thumbnail) και να ορίζεις το κανονικό thumbnail ως image background με positioning center-center

Φυσικά το link της μεγέθυνσης θα το προσαρμόσεις σε κάποιο jquery image enlargement script όπως το fancybox...

pimpogio
Δημοσιεύσεις: 1080
Εγγραφή: 28 Δεκ 2010 14:08

css gallery height προβλημα

Δημοσίευση από pimpogio » 15 Απρ 2011 17:51

να ξεκαθαρισω οτι δεν με ενδιαφερουνε λυσεις με php
ουτε να κοψω τα thumbs κατι με jquery με ενδιαφερει
σαν αυτο
http://www.cre8ivecommando.com/equal-he ... uery-6164/

αλλα αντι να τα τα κανει ολα στο height του μεγαλυτερου να τα κανει στου μικροτερου...
Επισης θελω να βαζει και ενα margin-top:-XXpx;
ωστε να πηγαινει την εικονα στη μεση...

Ζηταω πολλα ? γινετε αυτο που λεω ?

τωρα το εχω κανει με css αλλα εχω δωσει στατικα το max-height...
με jquery πιστευω οτι αυτο ισως να μπορει να γινει δυναμικα
να παρουνε ολα τα height του μικροτερου..

edit βρηκα αυτο...
αυτο μπορει να τροποποιηθει ωστε να παιζει σε chrome παιζει σε ie k firefox αλλα σε chrome τα δειχνει πολυ μικρα.. ?

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

&#40;function&#40;$&#41; &#123;
        $.fn.equalHeights = function&#40;&#41; &#123;
                tallest =  500;
                this.each&#40;function&#40;&#41; &#123;
                        if&#40;$&#40;this&#41;.height&#40;&#41; < tallest&#41; &#123;
                                tallest = $&#40;this&#41;.height&#40;&#41;;
                        &#125;
                &#125;&#41;;
                return this.each&#40;function&#40;&#41; &#123;
                        $&#40;this&#41;.css&#40;"height",tallest&#41;;
                &#125;&#41;;
        &#125;
&#125;&#41;&#40;jQuery&#41;;
επισης την λυση του background δεν την θελω γιατι δεν τις διαβαζει ετσι η google τις φωτο

pimpogio
Δημοσιεύσεις: 1080
Εγγραφή: 28 Δεκ 2010 14:08

css gallery height προβλημα

Δημοσίευση από pimpogio » 16 Απρ 2011 12:30

το προβλημα που δεν παιζει το παραπανω script ειναι οτι
ο chrome επιστεφει 0 στην height() ...
Ισως να θελει καποιο image preloader για να παιξει σε chrome ...

Υπαρχει τροπος να γινει debug το script για chrome ?

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

css gallery height προβλημα

Δημοσίευση από dimsis » 16 Απρ 2011 13:11

Γιατί θεωρείς πως το ul div {max-height:180px;overflow:hidden} (που αντί για max-height θα μπορούσε να είναι και height σκέτο εφόσον από ότι κατάλαβα θα έχουν όλα το ίδιο συγκεκριμένο ύψος), δεν είναι η καλύτερη λύση από το να χρησιμοποιήσεις js για κάτι αντίστοιχο;

pimpogio
Δημοσιεύσεις: 1080
Εγγραφή: 28 Δεκ 2010 14:08

css gallery height προβλημα

Δημοσίευση από pimpogio » 16 Απρ 2011 16:38

γιατι εχω και μερικες με height 130.
και με js γινετε δυναμικα το height οχι προκαθορισμενα
που γινετε με css.
Απλα το παραπανω script δεν παιζει σε chrome.. παιζει σε ie/ff αμα μπορει καποιος να το κανει fix...

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

css gallery height προβλημα

Δημοσίευση από ThyClub » 16 Απρ 2011 17:48


pimpogio
Δημοσιεύσεις: 1080
Εγγραφή: 28 Δεκ 2010 14:08

css gallery height προβλημα

Δημοσίευση από pimpogio » 17 Απρ 2011 13:49

σε ευχαριστω αλλα δεν θελω κατι με php.
Θελω κατι με javascript.
Δεν με ενδιαφερει να κανω crop τα thumbs...
με ενδιαφερει απλως μονο να φαίνονται cropped στο browser δηλαδη css & javascript ..

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

css gallery height προβλημα

Δημοσίευση από Khronos » 17 Απρ 2011 15:06

Αυτό που σου έδωσα, κάνει αυτό που θες on the fly.
Δεν αποθηκεύει τα cropped images.
Κάνε τον κόπο να το δεις πιο προσεκτικά.
Εκτός και αν θες οπωσδήποτε να το κάνεις με js.

pimpogio
Δημοσιεύσεις: 1080
Εγγραφή: 28 Δεκ 2010 14:08

css gallery height προβλημα

Δημοσίευση από pimpogio » 17 Απρ 2011 16:33

ναι το ειδα οτι αυτο που μου εδειξες παραπανω οτι κανει on the fly σε php...
απλα ετσι τραβαει το ζορι ο server...
και τραβαει ζορι croparismatos ενω να το δειχνεις
cropped χωρις να ειναι δεν τραβαει κανενα ζορι ο browser.
Πιστευω οτι η βελτιστη λυση ειναι με javascript + css
απλα στο παραπανω jquery script ο chrome επιστρεφει
0 στο height και δεν παζει σε chrome...
υπαρχει τροπος να γινει fix ωστε να παιζει και σε chrome ?
Μπορει να ριξει καποιος καμια idea πως θα γινει fix στον chrome ?
Ισως ομως με image preloader να παιζει η .height() σε chrome...
Image preloader πως μπορω να βαλω να τρεχει πριν απο το script ?

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

&#40;function&#40;$&#41; &#123;
        $.fn.equalHeights = function&#40;&#41; &#123;
                minh =  1000;
                this.each&#40;function&#40;&#41; &#123;
                        if&#40;$&#40;this&#41;.height&#40;&#41; < minh&#41; &#123;
                                minh = $&#40;this&#41;.height&#40;&#41;;
                        &#125;
                &#125;&#41;;
                return this.each&#40;function&#40;&#41; &#123;
                        if &#40;jQuery.browser.mozilla ||  jQuery.browser.msie&#41; &#123;
                        $&#40;this&#41;.css&#40;"height",minh+'px'&#41;;
                        &#125; else &#123;
                        $&#40;this&#41;.css&#40;"max-height",'100px'&#41;;
                        &#125;
                &#125;&#41;;
        &#125;
&#125;&#41;&#40;jQuery&#41;;


Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

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

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