[JavaScript][AJAX][PHP]wczytywanie AJAX oraz js.masonry Opcje

[gitbejbe]

witam.

najpierw link do mojej stronki: KLIK

chcę zrobić wczytywanie obrazków (na stronie są narazie w postaci czarnych div'ów) za pomocą ajax.
Zależy mi również, na animacji "masonry".

Link do animacji masonry = KLIK
(animacja ładnie rozmieszcza divy, przy skalowaniu jest fajny efekt)

Obie te rzeczy doskonale działają, ale niestety nie wtedy gdy z sobą współpracują.

animacja masonry oraz wczytywanie ajax'a tyczy się tego samego diva o id="container". Jeśli wyrzucę funkcje js ze wczytywaniem kolejnych obrazków, to masonry działa jak trzeba.

Wiem, że gdy wczyta się funkcja z ajax, to masonry przestaje obsługiwać czarne divy. Wiem też, że zapewne obie te funkcje trzeba połączyć w jedno ale za cholere nie mam pojęcia jak to zrobić.

Znajdzie się pomocna dusza ?

poniżej kod:

[HTML] pobierz, plaintext 
<div id="content_gallery_big">
		<div id="container" class="clearfix">
 
		            // tutaj ajax wczytuje czarne divy. Jeśli wyrzucę funkcje z ajaxem i wstawie tutaj x razy "<div class="item"></div>", to animacja masonry działa ok.
 
		</div> <!-- #container -->
</div>
 
//animacja masonry
 
<script>
  $(function(){
 
    $('#container').masonry({
      itemSelector: '.item',
      columnWidth: 1,
      isAnimated: true,
	  animationOptions: 
	  {
		duration: 500,
		easing: 'linear',
		queue: false
	  }
    });
 
  });
</script>
[HTML] pobierz, plaintext 

pliku php (fetch_pages.php) nie ma sensu wklejać. Następuje w nim poprostu pobranie z bazy kolejnych div'ów "<div class="item"></div>"

[PHP] pobierz, plaintext 
// ajax
<script type="text/javascript">
$(document).ready(function() {
 
	var track_click = 0; //track user click on "load more" button, righ now it is 0 click
 
	var total_pages = <?php echo $total_pages; ?>;
	$('#container').load("fetch_pages.php", {'page':track_click}, function() {track_click++;}); //initial data to load
 
	$(".load_more").click(function (e) { //user clicks on button
 
		$(this).hide(); //hide load more button on click
		$('.animation_image').show(); //show loading image
 
		if(track_click <= total_pages) //make sure user clicks are still less than total pages
		{
			//post page number and load returned data into result element
			$.post('fetch_pages.php',{'page': track_click}, function(data) {
 
				$(".load_more").show(); //bring back load more button
 
				$("#container").append(data); //append data received from server
 
				//scroll page to button element
				$("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500);
 
				//hide loading image
				$('.animation_image').hide(); //hide loading image once data is received
 
				track_click++; //user click increment on load button
 
			}).fail(function(xhr, ajaxOptions, thrownError) { 
				alert(thrownError); //alert any HTTP error
				$(".load_more").show(); //bring back load more button
				$('.animation_image').hide(); //hide loading image once data is received
			});
 
 
			if(track_click >= total_pages-1)
			{
				//reached end of the page yet? disable load button
				$(".load_more").attr("disabled", "disabled");
			}
		 }
 
		});
 
});
</script>
[PHP] pobierz, plaintext 

no i button wczytujący ajaxa

[HTML] pobierz, plaintext 
<button class="load_more" id="load_more_button" style="position:fixed;bottom:0px;left:50%;">load More</button>
<div class="animation_image" style="display:none;"><img src="ajax-loader.gif"> Loading...</div>
[HTML] pobierz, plaintext 

EDIT:
Znalazłem w dokumentacji masonary takie coś:

$('#append').click(function(){ //#append - czyli mój button , więc "#load_more_button"
var $boxes = $( boxMaker.makeBoxes() );
$container.append( $boxes ).masonry( 'appended', $boxes );
});

ponoć to ma rozwiązać, mój problem... tylko jak to powiązać z ajaxem ?


*****************************************************************************

dobra poradziłem sobie....

muszę jeszcze tylko podpiąć dobrze ajaxa.

kod dla potomnych, którzy chcieliby dodać animacje mesonry do wczytywanej grafiki

[HTML] pobierz, plaintext 
$(document).ready(function()
{
    $(".load_more").click(function(e)
    {
			var $boxes = $('<div class="item" style="width:400px;height:300px;"></div><div class="item"></div><div class="item"></div><div class="item" style="width:50px;height:150px;"></div><div class="item"></div><div class="item"></div><div class="item" style="width:50px;height:150px;"></div><div class="item"></div><div class="item" style="width:300px;height:180px;"></div><div class="item"></div>');
			$('#container').append( $boxes ).masonry( 'appended', $boxes, true );
    });
 
});
[HTML] pobierz, plaintext 

Ten post edytował gitbejbe 11.04.2013, 16:37:58