Script para Conteúdo Aleatório

Jonathantts · Março 17, 2013

Olá Colegas,

Estou com um pequeno problema, simples, porém, difícil para quem não sabe. Tenho esse conteúdo abaixo sendo um liquidcaroucel, que faz com que uma imagem com uma caixa em hover onde se tem os links e textos role para a esquerda e direita. Parecido com o "Google books", o que estou querendo é colocar todos esses conteúdos aleatórios, ou seja, a cada pagina atualizada eles estejam em ordens diferentes. Como poderei fazer isso com Script?

<div id="liquid1" class="liquid" style="width:100%">
	<span class="previous"><img src="liquidcarousel/images/previous.png" width="64" height="190" border="0" onMouseOver="this.src='liquidcarousel/images/previous2.png'" onMouseOut="this.src='liquidcarousel/images/previous.png'"></span>
<div class="wrapper">

		<ul id="work">

			<li>
            <a class="show">
            <img src="Images/1313863203_240927199_1-Fotos-de--Dom-Casmurro-Machado-De-Assis-Novo-Literatura-Brasileira.jpg" width="130" height="190" style="border:1px double #222" alt="image"></a>
            <div class="hide">
             <a href="PP/MachadodeAssis(DomCasmurro)/index.html" target="_blank" class="title">Dom Casmurro</a>
             <a href="PP/MachadodeAssis(DomCasmurro)/index.html" target="_blank">
            <span class="botao">Ler</span>
            </a>
            <span class="subtitle"><b>Autor:</b> Machado de Assis</span>
            <span class="conetwork">Compartilhe</span>
            <span class="network">
            <span style="width:70px; margin:5px 2px; float:left">
            <div class="g-plusone" data-size="medium" data-annotation="none"></div></span>
            <span style="width:70px; margin:5px 2px; float:left;margin-left:2px"><div class="fb-like" data-href="http://bookyn.sixserve.net/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div></span></span><a href="PP/EPUBs/Dom Casmurro - Machado de Assis.epub"><span class="botaoepub" style="margin-top:50px">EPUB</span></a><a href="PP/MachadodeAssis(DomCasmurro)/files/machado de assis - (dom casmurro).pdf" target="_blank"><span class="botaoPDF" style="margin-top:50px">PDF</span></a>
            </div>
            </li>

			<li>
            <a class="show">
            <img src="Images/Fernando Pessoa (Poemas).jpg" width="130" height="190" style="border:1px double #222" alt="image"></a>
            <div class="hide">
             <a href="PP/FernandoPessoa(Poemas)/index.html" target="_blank" class="title">Poemas</a>
             <a href="PP/FernandoPessoa(Poemas)/index.html" target="_blank">
            <span class="botao">Ler</span>
            </a>
            <span class="subtitle"><b>Autor:</b> Fernando Pessoa</span>
            <span class="conetwork">Compartilhe</span>
            <span class="network">
            <span style="width:70px; margin:5px 2px; float:left">
            <div class="g-plusone" data-size="medium" data-annotation="none"></div></span>
            <span style="width:70px; margin:5px 2px; float:left;margin-left:2px"><div class="fb-like" data-href="http://bookyn.sixserve.net/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div></span></span><a href="PP/EPUBs/Poemas - Fernando Pessoa.epub"><span class="botaoepub" style="margin-top:50px">EPUB</span></a><a href="PP/FernandoPessoa(Poemas)/files/fernandopessoa(poemas).pdf" target="_blank"><span class="botaoPDF" style=" margin-top:50px">PDF</span></a>
            </div>
            </li>

			<li>
            <a class="show">
            <img src="Images/A-Cartomante-Machado-de-Assis-www.LivrosGratis.net-.jpg" width="130" height="190" style="border:1px double #222" alt="image"></a>
            <div class="hide">
             <a href="PP/MachadodeAssis(ACartomante)/index.html" target="_blank" class="title">A Cartomante</a>
             <a href="PP/MachadodeAssis(ACartomante)/index.html" target="_blank">
            <span class="botao">Ler</span>
            </a>
            <span class="subtitle"><b>Autor:</b> Machado de Assis</span>
            <span class="conetwork">Compartilhe</span>
            <span class="network">
            <span style="width:70px; margin:5px 2px; float:left">
            <div class="g-plusone" data-size="medium" data-annotation="none"></div></span>
            <span style="width:70px; margin:5px 2px; float:left;margin-left:2px"><div class="fb-like" data-href="http://bookyn.sixserve.net/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div></span></span><a href="PP/EPUBs/A Cartomante - Machado de Assis.epub"><span class="botaoepub" style="margin-top:50px">EPUB</span></a><a href="PP/MachadodeAssis(ACartomante)/files/a cartomante(machado de assis).pdf" target="_blank"><span class="botaoPDF" style="margin-top:50px">PDF</span></a>
            </div>
            </li>

		</ul>
	</div>
    <span class="next"><img src="liquidcarousel/images/next.png" width="64" height="190" border="0" onMouseOver="this.src='liquidcarousel/images/next2.png'" onMouseOut="this.src='liquidcarousel/images/next.png'"></span>
