Ir para conteúdo
Fórum Script Brasil
  • 0

Ajuda com sistema de publicação + Destaque


Guest --Fabricio --

Pergunta

Guest --Fabricio --

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)):?>

<table width="100%" border="0" align="center" cellpadding="2" cellspacing="2">

<tr>

<td align="left" valign="middle">

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

<table border=0" align="left" cellpadding="0" cellspacing="0" style="border: 1px solid #FFCC00">

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

<td align="left" valign="top"><hr color="#FFFFFF" style="border-bottom:1px dotted #aaaaaa" /></td>

</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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Manual - SlideShow BD</title>

<script type="text/javascript">

function settings(){

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

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

}

</script>

<script src="slide.php" type="text/javascript"></script>

<link href="slide.css" rel="stylesheet" media="screen" type="text/css" />

</head>

<body onload="slide.start()">

<div id="manual">

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

<!--Slide Start-->

<div class="center"><div id="pic">

<a href="" id="linkSlide">

<img id="slideImg" class="img" />

<div id="titleSlide"></div>

</a>

<div id="textSlide"></div>

<div id="nav">

<ul>

<li>

<a href="#" onclick="slide.previous();">

<img src="imgs/past.gif" />

</a>

</li>

<li>

<a href="#" onclick="slide.pause();">

<img id="playpause" src="imgs/pause.gif" />

</a>

</li>

<li>

<a href="#" onclick="slide.next();">

<img src="imgs/next.gif" />

</a>

</li>

<li>

<a href="#" onclick="settings();">

<img src="imgs/settings.gif" />

</a>

</li>

<li>

<div id="settings" style="display:none;">

<img

src="imgs/minus.gif"

alt="Diminuir"

title="Diminuir"

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

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

<span id="showTimer">4s</span>

<img

src="imgs/plus.gif"

alt="Aumentar"

title="Aumentar"

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

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

</div>

</li>

</ul>

</div>

</div></div>

<!--Slide End-->

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

<p>A vers&atilde;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&eacute;m da vers&atilde;o mais recente (novas fun&ccedil;&otilde;es,

corre&ccedil;&otilde;es, etc), voc&ecirc; tamb&eacute;m encontrar&aacute; 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>&quot;Guess who's back... back again... tell a friend.&quot; </p>

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

<ul>

<li>Efeito de Fade</li>

<li>Altera&ccedil;&atilde;o de IDs facilitada</li>

<li>Corre&ccedil;&atilde;o na marca&ccedil;&atilde;o do exemplo</li>

</ul>

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

<p>Tamb&eacute;m setei algumas vari&aacute;veis logo no come&ccedil;o do script, onde o ID dos elementos que ser&atilde;o alterados podem ser setados sem ter que ficar procurando dentro das fun&ccedil;&otilde;es onde alterar, ou sem ter que usar os mesmos IDs que eu utilizei no modelo.</p>

<p>Tamb&eacute;m corrigi um pequeno problema na marca&ccedil;&atilde;o do c&oacute;digo (XHTML), onde o link do slide s&oacute; era acess&iacute;vel no t&iacute;tulo do slide. Agora eu deixei como padr&atilde;o na imagem e no t&iacute;tulo, al&eacute;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&aacute; ser usada com o evento onclick=&quot;slide.previous()&quot;]<br />

- play.gif [dever&aacute; ser usada com o evento onclick=&quot;slide.pause()&quot;]<br />

- pause.gif [dever&aacute; ser usada com o evento onclick=&quot;slide.pause()&quot;]<br />

- next.gif [dever&aacute; ser usada com o evento onclick=&quot;slide.next()&quot;]</p>

<p>O arquivo slide.css cont&eacute;m as informa&ccedil;&otilde;es sobre o estilo do Slide.

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

designer.</p>

<p>J&aacute; o arquivo slide.js &eacute; o respons&aacute;vel por todo o funcionamento do

sistema. Aconselho que s&oacute; fa&ccedil;a as altera&ccedil;&otilde;es necess&aacute;rias

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

est&aacute; fazendo. </p>

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

<p> Logo no come&ccedil;o da classe &acute;Slide&acute; est&aacute; o vetor onde os slides devem

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

</p><pre>[&quot;Caminho.Ext&quot;,&quot;T&iacute;tulo&quot;, &quot;Texto&quot;,&quot;Link&quot;],

</pre></p>

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

Utilizei o padr&atilde;o JSON, ent&atilde;o

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

Somente o &uacute;ltimo slide N&Atilde;O deve ter a v&iacute;rgula.<br />

</p><pre>

[&quot;&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;],

[&quot;&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;],

[&quot;&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;]</pre></p>

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

<p>N&atilde;o h&aacute; mais a necessidade de alterar nada dentro da fun&ccedil;&atilde;o _exchange(). Agora logo no come&ccedil;o do script eu configurei algumas vari&aacute;veis onde &eacute; poss&iacute;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>

<p><img src="imgs/exclamation.gif" alt="Aten&ccedil;&atilde;o" />

Caso a sua interface n&atilde;o conte com esses IDs altere o necess&aacute;rio. Se o sistema n&atilde;o encontrar algum dos elementos a

execu&ccedil;&atilde;o &eacute; finalizada imediatamente.</p>

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

<p>Sugiro que no &lt;body&gt; da sua p&aacute;gina voc&ecirc; coloque a a&ccedil;&atilde;o

necess&aacute;ria por inicar o slide. Assim o mesmo s&oacute; ser&aacute; iniciado quando

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

fiquem faltando, afinal o slide tentar&aacute; carregar todas as imagens definidas logo que

for iniciado.

</p><pre>&lt;body onload=&quot;slide.start()&quot;&gt;</pre>

</p>

<p>Se você está fazendo uso do slide, por favor passe na minha página e deixe um coment&aacute;rio sobre o que achou, onde est&aacute; utilizando, o que pode ser melhorado, etc. S&oacute; 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

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

| ID | Path | Título | Descrição | Link |

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

| | | | | |

| | | | | |

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

*/

$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

Link para o comentário
Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...