Simple gallery with javascript

Asked

Viewed 1,135 times

0

I wanted to make a simple gallery, just to pass images that are inside a folder, but would be several folders, with a number of different images so it would have to be automatic. My code is like this:

Javascript:

function forward(){
    document.getElementById("img").src="diretorio";
}
function back(){
    document.getElementById("img").src="diretorio";
}

HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/galery.css">
    <script language="JavaScript" src="js/galery.js"></script>
</head>
<body>
        <center><img id="img" src="" style="border: solid 50px grey;"></center>
        <div style="position: absolute; color: white; left: 45%; cursor: pointer;"><h1 onclick="back()"><<</h1></div>
        <div style="position: absolute; color: white; left: 50%; cursor: pointer;"><h1 onclick="forward()">>></h1></div>
</body>
</html>
javascript gallery
  • 1

    to be automatic, you will need a serverside language, PHP type, or any other. Ja using something server side?

1 answer

1

Auto Gallery with pure Javascript DEMO

CSS

* {margin: 0; padding: 0;}
body {background: #000}
a,img {border: none;}
.trs {-webkit-transition:all ease-out 0.5s;
    -moz-transition:all ease-out 0.5s;
    -o-transition:all ease-out 0.5s;
    -ms-transition:all ease-out 0.5s;
    transition:all ease-out 0.5s;}  
#slider {position: relative; z-index: 1;}
#slider a { position: absolute; top: 0; left: 0; opacity: 0;filter:alpha(opacity=0);}
.ativo {opacity: 1!important; filter:alpha(opacity=100)!important;}

/*controladores*/
span {background: #0190EE; cursor: pointer; opacity: 0;filter:alpha(opacity=0); position: absolute; bottom: 40%; width: 43px; height: 43px; z-index: 5;}
.next {right: 10px;}
.next:before,.next:after {left: 21px;}
.next:before {
    -webkit-transform: rotate(-42deg);
    top: 5px;
}
.next:after {
    -webkit-transform: rotate(-132deg);
    top: 19px;
}
.next:before,.next:after,.prev:before,.prev:after {content: "";
    height: 20px;
    background: #fff;
    width: 1px;
    position: absolute;
}
.prev {left: 10px;}
.prev:before,.prev:after {left: 18px;}
.prev:before {
    -webkit-transform: rotate(42deg);
    top: 5px;
}
.prev:after {
    -webkit-transform: rotate(132deg);
    top: 19px;
}

figure:hover span {opacity: 0.76;filter:alpha(opacity=76);}

figure {
    max-width: 640px;
    height: 480px;
    position: relative;
    overflow: hidden;
    margin: 50px auto;
}

figcaption {padding-left: 20px;color: #fff; font-family: "Kaushan Script","Lato","arial"; font-size: 22px; background: rgba(1, 144, 238, 0.76); width: 100%; position: absolute; bottom: 0; left: 0; line-height: 55px; height: 55px; z-index: 5}

Change the images to fit well max-width: 640px; and height: 480px; in this snippet of CSS code

figure {
    max-width: 640px;
    height: 480px;
    position: relative;
    overflow: hidden;
    margin: 50px auto;
}

Javascript

function setaImagem(){
    var settings = {
        primeiraImg: function(){
            elemento = document.querySelector("#slider a:first-child");
            elemento.classList.add("ativo");
            this.legenda(elemento);
        },

        slide: function(){
            elemento = document.querySelector(".ativo");

            if(elemento.nextElementSibling){
                elemento.nextElementSibling.classList.add("ativo");
                settings.legenda(elemento.nextElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");
                settings.primeiraImg();
            }

        },

        proximo: function(){
            clearInterval(intervalo);
            elemento = document.querySelector(".ativo");

            if(elemento.nextElementSibling){
                elemento.nextElementSibling.classList.add("ativo");
                settings.legenda(elemento.nextElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");
                settings.primeiraImg();
            }
            intervalo = setInterval(settings.slide,4000);
        },

        anterior: function(){
            clearInterval(intervalo);
            elemento = document.querySelector(".ativo");

            if(elemento.previousElementSibling){
                elemento.previousElementSibling.classList.add("ativo");
                settings.legenda(elemento.previousElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");                     
                elemento = document.querySelector("a:last-child");
                elemento.classList.add("ativo");
                this.legenda(elemento);
            }
            intervalo = setInterval(settings.slide,4000);
        },

        legenda: function(obj){
            var legenda = obj.querySelector("img").getAttribute("alt");
            document.querySelector("figcaption").innerHTML = legenda;
        }

    }

    //chama o slide
    settings.primeiraImg();

    //chama a legenda
    settings.legenda(elemento);

    //chama o slide à um determinado tempo
    var intervalo = setInterval(settings.slide,4000);
    document.querySelector(".next").addEventListener("click",settings.proximo,false);
    document.querySelector(".prev").addEventListener("click",settings.anterior,false);
}

window.addEventListener("load",setaImagem,false);

Html

<figure>
   <span class="trs next"></span>
   <span class="trs prev"></span>

   <div id="slider">
      <a href="#" class="trs">
        <img src="diretorio/nome-da-imagem.ext" alt="" title="" /></a>
      <a href="#" class="trs">
        <img src="diretorio/nome-da-imagem.ext" alt="" title="" /></a>
    <a href="#" class="trs">
        <img src="diretorio/nome-da-imagem.ext" alt="" title="" /></a>
    <a href="#" class="trs">
        <img src="diretorio/nome-da-imagem.ext" alt="" title="" /></a>
    <a href="#" class="trs">
        <img src="diretorio/nome-da-imagem.ext" alt="" title="" /></a>
    <!-- tantas imagens quantas forem necessárias -->   
   </div>

   <figcaption></figcaption>
</figure>

Browser other questions tagged javascript gallery

You are not signed in. Login or sign up in order to post.