HTML foto's uit map

Jinte · 17 jun 2016

Is er een mogelijkheid foto's in een map te steken en dan automatisch de foto's uit die map op een HTML-webpagina te plaatsen?
Heeft iemand hier ervaring mee of kan iemand me helpen?

Ook andere mogelijkheden om dit te doen (iemand dat weinig tot geen HTML kennis heeft moet dit doen) zijn welkom:
De foto's moeten op een makkelijke manier geüpload worden naar de website.
We gebruiken Adobe Dreamweaver.

Bedankt

Aar · 17 jun 2016

Nee, automatisch zal niet kunnen met enkel HTML, want HTML is niets meer dan een opmaaktaal. Met Javacript zou ook niet direct kunnen, want die kan geen directories uitlezen.
De enige beste oplossing is een PHP-script met de scandir-functie bijvoorbeeld.

bron · 18 jun 2016

Met Javacript zou ook niet direct kunnen, want die kan geen directories uitlezen

Klopt idd, echter indirect is er een mogelijkheid met Javascript

Code:

HTML

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Foto's</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="myphotos" class="row cf">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="main.js"></script>
</body>

CSS bestand "style.css"

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
html, body {
    height: 100%;
}
body {
    margin: 0;
    background-color: #ddd;
}
img {
    border: 0;
    vertical-align: middle;
    display: block;
    max-width: 100%;
    height: auto;
}
.cf:before, .cf:after {
    display: table;
    content: " ";
}
.cf:after {
    clear: both;
}
.container {
    min-height: 100%;
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
}
.col {
    float: left;
    position: relative;
    min-height: 1px;
}
.col-33 {
    width: 33.333%;
}
#myphotos {
    padding: 15px 0;
}
#myphotos .col img {
    width: 100%;
    border: 7px solid transparent;
}
#myphotos .col:nth-child(4):before {
    display: table;
    content: " ";
}
#myphotos .col:nth-child(4) {
    clear: both;
}

Script "main.js"

function checkImage(src) {
    var img = new Image();
    img.onload = function() {
        $('#myphotos').append('<div class="col col-33"><img src="' + src + '" alt="" /></div>');
    };
    img.onerror = function() {
        //src bestaat niet
    };
    img.src = src;
}
$(document).ready(function() {
    var imgurl;
    for (i=1; i<100; i++) {
        imgurl = "./media/img-" + i + ".jpg";
        checkImage(imgurl);
    }
});

Je zit wel vast aan een bepaalde naamgeving van de foto's, namelijk: img-1.jpg ... img-99.jpg.
De foto's staan bij elkaar in map "media".

Suc6. Have fun.

** uploaden van foto's kun je doen met een FTP programma of via het control panel van je provider.

HTML foto's uit map

Jinte

Nieuwe gebruiker

Aar

Inventaris

bron

Moderator

Nieuwste berichten

Wij waarderen jouw privacy