</div>

Agradeço desde já a colaboração de todos! :google: :thumbsup:

JoseCarlosWeb · Março 18, 2013

Você pode com o PHP gerar um level aleatório para cada li

<li level="5" >Item 1</li>
 <li level="7" >Item 2</li>
 <li level="1" >Item 3</li>

Em seguida organizar esses níveis com JQuery

function organizar(eid){
x = $(eid);
x.sort(test);
$(eid).html('');
$(eid).append(x);
}

Jonathantts · Março 19, 2013

Você pode com o PHP gerar um level aleatório para cada li
<li level="5" >Item 1</li>
 <li level="7" >Item 2</li>
 <li level="1" >Item 3</li>
Em seguida organizar esses níveis com JQuery
function organizar(eid){
x = $(eid);
x.sort(test);
$(eid).html('');
$(eid).append(x);
}

Isso! Pesquisando no Google vi muitos dessas dicas, para fazer em PHP. Mas visto que tenho dificuldade em criar um código PHP para gerar um código aleatório, não faço a minima ideia de como fazer isso. Sei onde que terei que colocar o código HTML(como tem mostrado acima), mas o código jQuery que você diz seria apenas esse que você fez? Teria como você dá mais ou menos um norte de como poderei fazer isso, por favor! Não quero que tire seu tempo fazendo isso pra mim, será que você conhece um exemplo de um site que eu possa copiar? Please...

Sou muito grato! Pela ajuda que está me dando...

JoseCarlosWeb · Março 19, 2013

Vou te dar uma ideia de fazer, é só uma direção:

Nos itens da lista vc faz:

<li level="<?=rand(0,99999)?>"> conteudo do li 1</li>
<li level="<?=rand(0,99999)?>"> conteudo do li 2</li>
<li level="<?=rand(0,99999)?>"> conteudo do li 3</li>
<li level="<?=rand(0,99999)?>"> conteudo do li 4</li>

ai com jquery vc chama aquela função que falei anteriormente. :coolio:

William Bruno · Março 20, 2013

hum.. nem precisa desse atributo "level", não cara.

é mais simples, veja:

<ul id="items">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
 
<script>
(function(){
/**
* Deixar os itens do array em ordem aleatoria
*/
Array.prototype.shuffle = function() {
 var i = this.length, j, tempi, tempj;
 if ( i == 0 ) return this;
 while ( --i ) {
    j       = Math.floor( Math.random() * ( i + 1 ) );
    tempi   = this[i];
    tempj   = this[j];
    this[i] = tempj;
    this[j] = tempi;
 }
 return this;
}
 
/**
* Inicialização das variaveis
*/
var items = document.getElementById('items'),
lis = items.getElementsByTagName('li'),
arr = [],
max = lis.length;
 
/**
* Colocando o html colection em um array
*/
for( var i = 0; i<max; i++ ){
arr[i] = lis[i];
}
arr = arr.shuffle();
 
/**
* Removendo os items
*/
while (items.firstChild) {
   items.removeChild(items.firstChild);
}
 
/**
* Inserindo novamente no DOM
*/
while( i-- ){
items.appendChild( arr[i] );
}
 
})();
</script>

