On Click - Pop Up

[Gossi 0]

Pessoal,

 

O meu problema é o seguinte. Eu baixei um javascript que funciona como um "slide foto".

No código deste javascript tem uma tag que permite abrir o link num "blank" ou "new" frame.

Eu gostaria de definir as medidas deste pop-up.

Eu tenho um outro código que abre um pop-up com as medidas definidas, mas não estou conseguindo fazer ambos funcionarem em conjunto, será que alguém pode me dar um help???!!!

 

Segue o código do "slide foto"

 

<script type="text/javascript">/************************************************ Translucent Slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)* This notice MUST stay intact for legal use* Visit Dynamic Drive at [url=http://www.dynamicdrive.com/]http://www.dynamicdrive.com/[/url] for full source code***********************************************/var trans_width='320px' //slideshow widthvar trans_height='240px' //slideshow heightvar pause=5000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)var degree=10 //animation speed. Greater is faster.var slideshowcontent=new Array()//Define slideshow contents: [image URL, OPTIONAL LINK, OPTIONAL LINK TARGET]slideshowcontent[0]=["ofertas/02255/fachada.jpg", "ofertas/02255/home.htm", "_new"]slideshowcontent[1]=["ofertas/05051/fachada.jpg", "ofertas/05051/home.htm", "_new"]slideshowcontent[2]=["ofertas/05307/fachada.jpg", "ofertas/05307/home.htm", "_new"]////NO need to edit beyond here/////////////var bgcolor='white'var imageholder=new Array()for (i=0;i<slideshowcontent.length;i++){imageholder[i]=new Image()imageholder[i].src=slideshowcontent[i][0]}var ie4=document.allvar dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1if (ie4||dom)document.write('<div style="position:relative;width:'+trans_width+';height:'+trans_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>')else if (document.layers){document.write('<ilayer id=tickernsmain visibility=hide width='+trans_width+' height='+trans_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+trans_width+' height='+trans_height+' left=0 top=0>'+'<img src="'+slideshowcontent[0][0]+'"></layer></ilayer>')}var curpos=trans_width*(-1)var curcanvas="canvas0"var curindex=0var nextindex=1function getslidehtml(theslide){var slidehtml=""if (theslide[1]!="")slidehtml='<a href="'+theslide[1]+'" target="'+theslide[2]+'">'slidehtml+='<img src="'+theslide[0]+'" border="0">'if (theslide[1]!="")slidehtml+='</a>'return slidehtml}function moveslide(){if (curpos<0){curpos=Math.min(curpos+degree,0)tempobj.style.left=curpos+"px"}else{clearInterval(dropslide)if (crossobj.filters)crossobj.filters.alpha.opacity=100else if (crossobj.style.MozOpacity)crossobj.style.MozOpacity=1nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)tempobj.innerHTML=getslidehtml(slideshowcontent[curindex])nextindex=(nextindex<slideshowcontent.length-1)? nextindex+1 : 0setTimeout("rotateslide()",pause)}}function rotateslide(){if (ie4||dom){resetit(curcanvas)crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)crossobj.style.zIndex++if (crossobj.filters)document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20else if (crossobj.style.MozOpacity)document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2var temp='setInterval("moveslide()",50)'dropslide=eval(temp)curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"}else if (document.layers){crossobj.document.write(getslidehtml(slideshowcontent[curindex]))crossobj.document.close()}curindex=(curindex<slideshowcontent.length-1)? curindex+1 : 0}function jumptoslide(which){curindex=whichrotateslide()}function resetit(what){curpos=parseInt(trans_width)*(-1)var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)crossobj.style.left=curpos+"px"}function startit(){crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssubif (ie4||dom){crossobj.innerHTML=getslidehtml(slideshowcontent[curindex])rotateslide()}else{document.tickernsmain.visibility='show'curindex++setInterval("rotateslide()",pause)}}if (window.addEventListener)window.addEventListener("load", startit, false)else if (window.attachEvent)window.attachEvent("onload", startit)else if (ie4||dom||document.layers)window.onload=startit</script>

 

