[Resolvido] Load More do twitter com Json

[gremio10 14]

Fala galera, eu estou usando a API do vimeo, e mandando retornar os valores por json, e quero fazer com que ele vá mostrando os videos ao estilo Twitter ou Facebook, que quando chega no final da página ele mostre um Load More ou um Carregar Mais.

 

achei na net, mas sempre se usa dados já salvos no banco de dados...

 

o que achei foi esse: clique aqui

 

será que alguem poderia me ajudar a por uma lógica de como fazer para ele não repetir os valores já colocados no html ?

 

Obrigado.

[Ted k' 126]

Ao invés de resgatar no banco, resgata no jSON, você sabe manipular o jSON com javascript? Têm alguma noção?

[gremio10 14]

Muito pouca, mas até que consegui, mas eu agora to com outro problema, é assim,

 

eu consigo fazer com que ele busque, eu mando o PHP ler o json, e guardar em uma variavel,

crio outra no JS que vai receber todos esses dados, e fiz como se fosse paginaçao:

 

<script type="text/javascript">		

		var page		= 0;
		var pagesize 	= 12;
		var arr 		= <?php echo $_thumbVideosJson ?>;

		function getPage( page )
		{
			this.page	= page;
			var start	= this.page * pagesize;
			var end		= Math.min(start + pagesize, arr.length - 1);
			return arr.slice(start, end);
		}

		HTML( getPage( page ) );

		function HTML( jsonTypes )
		{
			$.each( jsonTypes, function( i, video )
			{
				$("<li></li>").html( "<a href='#" + video.url + "' title='" + video.title + "' class='vimeo'><img src='" + video.thumbnail_medium + "' alt='thumb'><div class='title-thumb'><span><b><strong>" + video.title + "</strong><br />by <strong>" + video.user_name + "</strong></b></span></div></a>" ).appendTo($('.thumbs_channels'));
			});
		}

		$("#load-more").click( function(){
			page += 1;
			HTML( getPage( page ) );
		});

       </script>

 

e tenho uma função para fazer com que quando passo o mouse pelo .vimeo (<a>) ele sobe mostrando o nome e o produtor,

como mando ele exibir 12 primeiro, ele funciona perfeitamente, mas quando clico em load more, o mesmo JS não funciona nos outros que aparecem.

 

$(".vimeo .title-thumb").animate({ opacity: 0.85 }, 1 ).css( "display", "none" ); //Set Opacity

               $(".vimeo").each(function(e) {

       	        $(this).mouseover(function(){
                    var title = $(this).find(".title-thumb");
                       var span = $(title).find("span");
                       $(span).animate({ height: "50px" }, 10);
                       $(title).css( {display: "block", marginTop: "-52px"} );
                   });

                   $(this).mouseout(function(){

                       var title = $(this).find(".title-thumb");
                       var span = $(title).find("span");

                       $(title).css( { height: "0px", marginTop: "-12px", display: "none" } );

                   });
               });

 

Obrigado pela ajuda.

[gremio10 14]

Resolvido, criei uma função com os dados, e apenas chamei no onClick..

 

Obrigado.