Peguei um sistema de SlideShow do Dirceu Bimont Ivo - http://my.opera.com/bimonti/ muito bacana, já o utilizo a um bom tempo, porém sempre fazia manualmente as alterações de fotos do slide.
No Site do Dirceu ele disponibilizou uma versão com banco de dados, porém nao estou conseguindo adaptá-la para pegar os dados da tabela da Galeria Brasil 3.
A idéia é que quando eu crio uma nova galeria, o slide mostra as últimas 4.
Bom, vou postar os códigos pra vcs verem o funcionamento:
index.html(Detalhe: eu simplifiquei um pouco o slide, nao exibindo botoes de avançar, etc.)
<!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 id="pic">
<a href="" id="linkSlide">
<img id="slideImg" class="img" />
<div id="titleSlide"></div>
</a>
<div id="textSlide"></div>
</div>
<!--Slide End-->
</div>
</body>
</html>slide.php(Original)
<?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]);
}
}
";?>Este cógido abaixo é o que eu uso em meu site para simplesmente exibir os 4 ultimos galerias cadastradas, e estou utilizando como base para mudar o slide.php:(não levem em consideração a tabela.)
<?php
include("security/conexao.php");
$query = mysql_query("SELECT * FROM galerias LEFT OUTER JOIN imagens ON img_codigo = gal_codigo_img ORDER BY gal_data DESC LIMIT 4");
// Agora exiba o código com a configuraçao de sua tabela - o cabeçalho dela.
?>
<p>
<table cellpadding="0" cellspacing="0">
<?php
// Agora vamos montar o código. Pegue o valor total de resultados:
$total = mysql_num_rows($query);
// Defina o número de colunas que voce deseja exibir:
$colunas = "1";
// Agora vamos ao "truque":
if ($total > 0) {
for ($i = 0; $i < $total; $i++) {
if (($i % $colunas) == 0) {
?>
<tr>
<td height="20" colspan="4">
</td>
</tr>
<tr>
<?php
}
$dados= mysql_fetch_assoc($query);
$dados['gal_data'] = date('d/m/Y', strtotime($dados['gal_data']));
$sql = "SELECT * FROM imagens WHERE img_codigo_gal = ". $dados['gal_codigo'] ." ORDER BY RAND()";
$img_query = mysql_query($sql);
$cont = mysql_num_rows($img_query);
if (!$dados['img_nome_arquivo'] && $cont > 0) {
$img = mysql_fetch_assoc($img_query);
$dados['img_nome_arquivo'] = $img['img_nome_arquivo'];
}
?>
<td style="width:100px">
<?php
if ($dados['img_nome_arquivo'] != "") {
?>
<a href="#ultimas_fotos" onclick="window.open('security/galeria/galeria.php?gal=<?= $dados['gal_codigo']; ?>', 'galeria', 'width=770,height=630,resizable=0,scrollbars=1');">
<img style="margin:0 10px 0 3px; border:1px solid #999;" src="security/galeria/imagem.php?gal=<?= $dados['gal_pasta']; ?>&img=<?= $dados['img_nome_arquivo']?>&thumb=1" border="1" align="left">
</a>
<?php
}
?>
</td>
<td style="width:200px;">
<span style="text-transform: uppercase;">
<a href="#ultimas_fotos" onclick="window.open('security/galeria/galeria.php?gal=<?= $dados['gal_codigo']; ?>', 'galeria', 'width=770,height=630,resizable=0,scrollbars=1');" style="color:#F1AF25; font-style:italic; font-weight:bold;"><?= $dados['gal_titulo']?></a>
</span>
<p style="font-size:11px; text-align:left;">
Data: <strong><?= $dados['gal_data'];?></strong>
<br />
Local: <strong><?= $dados['gal_local']?></strong>
<br />
<strong><? echo $cont;?></strong> Fotos.
</p>
</td>
<td width="15"></td>
<?php
}
}
?>
</tr>
</table>Bom, eu fui alterando e tals, e cheguei nisso aqui abaixo, que até funcionou, apareceram o titulo da galeria, o local da festa, mas a foto nao exibiu e nem os links apontam para o lugar correto, nao achei onde arrumar isso.
<?php
include("../security/conexao.php");
$query = mysql_query("SELECT * FROM galerias LEFT OUTER JOIN imagens ON img_codigo = gal_codigo_img ORDER BY gal_data DESC LIMIT 4");
?>
<?php
$dados= mysql_fetch_assoc($query);
$dados['gal_data'] = date('d/m/Y', strtotime($dados['gal_data']));
$sql = "SELECT * FROM imagens WHERE img_codigo_gal = ". $dados['gal_codigo'] ." ORDER BY RAND()";
$img_query = mysql_query($sql);
$cont = mysql_num_rows($img_query);
if (!$dados['img_nome_arquivo'] && $cont > 0) {
$img = mysql_fetch_assoc($img_query);
$dados['img_nome_arquivo'] = $img['img_nome_arquivo'];
}
?>
<?php
echo"
slide = {
// vetor com os slides
_imagens : [
";
while ($l = mysql_fetch_array($query)) {
if($x!=0){
echo ",";
}
echo '["'.$l['img_nome_arquivo'].'","'.$l['gal_titulo'].'","'.$l['gal_local'].'","'.$l['gal_codigo_img'].'"]';
++$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 gentileza, dêem-me uma ajuda ^^ Muito Obrigado!
