• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Unterschiedlich große Bilder anordnen

Danke für die schnelle Antwort genau das habe ich gesucht :)
Leider funktioniert es bei mir nicht wirklich. Die grid-items "fliegen" nicht so sauber an ihre Positionen wie sie sollten. Und sie positionieren sich falsch irgendwie ganz komisch untereinander.

Woran könnte das liegen ? Habe den Code 1:1 übernommen.

Nachtrag:
Habe eben mal die .js Datei weggelassen und es hat sich nichts verändert. Könnte es also sein das der Fehler irgendwo im Javascript ist ?
 
Hmm ändert irgendwie nichts.
HTML: 
<body>
    <div id="page">
   
        <div id="header">
            <div>
                <ul id="navigation">
                    <li>
                        <img src="images/logo.png" width="100" height="30">
                    </li>
                    <li class="selected">
                        <a href="index.html">Home</a>
                    </li>
                    <li>
                        <a href="contact.html">contact</a>
                    </li>
                    <li>
                        <a href="http://blog.henrischilling.de">BLOG</a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="body" class="home">
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
       
            <div class="header">
            </div>
           
            <script>
                // external js: isotope.pkgd.js
                $('.grid').isotope({
                itemSelector: '.grid-item',
                masonry: {
                columnWidth: 200,
                isFitWidth: true
                }
                });
            </script>
                <div class="grid">
                    <div class="grid-item"></div>
                    <div class="grid-item grid-item--height2"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item grid-item--height2"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item grid-item--height2"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item grid-item--height2"></div>
                </div>
           
        </div>
    </div>
</body>

Des is mein Code natürlich alles auf professioneller Ebene programmiert.

Und so siehts aus




Was mach ich falsch :/
 
jQuery ist hier


und isotope habe ich direkt über die grids gesetzt
HTML: 
<script>
                // external js: isotope.pkgd.js
                $('.grid').isotope({
                itemSelector: '.grid-item',
                masonry: {
                columnWidth: 200,
                isFitWidth: true
                }
                });
            </script>
 
Henri schrieb:
jQuery ist hier


und isotope habe ich direkt über die grids gesetzt
HTML: 
<script>
                // external js: isotope.pkgd.js
                $('.grid').isotope({
                itemSelector: '.grid-item',
                masonry: {
                columnWidth: 200,
                isFitWidth: true
                }
                });
            </script>
Zum Vergrößern anklicken....
Und wo ist isotope.pkgd.js eingebunden? Btw. hat das <script></script> dort nichts zu suchen. Entweder am Ende des bodys oder im head.
 
Okay habe das Script jetzt raus genommen und eine .js Datei für isotope.pkgd angelegt.

HTML: 
<script src="js/jquery.min.js"></script>
        <script src="js/isotope.pkgd.js"></script>
</head>
<body>

Beides ist jetzt im Head eingebunden. Ich versteh nur nicht ganz wieso sich nichts ändert wenn ich die .js Datei lösche.. Das deutet auf eine falsch eingebundene .js Datei hin oder ?
 
HTML: 
<script src="js/jquery.min.js"></script>
<script src="js/isotope.pkgd.js"></script>

<!-- Der Teil steht NICHT in isotope.pkdg.js ! -->
<script>
// external js: isotope.pkgd.js
$('.grid').isotope({
                itemSelector: '.grid-item',
                masonry: {
                columnWidth: 200,
                isFitWidth: true
                }
});
</script>
Du solltest ja auch nicht das Skript in die JS packen sondern die dazu gehörige Library.
 
Henri schrieb:
Dann setz ich das Skript wieder in den Head rein ? o_O Ouh weih :(:D

und was kommt jetzt wo rein ?:confused:
Zum Vergrößern anklicken....
Wie was kommt jetzt wo rein? Du lädst jquery und isotope, danach führst du es damit aus:

HTML: 
<script>
// external js: isotope.pkgd.js
$('.grid').isotope({
                itemSelector: '.grid-item',
                masonry: {
                columnWidth: 200,
                isFitWidth: true
                }
});
</script>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben