Ajuda com sistema de publicação + Destaque

Março 31, 2008

Prezados amigos tenho um sistema de publicação dinamico, gostaria de fazer um siustema de destaque parecido com o do site uol, onde as imagens,legendas funcionam com o slideshow. Esse destaque tem que puxar os dados do bd, consegui um exemplo no site do bimonti olha como é o codigo. Não consegui adaptar no meu se alguém puder me ajudar agradeço

Meu codigo:

<? $g=$mp->midia_query("select * from documentos where categoria='1' and status='1' order by IDdocumentos DESC limit 4") or die(mysql_error());

if(mysql_num_rows($g)<=0):

print"<center>Nenhum documento cadastrado</center>";

endif;

$pular = 3;

while($gal=$mp->midia_fetch_array($g)):?>

<tr>

<? if($gal['imagem1']):?>

<tr>

<td ><div align="left"><a href="?pagina=documentos.menu.ver&vr1=<?=$gal[0]?>"><img src="imagens/documentos/miniaturas/<?=$gal['imagem1]?>" width="80" height="60" border="0" align="absmiddle" /></a></div></td>

</tr>

</table>

<? endif;?> <span class="titulo_azul_escuro"><a href="?pagina=documentos.menu.ver&vr1=<?=$gal[0]?>"><b>

<?=$mp->strsaida($gal['titulo'])?>

</b></a></span><br>

<span class=texto_cinza"> <?=substr($mp->strsaida($gal['texto1]),0,200)?>

... </span></td>

</tr>

<tr>

</tr>

</table>

<? endwhile?>

Codigo do bimonti

Index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

<title>Manual - SlideShow BD</title>

function settings(){

var el = document.getElementById('settings');

(el.style.display == 'none') ? el.style.display = 'block' : el.style.display = 'none';

}

</script>

</head>

<h3><img src="imgs/book.gif" alt="Manual" /> Manual - SlideShow BD</h3>

</a>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

<img

src="imgs/minus.gif"

alt="Diminuir"

title="Diminuir"

onmouseover="this.style.cursor='pointer'"

onclick="slide.tControl('m');">

<img

src="imgs/plus.gif"

alt="Aumentar"

title="Aumentar"

onmouseover="this.style.cursor='pointer'"

onclick="slide.tControl('p');">

</div>

</li>

</ul>

</div>

</div></div>

<h5><img src="imgs/new.gif" alt="Novidades" /> Novas Versões:</h5>

<p>A versão mais recente do Slide pode ser encontrada em:

<a href="http://my.opera.com/bimonti" class="link">http://my.opera.com/bimonti</a>.</p>

<p>Além da versão mais recente (novas funções,

correções, etc), você também encontrará o manual do

slide, termos de uso, e outros projetos que eu desenvolvi.</p>

<h5><img src="imgs/door_open.gif" alt="Next" /> Guess who's back...</h5>

<p>"Guess who's back... back again... tell a friend." </p>

<p>Isso mesmo, terminei a versão do slide que já estava parada a um bom tempo, e coloquei algumas coisas legais para auxiliar no projeto, veja só:</p>

<ul>

<li>Efeito de Fade</li>

<li>Alteração de IDs facilitada</li>

<li>Correção na marcação do exemplo</li>

</ul>

<p>O feito de Fade entre os slides era o mais importante na pauta do projeto, além de fazer uma troca mais interessante entre os elementos deixa o trabalho com uma cara mais profissional.</p>

<p>Também setei algumas variáveis logo no começo do script, onde o ID dos elementos que serão alterados podem ser setados sem ter que ficar procurando dentro das funções onde alterar, ou sem ter que usar os mesmos IDs que eu utilizei no modelo.</p>

<p>Também corrigi um pequeno problema na marcação do código (XHTML), onde o link do slide só era acessível no título do slide. Agora eu deixei como padrão na imagem e no título, além de corrigir uma parte no script que agora permiti modifica-lo sem ter problemas com outros elementos. </p>

<h5><img src="imgs/images.gif" alt="Imagens" width="16" height="16" /> Arquivos Essenciais:</h5>

<p> O slide precisa das seguintes imagens para funcionar:<br />

- past.gif [deverá ser usada com o evento onclick="slide.previous()"]<br />

- play.gif [deverá ser usada com o evento onclick="slide.pause()"]<br />