usei js puro, mas com jQuery, seria:

<ul id="items">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
</ul>

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
var shuffle = function( el ) {
 var i = el.length, j, tempi, tempj;
 if ( i == 0 ) return el;
 while ( --i ) {
    j       = Math.floor( Math.random() * ( i + 1 ) );
    tempi   = el[i];
    tempj   = el[j];
    el[i] = tempj;
    el[j] = tempi;
 }
}

var arr = jQuery('#items').find('li');
shuffle( arr );
jQuery('#items').html( arr );
</script>

sem atributos extras

Jonathantts · Março 27, 2013

Meu amigo, desculpe pela demora! Então fiz o que disse, mais infelizmente não consegui, todos os <li> acaba ficando com desordem. Veja se estou fazendo certo.

<head>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
var shuffle = function( el ) {
 var i = el.length, j, tempi, tempj;
 if ( i == 0 ) return el;
 while ( --i ) {
    j       = Math.floor( Math.random() * ( i + 1 ) );
    tempi   = el[i];
    tempj   = el[j];
    el[i] = tempj;
    el[j] = tempi;
 }
}

var arr = jQuery('#items').find('li');
shuffle( arr );
jQuery('#items').html( arr );
</script>

</head>

<body>

<div id="liquid1" class="liquid" style="width:100%">
	<span class="previous"><img src="liquidcarousel/images/previous.png" width="64" height="190" border="0" onMouseOver="this.src='liquidcarousel/images/previous2.png'" onMouseOut="this.src='liquidcarousel/images/previous.png'"></span>
<div class="wrapper">
 
		<ul id="work" id="items">
 
			<li>
            <a class="show">
            <img src="Images/1313863203_240927199_1-Fotos-de--Dom-Casmurro-Machado-De-Assis-Novo-Literatura-Brasileira.jpg" width="130" height="190" style="border:1px double #222" alt="image"></a>
            <div class="hide">
             <a href="PP/MachadodeAssis(DomCasmurro)/index.html" target="_blank" class="title">Dom Casmurro</a>
             <a href="PP/MachadodeAssis(DomCasmurro)/index.html" target="_blank">
            <span class="botao">Ler</span>
            </a>
            <span class="subtitle"><b>Autor:</b> Machado de Assis</span>
            <span class="conetwork">Compartilhe</span>
            <span class="network">
            <span style="width:70px; margin:5px 2px; float:left">
            <div class="g-plusone" data-size="medium" data-annotation="none"></div></span>
            <span style="width:70px; margin:5px 2px; float:left;margin-left:2px"><div class="fb-like" data-href="http://bookyn.sixserve.net/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div></span></span><a href="PP/EPUBs/Dom Casmurro - Machado de Assis.epub"><span class="botaoepub" style="margin-top:50px">EPUB</span></a><a href="PP/MachadodeAssis(DomCasmurro)/files/machado de assis - (dom casmurro).pdf" target="_blank"><span class="botaoPDF" style="margin-top:50px">PDF</span></a>
            </div>
            </li>
 
			<li>
            <a class="show">
            <img src="Images/Fernando Pessoa (Poemas).jpg" width="130" height="190" style="border:1px double #222" alt="image"></a>
            <div class="hide">
             <a href="PP/FernandoPessoa(Poemas)/index.html" target="_blank" class="title">Poemas</a>
             <a href="PP/FernandoPessoa(Poemas)/index.html" target="_blank">
            <span class="botao">Ler</span>
            </a>
            <span class="subtitle"><b>Autor:</b> Fernando Pessoa</span>
            <span class="conetwork">Compartilhe</span>
            <span class="network">
            <span style="width:70px; margin:5px 2px; float:left">
            <div class="g-plusone" data-size="medium" data-annotation="none"></div></span>
            <span style="width:70px; margin:5px 2px; float:left;margin-left:2px"><div class="fb-like" data-href="http://bookyn.sixserve.net/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div></span></span><a href="PP/EPUBs/Poemas - Fernando Pessoa.epub"><span class="botaoepub" style="margin-top:50px">EPUB</span></a><a href="PP/FernandoPessoa(Poemas)/files/fernandopessoa(poemas).pdf" target="_blank"><span class="botaoPDF" style=" margin-top:50px">PDF</span></a>
            </div>
            </li>
 
			<li>
            <a class="show">
            <img src="Images/A-Cartomante-Machado-de-Assis-www.LivrosGratis.net-.jpg" width="130" height="190" style="border:1px double #222" alt="image"></a>
            <div class="hide">
             <a href="PP/MachadodeAssis(ACartomante)/index.html" target="_blank" class="title">A Cartomante</a>
             <a href="PP/MachadodeAssis(ACartomante)/index.html" target="_blank">
            <span class="botao">Ler</span>
            </a>
            <span class="subtitle"><b>Autor:</b> Machado de Assis</span>
            <span class="conetwork">Compartilhe</span>
            <span class="network">
            <span style="width:70px; margin:5px 2px; float:left">
            <div class="g-plusone" data-size="medium" data-annotation="none"></div></span>
            <span style="width:70px; margin:5px 2px; float:left;margin-left:2px"><div class="fb-like" data-href="http://bookyn.sixserve.net/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div></span></span><a href="PP/EPUBs/A Cartomante - Machado de Assis.epub"><span class="botaoepub" style="margin-top:50px">EPUB</span></a><a href="PP/MachadodeAssis(ACartomante)/files/a cartomante(machado de assis).pdf" target="_blank"><span class="botaoPDF" style="margin-top:50px">PDF</span></a>
            </div>
            </li>
 
		</ul>
	</div>
    <span class="next"><img src="liquidcarousel/images/next.png" width="64" height="190" border="0" onMouseOver="this.src='liquidcarousel/images/next2.png'" onMouseOut="this.src='liquidcarousel/images/next.png'"></span>
