Masonry - Per Ajax PHP nachladen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
array
button
code
container
datei
datum
extra files
funktion
index
parameter
performance
position
problem
sache
schauen
string
tatsache
test
url
variable container
-
Hallo Leute,
ich habe ein großes Problem..
Ich habe mit dem Framework http://masonry.desandro.com/ eine Seite erstellt.
Ich lade mithilfe von ajax neue Tiles wenn man auf den Button Load drückt. Jetzt besteht allerdings das Problem das ich immer das Browserfenster resizen muss. Damit sich das Framework die Positionen der Tiles errechnet.
Ansonsten wird alles richtig geladen.
Ich hoffe ihr könnt mir weiterhelfen.
meine INDEX.html Datei:
<head> <style> .item { width: 30%; } .item.w2 { width: 50%; } .container{ max-width:1011px; width:100%; margin: 0px auto; } </style> <script type="text/javascript" language="javascript" src="jquery-2.1.4.min.js"></script> <script> $(document).ready( function(event){ $('#container').masonry({ columnWidth: 200, itemSelector: '.item' }); }); </script> <script> $(document).ready( function(event){ var track_click = 0; $('.button-wrap button').click(function(event){ var button = $(this);// In button steckt jetzt der geklickte button var pages = button.attr('data-pages');//Attribut auslesen und in variable speichern var type = button.attr('data-type'); //console.log('');//In der Browserkonsole zur Überprüfung ausgeben $("<div>").load("test.php?item=" + track_click, function() { $("#div1").append($(this).html()); }); track_click++; $.getScript('masonry.pkgd.min.js'); }); } ); </script> </head> <html> <body> <div id="div1" class="masonry js-masonry container" data-masonry-options='{ "columnWidth": 70, "gutter": 10 }'> <div class="item"><img src="Quadrat.jpg" style="width:150px"></div> <div class="item"><img src="Quadrat.jpg" style="width:150px"></div> <div class="item"><img src="Quadrat.jpg" style="width:150px"></div> </div> <!--<div id="div1"></div>--> <div id="tab-x" class="button-wrap"> <button data-pages="1" data-type="all">load</button> </div> <script type="text/javascript" language="javascript" src="masonry.pkgd.min.js"></script> </body> </html>
Meine TEST.PHP Datei:
<?php //echo $_GET['item']; echo "<div class=item'><img src='Quadrat.jpg' style='width:150px'></div>"; ?>
Schöne Grüße und schonmal Danke
grunt
Beitrag zuletzt geändert: 28.5.2015 16:04:33 von grunt -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo,
neben der Tatsache, das du die JS und CSS Sachen in extra Files auslagern solltest, musst du schauen, ob dieses Framework irgendeine Resize-Funktion hat.
Normalerweiße sollte das automatisch geschehen, aber für den Fall, das du viel nachlädst (auf einmal) kann das auch in die Hose gehen (performance-Technisch als auch rechnerisch) - schau daher bitte nach, ob es irgendeine Funktion zum aufrufen gibt, die eben das tut, was du brauchst in dem Moment.
Ansonsten kenne ich das Framework nicht und habe bisher nicht damit gearbeitet.
Liebe Grüße,
Kagu-chan -
kagu-chan schrieb:
neben der Tatsache, das du die JS und CSS Sachen in extra Files auslagern solltest, musst du schauen, ob dieses Framework irgendeine Resize-Funktion hat.
Das ist mir doch klar, das man normaler weise die CSS und JS Files auslagert. War nur ein Test
So für alle die es Interessiert. Ich habe es nun hinbekommen. Hier meine Lösung:
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Titel der Einzelseite</title> <meta name="description" content=""> <meta name="author" content=""> <meta name="keywords" content=""> <script type="text/javascript" language="javascript" src="../jquery-2.1.4.min.js"></script> <script type="text/javascript" language="javascript" src="../masonry.pkgd.min.js"></script> <script type="text/javascript" language="javascript" src="load.js"></script> </head> <body> <h1>Masonry - appended with jQuery</h1> <p><button id="append-button">Append new items</button> <div class="masonry"> <div class="item w2"></div> </div> <script id="s1"> </script> </body> </html>
load.js
$(document).ready( function(event){ var track_click = 0; var imgPerPage = 5; var variable; $( function() { var $container = $('.masonry').masonry({ columnWidth: 60 }); function getItemElement(picture) { var elem = document.createElement('div'); var img = document.createElement('img'); elem.className = 'item w2'; img.src=picture; return elem.appendChild(img); } function getData(){ $('#s1').load("test.php?item=" + track_click, function(s1) { var variable = $('#s1').html(); var elems = getItemElement(variable); $container.append( elems ).masonry( 'appended', elems ); }); } $('#append-button').on( 'click', function() { for (var i = 1; i <= imgPerPage; i++){ track_click++; getData(); } //var elems = [ getItemElement(), getItemElement(), getItemElement() ]; //$container.append( elems ).masonry( 'appended', elems ); //$.getScript('s1'); }); }); });
test.php
<?php $id = $_GET['item']; $daten = "bild".$id.".png"; ?> <?php echo $daten ?> -
Kenne deinen kenntnissstand ja nicht ;)
evtl. nützlich (da es scheint als würdest du jquery nutzen), das kann jQuery auch:
function getItemElement($picture) { return $("<div><img src='$picture' alt='image' class='item w2' /></div>"); // oder return $("<div />").append($("<img />").attr("src", $picture).attr("alt", "image").classList.add("item w2"); // ne funktion für mehrere attribute gleichezitig gibt es meines wissens auch, evtl. reicht sogar einfach nen array als parameter // ersteres scheint mir persönlich jedenfalls lesbarer als der standard-js-code im jQuery-code ^^ } -
Ein Problem habe ich allerdings noch.
Ich übergebe ja die Daten aus der PHP Datei hier:
function getData(){ $('#s1').load("test.php?item=" + track_click, function(s1) { var variable = $('#s1').html(); var elems = getItemElement(variable); $container.append( elems ).masonry( 'appended', elems ); }); }
Um genau zusein:
var variable = $('#s1').html();
Wie kann ich es lösen das ich mehrere Variablen übergeben kann? Jetzt kann ich ja leider nur einen Wert übergeben.
lg
grunt -
Meinst du nun an PHP oder an den Query-Selector?
Selector mit Kommata trennen, PHP einfach nen &x=y ranhängen.
Hier ne vergleichbare PHP-Funktion, wobei getQueryParams() einen Array der übergebenen Get-Parameter zurückliefert (um die es dir ja scheinbar geht)
static public function completeQuery() { $query = Yii::$app->request->getQueryParams(); if ($query === []) { return "?r=app"; } else { $result = []; foreach ($query as $key => $value) { $current = $key; if (!empty($value)) { $current .= "=$value"; } $result[] = $current; } return "?" . implode("&", $result); } }
Und der Selector-Kram:
$("#s1, #s2, #s3").load(); // Die jQuery-Selektoren sind die selben wie bei CSS weitestgehends
Sollte sein was du suchst, wenn ich es richtig verstanden habe ^^
Beitrag zuletzt geändert: 29.5.2015 11:59:10 von kagu-chan -
Hab es jetzt so gelöst das ich mir einen String zusammenbaue.
test.php
<?php echo $daten ?>;<?php echo $url?>
Und dann Splitte ich den String in der load.js.
load.js
function getData(){ $('#s1').load("test.php?item=" + track_click, function(s1) { var result = $('#s1').html(); var result = result.split(';'); var path = result[0]; var url = result[1] var elems = getItemElement(path, url); $container.append( elems ).masonry( 'appended', elems ); });
Beitrag zuletzt geändert: 29.5.2015 12:10:20 von grunt -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