Segue o código que abre o pop-up:

 

<script language="JavaScript1.2">function popupoferta(page) {var w = 600;var h = 408;var lado = (screen.width - w) / 2;var topo = (screen.height - h) / 2;window.open(page,'ofertas','height='+h+',width='+w+',top='+topo+',left='+lado+'');}</script>

 

 

As tags que eu preciso editar são:

 

var slideshowcontent=new Array()//Define slideshow contents: [image URL, OPTIONAL LINK, OPTIONAL LINK TARGET]slideshowcontent[0]=["ofertas/02255/fachada.jpg", "ofertas/02255/home.htm", "_new"]slideshowcontent[1]=["ofertas/05051/fachada.jpg", "ofertas/05051/home.htm", "_new"]slideshowcontent[2]=["ofertas/05307/fachada.jpg", "ofertas/05307/home.htm", "_new"]

 

Obrigado!

[Crystian 0]

Seguinte cara, não gosto de fazer as coisas para os outros pq dae tu não aprende, vou te dar umas dicas, vamos ver se tu pega.

 

var trans_width='320px' //slideshow widthvar trans_height='240px' //slideshow height

Essas duas variaveis representam a altura e largura do POPUP (que não é popu, diga-se por passadem, mas sim um div). Pra você adaptar o código abaixo ao código acima você terá q pegar a parte q faz o cálculo do width e height conforme a resolução do usuário e colocar antes dessas duas linhas e pegar o q foi calculado e atribuir a essas váriaveis.

 

Não sei se tu entendeu, tenta fazer e qualquer coisa dá um grito q tento ser mais detalhado...

 

Abraço

[Gossi 0]

Seguinte cara, não gosto de fazer as coisas para os outros pq dae tu não aprende, vou te dar umas dicas, vamos ver se tu pega.

 

var trans_width='320px' //slideshow widthvar trans_height='240px' //slideshow height

Essas duas variaveis representam a altura e largura do POPUP (que não é popu, diga-se por passadem, mas sim um div). Pra você adaptar o código abaixo ao código acima você terá q pegar a parte q faz o cálculo do width e height conforme a resolução do usuário e colocar antes dessas duas linhas e pegar o q foi calculado e atribuir a essas váriaveis.

 

Não sei se tu entendeu, tenta fazer e qualquer coisa dá um grito q tento ser mais detalhado...

 

Abraço

<{POST_SNAPBACK}>

Valeu Crystian,

Vou fazer alguns testes aqui, se der errado eu aviso!

[Gossi 0]

Crystian,

 

Eu tentei fazer conforme você me explicou! Dê uma olhada no que fiz e me fale onde estou errando. A página está abrindo sem as medidas definidas.

 

var w = 500;var h = 320;var lado = (screen.width - w) / 2;var topo = (screen.height - h) / 2;var trans_width='320px' //slideshow widthvar trans_height='240px' //slideshow heightvar pause=5000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)var degree=10 //animation speed. Greater is faster.var slideshowcontent=new Array()//Define slideshow contents: [image URL, OPTIONAL LINK, OPTIONAL LINK TARGET]slideshowcontent[0]=["ofertas/02255/fachada.jpg", "ofertas/02255/home.htm", "height='+h+',width='+w+',top='+topo+',left='+lado+'"]slideshowcontent[1]=["ofertas/05051/fachada.jpg", "ofertas/05051/home.htm", "_new"]slideshowcontent[2]=["ofertas/05307/fachada.jpg", "ofertas/05307/home.htm", "_new"]

Valeu,

 

Cleber

[Gossi 0]

Pessoal,

 

Se mais alguém está acompanhando este fórum e puder me ajudar.

Eu fiz como o Crystian disse para unir os dois códigos, ficou assim:

 

