Adaptando SlideShow - Puxar imagens do Banco.

Ednelson Amaral Guinho · Junho 22, 2012

Fala família SB :ninja: blza?

Estou querendo fazer com que esse sistema puxe as imagens do banco de dados, seria possível? quem puderia me ajuda? agradeço, abração, fica com Deus. Vlw.

Ótima SEXTA :D

(sld.html)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<head><title>Exibição de Imagens</title></head>
<link rel="stylesheet" type="text/css" href="imagens.css" /> 
<script language="JavaScript" src="imagens.js"></script>
<body>
    <p><b>Teste do Código:</b></p>
    <div id="exibicao">
        <table cellpadding="0" cellspacing="0">
        <tr>
            <td bgcolor="#000000" nowrap="nowrap"><img id="image" src="images/u2.jpg" width='550' height='290' style="margin:0 10px 0px 0px;"></td>
            <td bgcolor="#000000" style="width:68px;" nowrap="nowrap">
            <img class="imgmenu" id="0" src="images/u2.jpg" width='58' height='58'>
            <br>
            <img class="imgmenu" id="1" src="images/skank.jpg" width='58' height='58'>
            <br>
            <img class="imgmenu" id="2" src="images/redhot.jpg" width='58' height='58'>
            <br>
            <img class="imgmenu" id="3" src="images/barao.jpg" width='58' height='58'>
            </td>
        </tr>
        </table>
    </div>
    <div id="transp"></div>
    <div id="tarja">Tarja U2</div></body>

imagens.jsp


// Imagens
var myPix = new Array(4)
myPix[0] = "u2";
myPix[1] = "skank";
myPix[2] = "redhot";
myPix[3] = "barao";

// Tarjas
var myText = new Array(4)
myText[0] = "Tarja U2";
myText[1] = "Tarja Skank";
myText[2] = "Tarja Red Hot Chili Peppers";
myText[3] = "Tarja Barão Vermelho";

// Variáveis
var format = ".jpg"; // formato das imagens
var timer = "4000"; // tempo, em milésimos de segundos
var i = 1; // não mexer.
var intervalo; // criada variável global da animação

function start() {
    intervalo = window.setInterval("change()",timer); // Inicia a animação
    document.getElementById(0).className = "imgatual";
}

// Função quando clica na imagem pequena exibe ela grande.
function abrir() {
    var main = document.getElementById("exibicao");
    var iten = main.getElementsByTagName("img");
    if (iten) {
        for (var i=0;i<iten.length;i++) {
            if (iten[i].className  == "imgmenu") {
                iten[i].onclick = function() { // quando clicar na imagem executar os comandos
                    limpa(); // função limpa
                    this.className = "imgclick"; // coloca borda do click
                    document.getElementById("image").src = '../images/' + myPix[this.id] + format; // exibe a imagem grande
                    document.getElementById("tarja").innerHTML = myText[this.id]; // coloca a tarja
                }
            }
        }
    }
}

// Função que limpa as bordas que estão com class=imgclick
function limpa() {
    var main = document.getElementById("exibicao");
    var iten = main.getElementsByTagName("img");
    if (iten) {
        for (var i=0;i<iten.length;i++) {
            if (iten[i].className  == "imgclick") { // busca quais imagens estão com class=imgclick
                iten[i].className = "imgmenu"; // as quais forem muda para imgmenu
            }
        }
    }
}

function borda() {
    var img = arguments[0]; // recebe o por parametro a ID da imagem
    var main = document.getElementById("exibicao");
    var iten = main.getElementsByTagName("img");
    if (iten) {
        for (var i=0;i<iten.length;i++) { // aqui modifica a borda da imagem que está com a class=igmatual ou class="imgclick" para imgmenu
            if ((iten[i].className  == "imgatual") || (iten[i].className == "imgclick")) {
                iten[i].className = "imgmenu";
            }
        }
        document.getElementById(img).className = "imgatual"; // aqui coloca a borda na imagem atual
    }
}

// Função que exibe a imagem grande!
function change() {
    var tam = myPix.length;
    if (i < tam) {
        document.getElementById("image").src = 'images/' + myPix[i % tam] + format; // exibe a imagem grande
        borda(i); // modifica a borda nas imagens pequenas
        document.getElementById('tarja').innerHTML=myText[i]; // coloca a tarja na imagem
        if (i == tam) i = -1;
        i++;
    }else { i = 0; }
}

window.onload = function() {
            abrir();
            start();
        }
[/code

[code]

imagens.css


body {
    font-family:Trebuchet MS;
    font-size:14px;
}
.codigo {
    width:260px;
    border:1px dashed;
    background-color:#E6E6FA;
    padding: 4px 4px;
}
.bigcodigo {
    width:550px;
    border:1px dashed;
    background-color:#E6E6FA;
    padding: 4px 4px;
}
#transp {
    position: absolute;
    top: 260px;
    left: 20px;
    width: 515px;
    height: 50px;
    background: #000000;
    padding: 5px;
    -moz-opacity:0.5;
    opacity: .5;
    filter:alpha(opacity=50);
    -khtml-opacity: 0.5;
}
#tarja {
    position: absolute;
    top: 260px;
    left: 20px;
    width: 515px;
    height: 50px;
    padding: 5px;
    z-index: 1;
    font-size: 0.8em;
    font-weight: bold;
    color: #ffffff;
}
.imgmenu {
    border:2px solid #000000;
    margin-top:2px;
    margin-bottom:2px;
    cursor: pointer;
}
.imgatual {
    border:2px solid #FFFFFF;
    margin-top:2px;
    margin-bottom:2px;
}
.imgclick {
    border:2px solid #B22222;
    margin-top:2px;
    margin-bottom:2px;
}

VALEUSSSS ABRAÇOS!

Entrar

Adaptando SlideShow - Puxar imagens do Banco.

Pergunta

Ednelson Amaral Guinho

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades