Jump to content
Fórum Script Brasil
  • 0

Ajuda com sistema de publicação + Destaque


Guest --Fabricio --

Question

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 to post
Share on other sites

2 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Cloud Computing


  • Forum Statistics

    • Total Topics
      148691
    • Total Posts
      644531
×
×
  • Create New...