var w = 500;var h = 320;var lado = (screen.width - w) / 2;var topo = (screen.height - h) / 2;var trans_width='320px' //slideshow widthvar trans_height='240px' //slideshow heightvar pause=5000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)var degree=10 //animation speed. Greater is faster.

Defini as medidas w h e quero que abra centralizada na tela independente da resolução.

O que eu não estou conseguindo fazer é a atribuição às variáveis. Os links que já vem definido com o código aparecem da seguinte forma:

 

slideshowcontent[0]=["ofertas/02255/fachada.jpg", "ofertas/02255/home.htm", "'_new"]slideshowcontent[1]=["ofertas/05051/fachada.jpg", "ofertas/05051/home.htm", "_new"]slideshowcontent[2]=["ofertas/05307/fachada.jpg", "ofertas/05307/home.htm", "_new"]

Desta maneira é fáicl definir a imagem do slide e a página que será aberta, o problema está em fazer abrir como pop-up. Pode até ser algo bem simples, imagino que seja super simples, mas não sou programador e não estou conseguindo fazer funcionar como gostaria, está abrindo como página inteira.

 

O código que abre o pop-up é:

 

<script language="JavaScript1.2">function popupoferta(page) {var w = 600;var h = 408;var lado = (screen.width - w) / 2;var topo = (screen.height - h) / 2;window.open(page,'ofertas','height='+h+',width='+w+',top='+topo+',left='+lado+'');}</script>

No <a href> eu uso o onclick com a função popupoferta e funciona corretamente. Neste código que estou usando para o slide a estrutura do link não utiliza o <a href> e é aí que estou penando. Não precisam fazer o código completo, só preciso de mais um pouco de ajuda com as estruturas.

 

Eu usei o caminho (page,'ofertas','height='+h+',width='+w+',top='+topo+',left='+lado+'') no lugar do "_new", mas não funcionou.

Valeu...

[Crystian 0]

var w = 500;

var h = 320;

var trans_width=((screen.width - w) / 2)+"px"; //slideshow width

var trans_height=((screen.height - h) / 2)+"px"; //slideshow height

var pause=5000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var degree=10 //animation speed. Greater is faster.

tenta assim...

[Gossi 0]

var w = 500;

var h = 320;

var trans_width=((screen.width - w) / 2)+"px"; //slideshow width

var trans_height=((screen.height - h) / 2)+"px"; //slideshow height

var pause=5000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var degree=10 //animation speed. Greater is faster.

tenta assim...

<{POST_SNAPBACK}>

Valeu Crystian,

 

Mas ainda assim não deu certo, ele alterou a medida dentro do slide. Yalvez eu não tenha explicado direito o que eu quero, para isso eu publiquei a página para você ter uma idéia melhor: www.panteraimoveis.com.br/teste

No caixa "Ofertas da Semana" o javascript altera a transição das imagens, até aí está ok. Quando eu clico numa das imagens eu gostaria que abrisse um pop-up com 500 x 320 centralizado na tela, é aí que eu não consigo chegar.

Eu possuo o seguinte javascript que abre um pop-up centralizado, mas não consigo incluir o onclick com a função no outro código (slide com transparência).

 

function popupoferta(page) {

var w = 600;

var h = 408;

var lado = (screen.width - w) / 2;

var topo = (screen.height - h) / 2;

window.open(page,'ofertas','height='+h+',width='+w+',top='+topo+',left='+lado+'');

}

 

Não sei qual a melhor solução para isso, se é unir os códigos ou usá-los em separado, já tentei das duas maneiras e não deu certo. http://forum.imasters.com.br/public/style_emoticons/default/cry.gif

[Crystian 0]

realemente não tinha entendido a tua dúvida...

tenta colocar a linha em vermelho no teu respectivo código isso então...

for (i=0;i<slideshowcontent.length;i++){

imageholder=new Image()

imageholder.src=slideshowcontent[0];

imageholder.onclick="popupoferta('slideshowcontent[1]')";

}

vê se tu acha essa parte do código... qualquer coisa posta ae!