- pause.gif [deverá ser usada com o evento onclick="slide.pause()"]<br />

- next.gif [deverá ser usada com o evento onclick="slide.next()"]</p>

<p>O arquivo slide.css contém as informações sobre o estilo do Slide.

Eu utilizei um modelo básico e poucas imagens. O estilo fica por conta de cada

designer.</p>

<p>Já o arquivo slide.js é o responsável por todo o funcionamento do

sistema. Aconselho que só faça as alterações necessárias

na parte dos vetores -- vide abaixo -- e só altere as outras partes se souber o que

está fazendo. </p>

<h5><img src=imgs/monitor_add.gif" alt="Slides" width="16" height="16" /> Manipulando os Slides</h5>

<p> Logo no começo da classe ´Slide´ está o vetor onde os slides devem

ser definidos. Utilize o seguinte formato:<br />

</p><pre>["Caminho.Ext","Título", "Texto","Link"],

</pre></p>

<p>Muito cuidado ao alterar/apagar/adicionar slides.

Utilizei o padrão JSON, então

eles devem ser indicados entre colchetes e sempre seguidos por uma vírgula(,).

Somente o último slide NÃO deve ter a vírgula.<br />

</p><pre>

["","","",""],

["","","",""]</pre></p>

<h5><img src="imgs/controller.gif" alt="Setando" /> Setando os Elementos</h5>

<p>Não há mais a necessidade de alterar nada dentro da função _exchange(). Agora logo no começo do script eu configurei algumas variáveis onde é possível alterar o ID dos elementos utilizados. Eu utilizei os seguintes IDs:<br />

</p>

<pre>

- slideImg

- titleSlide

- textSlide

- linkSlide

- playpause

- showTimer

</pre>

Creio que os IDs sejam bem intuitivos se você já alterou os slides para os que pretende

utilizar. <img src="imgs/emoticon_tongue.gif" alt="Tongue" />

</p>

Caso a sua interface não conte com esses IDs altere o necessário. Se o sistema não encontrar algum dos elementos a

execução é finalizada imediatamente.</p>

<h5><img src="imgs/heart.gif" alt="Ready ?!" /> Considerações Finais</h5>

<p>Sugiro que no <body> da sua página você coloque a ação

necessária por inicar o slide. Assim o mesmo só será iniciado quando

todo o resto for carregado, evitando que as outras imagens e textos do seu site não

fiquem faltando, afinal o slide tentará carregar todas as imagens definidas logo que

for iniciado.

</p><pre><body onload="slide.start()"></pre>

</p>

<p>Se você está fazendo uso do slide, por favor passe na minha página e deixe um comentário sobre o que achou, onde está utilizando, o que pode ser melhorado, etc. Só assim o trabalho pode ficar melhor. </p>

</div>

</body>

</html>

slide.php

<?php

/*

$BD:Slide - version 0.9.4$

$LastModified: 04/02/2006$

Sistema Free para uso pessoal ou comercial contanto que os

créditos permaneçam intactos. Eu já nem estou colocando um

monte de coisa pra não deixar o código pesado. ^^

Maiores Informações:

http://my.opera.com/bimonti/

*/

echo"

