[JS] Lightbox foto's preloaden

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<?php
                if($handle = opendir("media/".$albums[$_GET['a']])) { // Open the directory
                        while(false !== ($file = readdir($handle))) {
                                if($file != "." && $file != "..") {
                                        $pics[] = $file;
                                }
                        }
                }
                closedir($handle);

                $count = count($pics);

        if(IsSet($_GET['p']) && $_GET['p'] == "media") {

        <script>
            var counter = 0;

                    function loadImages(img) {

                        if(!img.complete) {
                            counter++
                            document.getElementById('totaal').value = counter;
                        }
                        if(counter ==  print($count); ) {
                            document.getElementById('laden').className = "hidden";
                            document.getElementById('foto').className = "fotos";
                        }
                    }
                </script>

<div id="laden" class="fotosloading">
    <br />
    Bezig met laden..
    <br /><br />
    <img src="images/laden.gif" alt="" />
    <br /><br />
    <input value="0" id="totaal" /> /  print($count);
</div>
<div id="foto" class="hidden">

        }

              if(!empty($count)) {
                sort($pics);

                $maxwidth = 120;
                $maxheight = 90;

                foreach($pics as $key => $pic) {

                  $size = getimagesize('media/'.$albums[$_GET['a']].'/'.$pic);

                  if($size['mime'] == 'image/jpeg' || $size['mime'] == 'image/gif' || $size['mime'] == 'image/png') {
                    $factorwidth = $size[0] / $maxwidth;
                    $factorheight = $size[1] / $maxheight;

                    $width = round($size[0] / $factorwidth);
                    $height = round($size[1] / $factorheight);

                                        $img = 'phpThumb/phpThumb.php/'.$width.'x'.$height.';../media/'.$albums[$_GET['a']].'/'.$pic;

                    echo '<a href="/media/'.$albums[$_GET['a']].'/'.$pics[$key].'" rel="lightbox['.$_GET['a'].']"><img id="img', $key ,'" src="', $img ,'" onload="javascript:loadImages(\'img', $key ,'\',\'', $img ,'\')" alt="" /></a>
                    ';
                  }
                }
              } else
                  echo '<br />
                        <div class="mediabold">Er staan nog geen foto\'s in deze map.</div>';

  }
?>