css gallery height προβλημα

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

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

Απάντηση
psil0s
Δημοσιεύσεις: 4
Εγγραφή: 04 Δεκ 2009 03:01

css gallery height προβλημα

Δημοσίευση από psil0s » 18 Απρ 2011 03:49

Ο λόγος για τον οποιον δεν σου βγαζει height ο chrome είναι επειδή δεν έχει φορτωθεί ακόμη η εικόνα, οπότε δεν μπορεί να υπολογίσει και το ύψος της για να επιστρέψει κάποια μεταβλητή!

Μπορείς να εκτελέσεις την συνάρτηση που παραθέτεις, εφόσον έχουν φορτώσει όλες οι εικόνες στην σελίδα σου καλώντας τη συνάρτηση σου μέσα απο $(window).load(function(){}) αντί $(document).ready(function(){})

Το ερώτημα είναι, χρειάζεσαι πραγματικά μια τέτοια λύση;
Φορτώνεις κάποιες εικόνες δυναμικά και δεν γνωρίζεις απο πριν το μέγεθος τους;
Εφόσον εσύ σχεδιάζεις το layout της σελίδας σου, δεν θα έχουν ένα προκαθορισμένο μεγεθος για το image holder έτσι και αλλιώς;

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

css gallery height προβλημα

Δημοσίευση από fafos » 18 Απρ 2011 04:37

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

(function($) {
	$.fn.equalHeights = function(minHeight, maxHeight) {

		var heights = new Array();
		var tallest = 100;

		this.each(function() {
			if&#40;$&#40;this&#41;.height&#40;&#41; < tallest&#41; &#123;
        heights.push&#40;$&#40;this&#41;.height&#40;&#41;&#41;;
        heights = heights.sort&#40;function&#40;a,b&#41;&#123;return a-b; &#125;&#41;;

if &#40;jQuery.browser.opera || jQuery.browser.msie&#41; &#123; 
		tallest = heights&#91;0&#93; - 4;
&#125; else &#123;
		tallest = heights&#91;0&#93; - 3;
&#125;

//alert&#40;tallest&#41;; //dokimh height

			&#125;
		&#125;&#41;;
		if&#40;&#40;maxHeight&#41; && tallest > maxHeight&#41; tallest = maxHeight;
		return this.each&#40;function&#40;&#41; &#123;
			$&#40;this&#41;.height&#40;tallest&#41;.css&#40;"overflow","hidden"&#41;;

		&#125;&#41;;
	&#125;
&#125;&#41;&#40;jQuery&#41;;


pairneis ola ta heights ton divs kai ta kaneis array.. meta zhtas na ta sortarei apo to mikrotero pros to megalytero.. meta pairnei to proto apotelesma apothn array (heights[0]) kai to dineis san height gia ola ta divs..

to -3 kai -4 to evala giati edine me ton tsampouka tou 3-4 pixels height parapano se kathe div.. mporei kai na mhn to xreiasteis.. den epsaksa na vro giati prosthetei auta ta 3-4 pixels..

kalo einai to

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

$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
 $&#40;".onoma_class_ton_divs"&#41;.equalHeights&#40;&#41;; 
&#125;&#41;;
na to exeis sto telos ths selidas
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

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

css gallery height προβλημα

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

λοιπον ευχαριστω το προβλημα λυθηκε
με $(window).load(function(){}) αντί $(document).ready(function(){}) πλεον παιζει και σε
chrome...

ο κωδικας...

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

&#40;function&#40;$&#41; &#123;
        $.fn.equalHeights = function&#40;&#41; &#123;
                minh =  200;
                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;
                        $&#40;this&#41;.height&#40;minh&#41;.css&#40;"overflow","hidden"&#41;;
                &#125;&#41;;
        &#125;
&#125;&#41;&#40;jQuery&#41;;
και τον καλεις στο τελος της σελιδας
$(window).load(function() {
$(".kopsimo").equalHeights();
});

τωρα αυτο που μενει ειναι να μην κοβει την εικονα απο κατω μονο αλλα να την κοβει
πανω κατω ωστε να ειναι στην μεση...
αυτο λογικα γινεται με αρνητικο margin-top στο img που ειναι μεσα στο div
px margin-top:-((original_height - minh)/2);
αυτο πως το κανω ?
το markup ειναι καπως ετσι
<ul>
<li><div class="kopsimo"><img ... /></div></li>
<li><div class="kopsimo"><img ... /></div></li>
</ul>

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

css gallery height προβλημα

Δημοσίευση από fafos » 18 Απρ 2011 18:09

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

    var image_height = $&#40;this&#41;.find&#40;'img'&#41;.height&#40;&#41;; 
    var top_margin = &#40;image_height - minh&#41;/2; 
$&#40;this&#41;.find&#40;'img'&#41;.css&#40; 'margin-top' , - top_margin&#41;;
sto 2o each..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

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

css gallery height προβλημα

Δημοσίευση από pimpogio » 18 Απρ 2011 23:29

you are my master...

τωρα ειναι η τελεια λυση...

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

css gallery height προβλημα

Δημοσίευση από pimpogio » 08 Μάιος 2011 19:44

ερωτηση τωρα ετσι οπως το εχω εφαρμόζετε
το script μετα που θα φορτωσουνε ολες οι εικονες
και αμα ειναι αργος ο browser μεχρι να φορτώσει
η σελιδα δεν τις δειχνει καλα...
Πως θα το κανω να γινετε αυτο για κανε εικονα ξεχωριστα ?
δηλαδη να περιμενει να φορτώσει καθε εικονα ξεχωρα και μολις φορτώσει να τρεχει το script
για την συγκεκριμενη εικονα ?

Αυτο ειναι ακομα καλυτερη λυση...

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

css gallery height προβλημα

Δημοσίευση από fafos » 08 Μάιος 2011 22:08

psakse gia "lazy loading" me jquery.. ena paradeigma se live site mporeis na deis sthn vazella.gr.. oops, sorry gazzeta.gr.. oi eikones pou einai ektos screen emfanizontai mono otan scrollareis thn selida..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Απάντηση

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

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

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