slide = {

// vetor com os slides

_imagens : [

"; /*

Estrutura da Tabela de Modelo

+----+------+--------+-----------+------+

+----+------+--------+-----------+------+

| | | | | |

+----+------+--------+-----------+------+

*/

$query = 'SELECT * FROM slide';

$link = mysql_connect('localhost', 'root', '')

or die('Não foi possível conectar: ' . mysql_error());

mysql_select_db('test')

or die('Não foi possível selecionar o banco da dados');

$result = mysql_query($query)

or die('A consulta falhou!: ' . mysql_error());

$x=0;

while ($l = mysql_fetch_array($result, MYSQL_ASSOC)) {

if($x!=0){

echo ",";

}

echo '["'.$l['path].'","'.$l['title'].'","'.$l['text'].'","'.$l['link'].'"]';

++$x;

}

echo" ],

// ID dos elementos que o sistema modifica

// ID da imagem do slide

_slideImg : 'slideImg',

// ID do link do slide, ou seja, um elemento A

_linkSlide : 'linkSlide',

// ID do título do slide, uma div ou span por exemplo

_titleSlide: 'titleSlide',

// ID do título do slide, idêntico ao de cima

_textSlide : 'textSlide',

// ID da imagem de play|pause

_playPause : 'playpause',

// ID da div que mostra ou esconde as opções de customização de tempo

// essa opção pode ser omitida do usuário, basta retirar o botão

// settings da página, e como a div já vem com o display:none por

// padrão o usuário não terá acesso a essas opções.

_showTimer : 'showTimer',

// variáveis do sistema

// Daqui para baixo não é necessário alterar mais nada, aqui o sistema

// cuidará de tudo

_count : 0,

_length : null,

_timeOutID : null,

_pause : false,

_timer : 4,

// função que inicia o slide e seta todas os parâmetros necessários

start : function(){

with(this){

_preLoader();

_length = _imagens.length;

_work();

}

},

// faz o pré-carregamento das imagens

_preLoader : function(){

for(x in this._imagens){

var image = new Image();

image.src = this._imagens[x][0];

}

},

// função principal que faz as checagens necessárias

_work : function(){

with(this){

(_count == _length) ? _count = 0 : (_count < 0) ? _count = _length-1 : void(0);

var current = _imagens[_count];

_exchange(current);

if(!_pause){

(typeof(_timeOutID) == 'number') ? clearTimeout(_timeOutID) : void(0);

_timeOutID = setTimeout(

function(){

slide.next();

fade(0,0,$(_slideImg));

}, (Number(_timer)*1000)

);

}

},

// função que altera os elementos da página, altere os IDs se necessário

_exchange : function(img){

this.$(this._slideImg).src = img[0];

this.$(this._titleSlide).innerHTML = img[1];

this.$(this._textSlide).innerHTML = img[2];

this.$(this._linkSlide).href = img[3];

this.fade(0,100,this.$(this._slideImg));

},

// altera para o próximo slide ao clicar no botão Próximo

next : function(){

with(this){

_count++;

_work();

}

},

// altera para o slide anterior ao clicar no botão correspondente

previous : function(){

with(this){

_count--;

_work();

}

},

// pausa e continua a apresentação

pause : function(){

var img = this.$(this._playPause);

if(this._pause){

this._pause = false;

img.src = 'imgs/pause.gif';

img.title = 'Parar';

}

else{

this._pause = true;

img.src = 'imgs/play.gif';

img.title = 'Continuar';

}

with(this){(typeof(_timeOutID) == 'number') ? clearTimeout(_timeOutID) : void(0); _work();}

},

// controla o tempo de troca de cada slide

tControl : function(act){

with(this){

(act=='m')?((_timer==4)?void(0):_timer=_timer-1):((_timer==9)?void(0):_timer= _timer +1);

this.$(this._showTimer).innerHTML = _timer+'s';

}

},

// altera a opacidade do elemento e suaviza a transição entre os slides

fade : function (){

var type,signal;

var from = arguments[0];

var to = arguments[1];

var el = arguments[2];

(document.all) ? type = 'filter' : type = 'opacity';

(from>to) ? signal = '-' : signal= '+';

if(from >= to/2){

from = eval(from+signal+10);

}else{

from = eval(from+signal+5);

}

if(type=='opacity'){

try{el.style[type] = Number(from*0.01); }catch(e){}

}else{

try{el.style[type] = 'alpha(opacity='+from+')'; }catch(e){}

}

if(from != to){

setTimeout( function(){ slide.fade(from,to,slide.$(slide._slideImg)); } ,50);

}

},

// retorna o elemento solicitado através de seu ID

$ : function(){

return document.getElementById(arguments[0]);

}

";?>

Por favor amigos me ajudem porecido entregar um projeto quarta feira

Desde já agradeço

Fabricio

oxprofessor · Março 31, 2008

Poderia me dar um exemplo (n ainternet) do que está tentando fazer ?

Abril 1, 2008

Claro amigo,

Seria tipo os destaques da uol, ig entre outros

http://www.ig.com.br/

Onde fica a imagem, legenda trocando automaticamente (slide)

Só que preciso buscar esses dados de um bd

Obrigado.

Entrar

Ajuda com sistema de publicação + Destaque

Pergunta

Guest --Fabricio --

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

oxprofessor

Link para o comentário

Compartilhar em outros sites

Guest --Fabricio --

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades