Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Jonathantts

Script para Conteúdo Aleatório

Recommended Posts

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:

Compartilhar este post


Link para o post
Compartilhar em outros sites

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);
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

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...

Compartilhar este post


Link para o post
Compartilhar em outros sites

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:

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

 

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>

Compartilhar este post


Link para o post
Compartilhar em outros sites

isso aqui:

<ul id="work" id="items">
não faz sentido.

seu elemento só pode ter 1 ID.

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

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>

Compartilhar este post


Link para o post
Compartilhar em outros sites

importe o jQuery apenas uma unica vez.

 

e fique de olho no console de erros.

Ctrl+Shift+J no Firefox

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.