Jump to content
Fórum Script Brasil
  • 0

Adaptando SlideShow - Puxar imagens do Banco.


Ednelson Amaral Guinho
 Share

Question

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!

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      150.9k
    • Total Posts
      648.8k
×
×
  • Create New...