Fórum para dúvidas sobre JavaScript, ECMAScript, AJAX, XML e jQuery.
Moderador: web
 por Pedro Flavio Offline » Qui Jul 14, 2011 11:20 pm
|
Olá. Sou novo no fórum e estou tentando aprender html na "raça." Tenho um site simples e agradeço a ajuda sobre a seguinte questão:
1- observe as insruções:
<li class="th2">
<div><i><em></em>
<img src="http://site/abstrato1.jpg" title="" alt="" />
</i></div></li>
<li class="th3">
<div><i><em></em>
<img src="http://site/abstrato2.jpg" title="" alt="" />
</i></div></li>
2- as imagens a serem carregadas são "abstrato1.jpg, abstrato2.jpg.
Esta página contém 20 imagens neste formato.
Gostaria de fazer uma atualização automática na criação de novas páginas, passando para a
tag src as variáveis necessárias.
Ex: var_foto="abstrato"
var_nfoto="1"
var_tipo=".jpg"
Estas varíáveis seriam utilizadas na primeira div.
Á partir da segunda div (a li class="th2"), o número da foto deve ser automaticamente incrementado
de +1, próxima div seria incrementado de +2, e assim até 20 divs.
Agradeço toda e qualquer ajuda pq até agora não consegui implementar esta função com o pouco que
aprendi sobre programação.
MOVIDO PARA JAVASCRIPT
Pedro Flavio
MEMBRO
Mensagens: 16
Registrado em: Qui Jul 14, 2011 11:06 pm
|
por web Offline » Qui Jul 14, 2011 11:28 pm
Não entendi muito bem o que quer fazer, mas, com HTML sozinho, não dá para ter esse dinamismo que precisa. Pelo que entendi, você quer fazer um loop, inserindo as fotos seguindo uma ordem.
Não sei se você já conhece o jQuery, com essa biblioteca, dá para fazer um loop, e percorrer todas as imagens de uma div, dessa forma dá para adicionar as fotos seguindo uma ordem numérica.
Montei aqui um exemplo para você testar, crie 3 figuras com os nomes: foto1.jpg, foto2.jpg e foto3.jpg
Ai, coloque esse código em um documento .html na mesma pasta das fotos
- Código: Selecionar todos
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var i = 0;
$('#img img').each(function(index) {
i++;
$(this).attr('src', 'foto'+i+'.jpg');
});
});
</script>
<div id="img">
<img src="">
<img src="">
<img src="">
</div>
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12460
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por Pedro Flavio Offline » Sex Jul 15, 2011 1:01 am
Olá. Obrigado pela rápida resposta. Não eserava algum tipo de ajuda tão cedo. Veja, me preocupo um pouco por ainda não ter uma boa base nestas linguagens, e vou tentar explicar melhor. Tenho uma página padrão pronta que foi modificada de um script gratuito. Este script chama uma galeria de fotos através de instruções js. No html foi inserido as urls para serem abertas 20 imagens. No meu site, tenho cerca de 1500 imagens e uns 600 emoticons distribuidos em várias pastas, por categorias, como animais, crianças, etc. Imagine o trabalho para colocar todas as urls em várias páginas. Minha idéia é declarar as variáveis que significam a foto (nome da foto, numero e tipo) no cabeçalho do html, e qdo a rotina de carregamento das fotos for chamada, estes valores serão automaticamente preenchidos no local de scr="fotonome+tipo". Não é loop, é apenas substituição da url dentro de <img scr=. Com esta opção, posso criar rapidamente uma página, apenas alterando os valores das variáveis. Espero ter esclarecido, e torço para que vc tenha alguma idéia.
Pedro Flavio
MEMBRO
Mensagens: 16
Registrado em: Qui Jul 14, 2011 11:06 pm
|
por web Offline » Sex Jul 15, 2011 11:17 am
Montei uma base baseado no id da foto, você irá definir no script os caminhos para os ids
Você deve observar a numeração no script, para seguir a sequência
- Código: Selecionar todos
<script>
window.onload = function() {
// f... = foto | n... = número | t... = formato
var f1 = "foto"; var n1="1"; var t1="jpg"; // foto1
var f2 = "foto"; var n2="2"; var t2="jpg"; // foto2
var f3 = "foto"; var n3="3"; var t3="jpg"; // foto3
document.getElementById("i1").src=f1+n1+"."+t1; // completa foto1
document.getElementById("i2").src=f2+n2+"."+t2; // completa foto2
document.getElementById("i3").src=f3+n3+"."+t3; // completa foto3
}
</script>
<img src="" id="i1">
<img src="" id="i2">
<img src="" id="i3">
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12460
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por Pedro Flavio Offline » Sex Jul 15, 2011 10:52 pm
Olá. Não consegui fazer funcionar sua sugestão com o get para cada foto. Estou postando a html completo para sua análise. Gostaria de reforçar que o objetivo é ter um local onde declaro o nome da foto que será igual para as 20 div (chamadas de th1, th2, th3...), sendo que a única coisa a mudar é o número da foto; por ex.: alegre0.gif, alegre1.gif...).
A idéia é deixar fixo as th1, th2, th3 e no campo "scr= " o nome completo da foto será automaticamente carregado. Espero não estar abusando... Grato antecipadamente.
Este é o html básico. Nele estou anexando o padrão de páginas do meu site (http://www.phoenix-br.com).
Use a tag Code para scripts
- Código: Selecionar todos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls dot com | Gallery left-right click </title>
<meta name="Author" content="Stu Nicholls" />
<link rel="stylesheet" media="all" type="text/css" href="left_right_click/left_right_click.css" />
<!--[if IE]>
<link rel="stylesheet" media="all" type="text/css" href="left_right_click/left_right_click_ie.css" />
<![endif]-->
<script src="left_right_click/scroll_gallery.js" type="text/javascript"></script>
</head>
<body onload="clickMenu('gallery')">
<div id="gallery">
<img class="left" src="left_right_click/thumbs/left.gif" alt="left arrow" title="" />
<ul>
<li class="chosen th1">
<div><i><em></em>
<img class="start" src="abstrato1.jpg" title="" alt="" style="width: 376px; height: 250px" />
</i></div>
</li>
<li class="th2">
<div><i><em></em>
<img src="alegre1.gif" title="" alt="" />
</i></div>
</li>
<li class="th3">
<div><i><em></em>
<img src="http://www.cssplay.co.uk/menu/trees/t3.jpg" title="" alt="" />
</i></div>
</li>
<li class="th4">
<div><i><em></em>
<img src="http://www.cssplay.co.uk/menu/trees/t4.jpg" title="" alt="" />
</i></div>
</li>
<li class="th5">
<div><i><em></em>
<img src="http://www.cssplay.co.uk/menu/trees/t5.jpg" title="" alt="" />
</i></div>
</li>
<li class="th6">
<div><i><em></em>
<img src="http://www.cssplay.co.uk/menu/trees/t6.jpg" title="" alt="" />
</i></div>
</li>
<li class="th7">
<div><i><em></em>
<img src="http://www.cssplay.co.uk/menu/trees/t7.jpg" title="" alt="" />
</i></div>
</li>
<li class="hide th8">
<div><i><em></em>
<img src="http://www.cssplay.co.uk/menu/trees/t8.jpg" title="" alt="" />
</i></div>
</li>
<li class="hide th9">
<div><i><em></em>
<img src="http://www.cssplay.co.uk/menu/trees/t9.jpg" title="" alt="" />
</i></div>
</li>
<li class="hide th10">
<div><i><em></em>
<img src="http://www.cssplay.co.uk/menu/trees/t10.jpg" title="" alt="" />
</i></div>
</li>
<li class="hide th11">
<div><i><em></em>
<img src="http://www.cssplay.co.uk/menu/trees/t11.jpg" title="" alt="" />
</i></div>
</li>
<li class="hide th12">
<div><i><em></em>
<img src="http://www.cssplay.co.uk/menu/trees/p1.jpg" title="" alt="" />
</i></div>
</li>
<li class="hide th13">
<div><i><em></em>
<img src="http://www.cssplay.co.uk/menu/trees/t13.jpg" title="" alt="" />
</i></div>
</li>
<li class="hide th14">
<div><i><em></em>
<img src="http://www.cssplay.co.uk/menu/trees/t14.jpg" title="" alt="" />
</i></div>
</li>
<li class="hide th15">
<div><i><em></em>
<img src="http://www.cssplay.co.uk/menu/trees/t15.jpg" title="" alt="" />
</i></div>
</li>
<li class="hide th16">
<div><i><em></em>
<img src="http://www.cssplay.co.uk/menu/trees/t16.jpg" title="" alt="" />
</i></div>
</li>
<li class="hide th17">
<div><i><em></em>
<img src="http://www.cssplay.co.uk/menu/trees/t17.jpg" title="" alt="" />
</i></div>
</li>
<li class="hide th18">
<div><i><em></em>
<img src="http://www.cssplay.co.uk/menu/photo/pic_1v.jpg" title="" alt="" />
</i></div>
</li>
<li class="hide th19">
<div><i><em></em>
<img src="http://www.cssplay.co.uk/menu/trees/t18.jpg" title="" alt="" />
</i></div>
</li>
</ul>
<img class="right" src="left_right_click/thumbs/right.gif" alt="right arrow" title="" />
</div>
<p>© 2007 Stu nicholls - cssplay.co.uk</p>
</body>
</html>
Pedro Flavio
MEMBRO
Mensagens: 16
Registrado em: Qui Jul 14, 2011 11:06 pm
|
por web Offline » Sex Jul 15, 2011 11:13 pm
Testou o script que postei? Observe que cada imagem tem um id, e que tem um script em JS que envia cada nome da imagem baseado no id.
No seu caso, é só você colocar ids nas imagens que receberam valores. Depois no topo criar as linhas para cada imagem.
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12460
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por Pedro Flavio Offline » Sáb Jul 16, 2011 12:10 am
Olá Web. Testei sim o último script que vc postou. Desculpe minha ignorância, mas não consegui fazê-lo funcionar. Tentei colocando logo após as metas tags, antes da chamada da div "gallery", tudo sem sucesso. Ao rodar o html, não aparece as fotos. Se logo antes ou logo depois da chamada da linha com <div id="gallery">, a foto que seria passada pelo seu script não carrega ou não há rolagem pelas imagens. Se vc puder, visite meu site em www.phoenix-br.com e na pág de abertura, clique em um dos dois pontos finais no texto à esquerda. Estes pontos estão em amarelos e são links para testes deste html que coloquei no site. Se vc fizer esta visita, verá que estou com outro pequeno problema, que se refere que a imagem selecionada na bara de rolagem é apresentada na div, mas não aparece com thumbnail, conforme mostra o html original. Uma opção não muito "inteligente", mas funcional é eu criar várias pastas sobre o mesmo tema, com 20 imagens cada, com o mesmo nome. Ex. alegres1, alegres2, alegres3,... e em qualquer destas pastas terei os arquivos alegre1, alegre2, alegre3... criando uma página para acessar cada uma das pastas, não terei que ficar mudando o nome dos arquivos, o que é muito trabalhoso.
De qualquer forma, lhe agradeço mais uma vez pela paciência e pela ajuda. Um abraço.
Pedro Flavio
MEMBRO
Mensagens: 16
Registrado em: Qui Jul 14, 2011 11:06 pm
|
por web Offline » Sáb Jul 16, 2011 12:18 am
Testei os 2 links, e nenhum parece que você tentou fazer a implementação do código que indiquei.
Cria uma página simples, com o exemplo que postei, e testa com algumas figuras somente. Ai você vai aumentando. Lembre-se de que a base é o id que vai na foto, como no exemplo.
A class você pode usar qual precisar, o importante é o id para o script passar o valor da url.
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12460
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por Pedro Flavio Offline » Sáb Jul 16, 2011 12:28 am
Web, se vc visitou meu site, o que viu foi a primeira pág que modifiquei baseado no script para a apresentação com rolagem de fotos. No site não tem nenhum teste com seu script. Estou apanhando para melhorar o html com a introdução destas variáveis, depois que percebi que para construir 220 pág com 20 fotos cada, o trablho seria imenso. O último script que vc sugeriu foi testado no meu micro, usando o frontpage e rodando o html dentro do micro mesmo. Vou criar uma página nova e "brincar" com seu script para entendê-lo melhor e depois ver como posso inserir no html que já postei aqui. Valeu. Lhe darei um retorno em breve.
Pedro Flavio
MEMBRO
Mensagens: 16
Registrado em: Qui Jul 14, 2011 11:06 pm
|
por Pedro Flavio Offline » Sáb Jul 16, 2011 1:23 am
Olá Web. Seu script funcionou perfeitamente em uma pág nova. Apenas fiz uma alteração (veja abaixo), que já me incrementa em "1" o número da foto. Vou tentar inserir no html da minha pág padrão e lhe dou novo retorno. Valeu.
- Código: Selecionar todos
</head>
<script>
window.onload = function() {
// f... = foto | n... = número | t... = formato
// var f1 = "alegre"; var n1="0"; var t1="gif"; // foto1
// var f2 = "alegre"; var n2="1"; var t2="gif"; // foto2
// var f3 = "alegre"; var n3="3"; var t3="gif"; // foto3
var f1 = "alegre"; //alterei aqui
n1 = 0; // passei de variável literal para númerica
var t1 = "gif";
document.getElementById("i1").src=f1+n1+"."+t1; // completa foto1
document.getElementById("i2").src=f1+(n1=n1+=1)+"."+t1; // completa foto2 // aqui incrementa 1
document.getElementById("i3").src=f1+(n1=n1+=1)+"."+t1; // completa foto3
document.getElementById("i4").src=f1+(n1=n1+=1)+"."+t1; // completa foto4
}
</script>
<body>
<img src="" id="i1">
<img src="" id="i2">
<img src="" id="i3">
<img src="" id="i4">
</body>
Pedro Flavio
MEMBRO
Mensagens: 16
Registrado em: Qui Jul 14, 2011 11:06 pm
|
por web Offline » Sáb Jul 16, 2011 12:03 pm
f1, n1 e t1 você pode colocar na mesma linha, para facilitar a edição
- Código: Selecionar todos
var f1 = "alegre"; n1 = 0; var t1 = "gif";
A mesma coisa com as outras linhas da sequência
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12460
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por Pedro Flavio Offline » Sáb Jul 16, 2011 12:09 pm
Olá Web. Obrigado por ter "comprado" minha briga... Seu script funciona perfeitamente como quero se aplicado a uma página nova. Neste momento estou tentando inseri-lo na página com a chamada das div th, mas não funciona. Ainda não consegui entender. Dependendo do lugar onde coloco a função document.get, a imagem não aparece e tb não há rolagem da tela; dependendo do lugar, não há imagem, mas a rolagem funciona. Estou tentando entender tudo isto e fazer funcionar. Valeu.
Pedro Flavio
MEMBRO
Mensagens: 16
Registrado em: Qui Jul 14, 2011 11:06 pm
|
por web Offline » Sáb Jul 16, 2011 12:16 pm
Dá uma analisada no script que indiquei. Ele funciona passando os valores para a div, pelo id. Sendo assim, a estrutura do seu script deve estar de forma que cada imagem que será alterada tenha o no js.
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12460
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por Pedro Flavio Offline » Sáb Jul 16, 2011 12:55 pm
Vou abusar de sua paciência e conhecimentos... Vc é a única pessoa que está me ajuando. No mínimo estou aprendendo um pouco mais. Vou continuar pesquisando/estudando.
Aqui vão os js para suas análises.
NÃO POSTE SEM ANTES USAR A TAG CODE NOS SCRIPTS
- Código: Selecionar todos
left_right_click
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls/gallery/left_right_click.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#gallery {width:534px; position:relative; height:60px; padding-top:356px; margin:0 113px 90px 113px;}
#gallery img.left {width:55px; height:62px; background:#444; float:left;cursor:pointer;}
#gallery img.right {width:55px; height:62px; background:#444; float:left;cursor:pointer;}
#gallery ul {list-style:none; padding:0; margin:0; float:left; background:#444; border:2px solid #444; border-width:5px 2px;}
#gallery ul li {display:inline; width:50px; height:50px; float:left; margin:0 4px; border:1px solid #000; cursor:pointer;}
#gallery ul li.hide {display:none;}
/* using background images */
#gallery ul li.th1 {background:url(thumbs/th1.jpg);}
#gallery ul li.th2 {background:url(thumbs/th2.jpg);}
#gallery ul li.th3 {background:url(thumbs/th3.jpg);}
#gallery ul li.th4 {background:url(thumbs/th4.jpg);}
#gallery ul li.th5 {background:url(thumbs/th5.jpg);}
#gallery ul li.th6 {background:url(thumbs/th6.jpg);}
#gallery ul li.th7 {background:url(thumbs/th7.jpg);}
#gallery ul li.th8 {background:url(thumbs/th8.jpg);}
#gallery ul li.th9 {background:url(thumbs/th9.jpg);}
#gallery ul li.th10 {background:url(thumbs/th10.jpg);}
#gallery ul li.th11 {background:url(thumbs/th11.jpg);}
#gallery ul li.th12 {background:url(thumbs/th12.jpg);}
#gallery ul li.th13 {background:url(thumbs/th13.jpg);}
#gallery ul li.th14 {background:url(thumbs/th14.jpg);}
#gallery ul li.th15 {background:url(thumbs/th15.jpg);}
#gallery ul li.th16 {background:url(thumbs/th16.jpg);}
#gallery ul li.th17 {background:url(thumbs/th17.jpg);}
#gallery ul li.th18 {background:url(thumbs/th18.jpg);}
#gallery ul li.th19 {background:url(thumbs/th19.jpg);}
/* remove visibility:hidden; if you want to use the original images as thumbnails */
#gallery ul li img {visibility:hidden;display:block; width:50px; height:50px;}
#gallery ul li span {display:none; position:absolute; left:61px; top:430px; width:411px;font-family:verdana, arial, sans-serif; color:#666; font-size:11px; line-height:15px; text-align:justify;}
#gallery ul li b {color:#444;}
#gallery ul li.chosen {border-color:#fff; cursor:default;}
#gallery ul li.chosen div {position:absolute; left:0; top:0; width:532px; height:355px; background:#444; border:1px solid #000; border-width:1px 1px 0 1px;}
#gallery ul li.chosen div i {width:530px; height:355px; display:table-cell; vertical-align:middle; text-align:center;}
#gallery ul li.chosen div i img {visibility:visible; width:auto; height:auto; border:1px solid #aaa; margin:0 auto;}
#gallery ul li.chosen span {display:block;}
scroll_gallery
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this script and the associated (x)html
is available at http://www.stunicholls/gallery/left_right_click.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This script and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
clickMenu = function(gallery)
{
var getImg = document.getElementById(gallery).getElementsByTagName("IMG");
var getLi = document.getElementById(gallery).getElementsByTagName("LI");
for (var i=0; i<getImg.length; i++) {
getImg[i].onclick=function() {
if ((this.className.indexOf('left'))!=-1) {
for (var x=getLi.length-1; x>0; x--) {
if ((getLi[x].className.indexOf('chosen'))!=-1) {
getLi[x].className=getLi[x].className.replace("chosen", "");
x--;
if (x>-1) {
getLi[x].className+=" chosen";
if (x>-1 && x<getLi.length-7){
getLi[x].className=getLi[x].className.replace("hide", "");
if ((getLi[x+7].className.indexOf('hide'))==-1)
{
getLi[x+7].className+=" hide";
}
}
}
}
}
}
if ((this.className.indexOf('right'))!=-1) {
for (var x=0; x<getLi.length-1; x++) {
if ((getLi[x].className.indexOf('chosen'))!=-1) {
getLi[x].className=getLi[x].className.replace("chosen", "");
x++;
if (x<getLi.length) {
getLi[x].className+=" chosen";
if (x>6 && x<getLi.length) {
getLi[x].className=getLi[x].className.replace("hide", "");
if ((getLi[x-7].className.indexOf('hide'))==-1)
{
getLi[x-7].className+=" hide";
}
}
}
}
}
}
}
}
for (var i=0; i<getLi.length; i++) {
getLi[i].onclick=function() {
for (var x=0; x<getLi.length; x++) {
if ((getLi[x].className.indexOf('chosen'))!=-1) {
getLi[x].className=getLi[x].className.replace("chosen", "");
}
}
this.className+=" chosen";
}
}
}
Pedro Flavio
MEMBRO
Mensagens: 16
Registrado em: Qui Jul 14, 2011 11:06 pm
|
por web Offline » Sáb Jul 16, 2011 2:39 pm
Vi aqui que é o script de slide da galeria que você usa. Só não faço a adaptação, só indico para você fazer.
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12460
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
Voltar para Javascript, XML e AJAX
Quem está online
Usuários navegando neste fórum: Nenhum usuário registrado e 2 visitantes
|
|
|
