Pic-Collage/script.js at main · AkshajVanka/Pic-Collage · GitHub

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
var img = [],
    i = 0,
    j = 0;

function getFileSelected() {
    f = ['jpg', 'jfif', 'png', 'JPG', 'PNG', 'JFIF'];
    var k;
    var sel = document.getElementById("file");
    for (k = 0; k < sel.files.length; k++) {
        sele = sel.files.item(i).name;
        a = sele.split(".");
        if (f.includes(a[1])) {
            img[i++] = sele;
            alr = document.getElementById("text").value;
            if (alr != '')
                sele = alr + "," + sele;
            document.getElementById("text").value = sele;
        } else {
            alert("please select image files");
        }
    }
}

function showCollage() {
    document.getElementById('container').style.display = 'none';
    document.getElementById('after').style.display = 'block';
    var n = img.length;


    var rows = parseInt(n / 3);
    var rem = n % 3;

    if (rows != 0) {
        if (rem != 0)
            var h = parseInt(95 / (rows + 1));
        else
            var h = parseInt(95 / (rows));
        var w = parseInt(95 / 3);
        for (i = 0; i < rows; i++) {
            for (j = 0; j < 3; j++) {
                var para = document.createElement("img");
                para.setAttribute("src", img[i * 3 + j]);
                para.setAttribute("width", w + "%");
                para.setAttribute("height", h + "%");
                para.setAttribute("border-radius", "15px");
                para.setAttribute("margin", "20px");
                var ele = document.getElementById("flexy");
                ele.appendChild(para);
            }
        }
        if (rem != 1)
            w = parseInt(95 / rem);
        else
            w = h;
        for (j = 0; j < rem; j++) {
            var para = document.createElement("img");
            para.setAttribute("src", img[rows * 3 + j]);
            para.setAttribute("width", w + "%");
            para.setAttribute("height", h + "%");
            para.setAttribute("border-radius", "15px");
            para.setAttribute("margin", "20px");
            var ele = document.getElementById("flexy");
            ele.appendChild(para);
        }
    } else {
        var h = parseInt(95 / 1);
        var w = parseInt(95 / rem);
        for (j = 0; j < rem; j++) {
            var para = document.createElement("img");
            para.setAttribute("src", img[j]);
            para.setAttribute("width", w + "%");
            para.setAttribute("height", h + "%");
            para.setAttribute("border-radius", "15px");
            para.setAttribute("margin", "20px");
            para.setAttribute("overflow", "none");
            var ele = document.getElementById("flexy");
            ele.appendChild(para);
        }
    }
}

function carousel() {
    document.getElementById('after').style.display = 'none';
    document.getElementById('carousel').style.display = 'block';

    // st=`
    //     <div class="carousel-item active">
    //             <img src="${img[0]}">
    //     </div>
    // `
    // img.forEach((x,idx)=> {
    //     if(idx===0)
    //         continue;
    //     st=st+
    //     `
    //         <div class="carousel-item ">
    //             <img src="${x}">
    //         </div>
    //     `
    // })
    // console.log(st)


    var a = $(".carousel-inner")
    var b = $(`<div class="carousel-item active">
                <img src="${img[0]}" class="d-block w-100" alt="...">
              </div>`)
    a.append(b)
    var c = $(".carousel-indicators")
    var d = $(`<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>`)
    c.append(d)

    for (var idx = 1; idx < img.length; idx++) {
        a = $(".carousel-inner")
        b = $(`<div class="carousel-item">
                    <img src="${img[idx]}" class="d-block w-100" alt="...">
              </div>`)
        a.append(b)

        c = $(".carousel-indicators")
        d = $(`<li data-target="#carouselExampleIndicators" data-slide-to="${idx}"></li>`)
        c.append(d)
    }


}