Slideshow: PHP + MYSQL + JAVASCRIPT

Diego Macêdo · Novembro 14, 2008

Amigos, tenho o script abaixo que faz um slideshow de imagens de um array do javascript. Estou precisando fazer com que eu cadastre em um BD o endereços das imagens e o php 'escreva' no javascript o array dele. Sinceramente não sei se será possível fazer essa integração desta forma, mas fico aberto a sugestões.

Achei por aí sistemas de banners, onde eu posso fazer o upload das imagens e ele armazena as informações no BD e a cada vez que a página é carregada, ele exibe um randômico. Mas estou tendo a necessidade dele de uma forma dinâmica, onde ele carregue todos os banners e fique alterando em ordem a cada X segundos sem necessidade de carregar novamente a página.

Abaixo o código Javascript para realizar esse processo manualmente.

Código entre a tag <head>

<script language="JavaScript" type="text/javascript">
<!--
//BANNERS
var fadeimages=new Array()
fadeimages[0]=["banners/img1.jpg", "", ""]
fadeimages[1]=["banners/img2.jpg", "", ""]
fadeimages[2]=["banners/img3.jpg", "", ""]
fadeimages[3]=["banners/img4.jpg", "", ""]
fadeimages[4]=["banners/img5.jpg", "", ""]
fadeimages[5]=["banners/img6.jpg", "", ""]

var fadebgcolor="#333"

var fadearray=new Array() 
var fadeclear=new Array() 
 
var dom=(document.getElementById) 
var iebrowser=document.all
 
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=0 
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();})
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() 
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=20
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
 
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
 
 
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

Código para chamar o script e exibir na página (entre a tag <body>):

<script language="JavaScript" type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 468, 60, 0, 5000, 0, "R")

Vejam que o código faz o processo todo de fade in e fade out entre os banners, ele também tem a opção de deixar a ordem dos banners aleatório ou na ordem dada.

Resumindo: só preciso fazer com que o PHP 'escreva' dentro do código javascript naquela parte do comecinho do código onde fica o array.

Diego Macêdo · Novembro 16, 2008

Caso não tenham entendido a idéia.. vou tentar resumir aqui:

Vou postar um código 'bizarro' que eu tentei fazer aqui e não funcionou..

CÓDIGO JAVASCRIPT + PHP = É POSSIVEL DESSA FORMA?

<?php
	$sql  = mysql_query("SELECT * FROM banners WHERE status = 1 ORDER BY id ASC") or die(mysql_error());
	$dados = mysql_num_rows($sql);  
  
	  for($i = 0; $i < $dados; $i++){  
	  $id = @mysql_result($sql, $i, "id");
	  $img = @mysql_result($sql, $i, "img");
	  
	  print 'fadeimages['.$id.']=["'.$img.'", "", ""]';
	  }

?>

Teoricamente, esse código acima era pra sair esse resultado aqui de baixo.

Preciso que o php faça uma consulta no BD e crie um array no JAVASCRIPT nesse modelo aqui abaixo:

..//
fadeimages[0]=["img1.jpg", "", ""];
fadeimages[1]=["img2.jpg", "", ""];
fadeimages[1]=["img3.jpg", "", ""];
//...

Alguém poderia pelo menos me dar uma luz de como fazer isso desse jeito ou de outra forma se possível?

Outra forma que eu pensei:

É possível gerar um arquivo .js e o php determinar o seu conteudo?

eibon · Novembro 16, 2008

É sim amigo...

Exemplo:

<script>
	var ex = new Array();
	ex[0]=[<?php echo "'".$variavel."'"?>, '', ''];
</script>

Abraço!

Diego Macêdo · Novembro 17, 2008

O interessante é que se eu rodar somente o código PHP, sem nada de JAVASCRIPT ele funciona normalmente. Faz a consulta e exibe as informações coletadas da consulta no MYSQL.

Mas se eu unir o código com o JAVASCRIPT, ele simplesmente deixa de funcionar.

Alguém analisa o código acima aí e me diz onde estou errando.

Obrigado!

GabrielLM · Novembro 17, 2008

Faz do jeito do proust, ou escreve tudo em php.

<?php
print "
<script language=\"JavaScript\" type=\"text/javascript\">\.
<!--\n
//BANNERS\n
var fadeimages=new Array()\n
fadeimages[0]=[\"banners/img1.jpg\", \"\", \"\"]\n
fadeimages[1]=[\"banners/img2.jpg\", \"\", \"\"]\n
fadeimages[2]=[\"banners/img3.jpg\", \"\", \"\"]\n
fadeimages[3]=[\"banners/img4.jpg\", \"\", \"\"]\n
fadeimages[4]=[\"banners/img5.jpg\", \"\", \"\"]\n
fadeimages[5]=[\"banners/img6.jpg\", \"\", \"\"]\n
//o resto...
";
?>

Diego Macêdo · Novembro 17, 2008

Amigos, consegui!

O problema era simplesmente um ponto-e-virgula que estava faltando no final do array.

Obrigado pela ajuda de qm ajudou! ;)

Guilherme Domingues · Fevereiro 11, 2010

Galera, estou com o mesmo problema com o código apresentado pelo Diego. Eu segui tudo que o tópico diz, mas ainda sim estou tendo problemas. Será que alguém pode me ajudar? Eu fiz assim: coloquei o código java numa página. O códido php, onde está o array. Consegui que o php escrevesse o array conforme os registros no MYSQL. Mas está dando erro do tipo:

Mensagem: 'pausethis' não está definido

Linha: 17

Caractere: 2

Código: 0

Diego Macêdo · Fevereiro 11, 2010

Este código está bugado, mas funciona.

Estou utilizando um outro sistema que faz a mesma coisa e é mais simples, utilizando JQuery, mas basicamente é a mesma coisa. Na verdade ele é um plugin para o JQuery. Nome dele é "Cycle"

LINK

Boa sorte! :)

Guilherme Domingues · Março 2, 2010

Olá pessoal. Estou precisando novamente da ajuda de vocês. Eu preciso encontrar um sistema de slideshow, onde eu tenha a possibilidade de inserir fotos e vídeos juntos. Por exemplo, que começasse a passar as fotos em slideshow e depois passasse o vídeo. Onde eu encontro um script desses. Pode ser em flash ou em java.

Valeu pessoal!

Arquivado

Slideshow: PHP + MYSQL + JAVASCRIPT

Recommended Posts

Diego Macêdo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diego Macêdo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

eibon 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diego Macêdo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielLM 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diego Macêdo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Domingues 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diego Macêdo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Domingues 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Fóruns

Tempo Real

Informação importante