jquery script για κεντραρισμα εικονας

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

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

Απάντηση
Άβαταρ μέλους
cn92
Δημοσιεύσεις: 232
Εγγραφή: 25 Ιαν 2008 19:00
Τοποθεσία: Γλυφαδα
Επικοινωνία:

jquery script για κεντραρισμα εικονας

Δημοσίευση από cn92 » 22 Δεκ 2011 16:22

Σε αρκετές σελίδες και εφαρμογές, οι φωτογραφίες δεν μπορούσαν να είναι στο κέντρο του div, επειδή η κάθε φωτογραφία είχε διαφορετική διάσταση, άλλες ήταν κάθετες και άλλες οριζόντιες. Και το margin: X auto; δεν λειτουργούσε σε αρκετές περιπτώσεις.

Έτσι έφτιαξα ένα script, που όταν φορτώσει η σελίδα, κεντράρει τις φωτογραφίες που θα του πεις.

Η λογική είναι ότι του δίνεις το πλάτος του div στο οποίο είναι η εικόνα -> αφαιρεί από αυτό το πλάτος της εικόνας -> το διαιρεί με το 2 για να δεί ποιο είναι το margin που πρέπει να έχει από κάθε μεριά.

Αυτό είναι το script:

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

<script type="text/javascript">
function alignimges&#40;which, divwidth&#41; &#123;
    $&#40;which&#41;.each&#40;function&#40;&#41; &#123;
        var width = $&#40;this&#41;.width&#40;&#41;;
        $&#40;this&#41;.css&#40;'margin-left', &#40;divwidth - width&#41; / 2&#41;;
    &#125;&#41;;
&#125;
</script>
Και το καλείτε με αυτόν τον τρόπο.
which => είναι τα class, id των εικόνων που θα κεντραριστούν, πχ ".gallery ul li a img",
divwidth => το πλάτος του div μέσα στο οποίο είναι η εικόνα σε pixels, πχ 120

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

$&#40;window&#41;.load&#40;function&#40;&#41; &#123;
    alignimges&#40;which, divwidth&#41;;
&#125;&#41;;
** το script είναι σε jquery οπότε πρέπει να φορτώσετε την βιβλιοθήκη της jquery πρώτα


Δεν είναι κάτι τρομερό αλλά πιστεύω ότι μπορεί να βοηθήσει κάποιους.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

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

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