[Gossi 0]

realemente não tinha entendido a tua dúvida...

tenta colocar a linha em vermelho no teu respectivo código isso então...

for (i=0;i<slideshowcontent.length;i++){

imageholder=new Image()

imageholder.src=slideshowcontent[0];

imageholder.onclick="popupoferta('slideshowcontent[1]')";

}

vê se tu acha essa parte do código... qualquer coisa posta ae!

<{POST_SNAPBACK}>

Cara, estamos quase lá!!!

Quando eu insiro a linha:

imageholder.onclick="popupoferta('slideshowcontent[1]')";

Abre a página sem as definições de largura e altura (eu coloquei a função popupoferta com todas as definições).

Eu tentei algumas coisas por aqui, por exemplo, eu eliminei as aspas (") e quando fiz isso ao carregar a página abriu o popup certinho (centralizado e nas medidas), mas sem o conteúdo e sem clicar (onclick) na imagem, inclusive no slide não apareceu a imagem.

[Crystian 0]

Desculpa, não sei onde eu tava com a cabeça, sinceramente ultimamente não tô ajudando muito....

faz assim...

imageholder.onclick="popupoferta('"+slideshowcontent[1]+"')";

Vê se dá certo... abraço

[Gossi 0]

Desculpa, não sei onde eu tava com a cabeça, sinceramente ultimamente não tô ajudando muito....

faz assim...

imageholder.onclick="popupoferta('"+slideshowcontent[1]+"')";

Vê se dá certo... abraço

<{POST_SNAPBACK}>

Crystian, não precisa se desculpar não! Agradeço muito a sua ajuda. :D

Infelizmente ainda não tá dando certo!

Eu publiquei a atualização da página www.panteraimoveis.com.br/teste, mas o pop-up ainda abre sem as definições de medidas. http://forum.imasters.com.br/public/style_emoticons/default/cry.gif

[Crystian 0]

Não adianta fica dificil de te ajudar sem eu testar... Meti a mão na massa....

faz o seguinte, tira aquela linha q eu te passei anteriormente

imageholder.onclick="popupoferta('"+slideshowcontent[1]+"')";

e muda essa function... pro q tá aí...

function getslidehtml(theslide){

var slidehtml=""

if (theslide[1]!="")

slidehtml='<a href="java script:void" onclick="popupoferta(\''+theslide[1]+'\')">'

slidehtml+='<img src="'+theslide[0]+'" border="0">'

if (theslide[1]!="")

slidehtml+='</a>'

return slidehtml

}

Testei aqui no mozila e funcionou...

 

Abraço

[Gossi 0]

PERFECT Crystian!!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Muitíssimo obrigado pelo auxílio!

Como você já percebeu a minha área não é javascript, mas no que eu puder ajudá-lo em outras áreas, fique à vontade para perguntar, aproveite dê uma olhada em meu portfólio www.gossidesign.com.br

 

Abraços,

 

Cleber

[Crystian 0]

Valeu se eu precisar d algo relacionado a design dou um grito pra ti...

Estou aqui pra ajudar no q sei, o q não é muito...

Só pra te avisar acessei teu portfólio e a data está com o ano errado...

 

Quinta-feira, 15 de Setembro de 19105

provavelmente esse problema não ocorre no IE... Isso provavemente seja por causa do getYear()... tenta trocar por getFullYear()...

 

Abraço

[Gossi 0]

Valeu se eu precisar d algo relacionado a design dou um grito pra ti...

Estou aqui pra ajudar no q sei, o q não é muito...

Só pra te avisar acessei teu portfólio e a data está com o ano errado...

 

Quinta-feira, 15 de Setembro de 19105

provavelmente esse problema não ocorre no IE... Isso provavemente seja por causa do getYear()... tenta trocar por getFullYear()...

 

Abraço

<{POST_SNAPBACK}>

Valeu mais uma vez Crystian! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Realmente estava getYear, já substituí por getFullYear. ;)

 

Abraço