</div>

</body>

William Bruno · Março 27, 2013

isso aqui:

<ul id="work" id="items">

não faz sentido.

seu elemento só pode ter 1 ID.

Jonathantts · Março 27, 2013

Então, meu caro amigo, percebi que ao deixar o JQuery 1.8 a página fica com erro. Tenho outros scripts que utilizam outra versão! Será que há algo haver? Tenho feito da seguinte maneira, mas ainda o conteúdo não fica aleatório...

<script>
var shuffle = function( el ) {
 var i = el.length, j, tempi, tempj;
 if ( i == 0 ) return el;
 while ( --i ) {
    j       = Math.floor( Math.random() * ( i + 1 ) );
    tempi   = el[i];
    tempj   = el[j];
    el[i] = tempj;
    el[j] = tempi;
 }
}

var arr = jQuery('#work').find('li');
shuffle( arr );
jQuery('#work').html( arr );
</script>

William Bruno · Março 27, 2013

importe o jQuery apenas uma unica vez.

e fique de olho no console de erros.

Ctrl+Shift+J no Firefox

Jonathantts · Março 27, 2013

importe o jQuery apenas uma unica vez.

e fique de olho no console de erros.

Ctrl+Shift+J no Firefox

Então, eu já utilizo o JQuery 1.8.3 nas tags superiores, portanto não terei que chamar novamente, isso?, Mas mesmo assim continua sem ficar aleatório, eu utilizo o navegador Chrome e atualizo varias e varias vezes pra ver se o código está agindo depois de eu ter feito as atualizações.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

William Bruno · Março 27, 2013

não cara, a lib jQuery deve ser importada apenas uma vez, não importa quantos codigos ou plugins vc use.

Oque tá aparecendo ai no console do chrome ?

Ctrl+Shift+J nele.

Arquivado

Script para Conteúdo Aleatório

Recommended Posts

Jonathantts 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JoseCarlosWeb 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jonathantts 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JoseCarlosWeb 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jonathantts 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jonathantts 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jonathantts 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Girls From Your Town - Anonymous Casual Dating - No Selfie

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Fóruns

Tempo Real

Informação importante