Pictures/scripts.js at main · xSinTx/Pictures · 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
/*
let data = {
    photo: 'images/buildings.jpg',
    title: 'My title',
    description: 'What happened here, why is this a very nice image'
};

$('#photo').attr('src', data.photo);
*/

let currentPhoto = 0;
let imagesData = [
    {
        thumb: 'images/buildings.jpg',
        photo: 'images/buildings.jpg',
        title: 'Buildings',
        description: 'What happened here, why is this a very nice image'
    },
    {
        thumb: 'images/bridge.jpg',
        photo: 'images/bridge.jpg',
        title: 'Bridge',
        description: 'What happened here, why is this a very nice image'
    },
    {
        thumb: 'images/aurora.jpg',
        photo: 'images/aurora.jpg',
        title: 'Aurora',
        description: 'What happened here, why is this a very nice image'
    },
    {
        thumb: 'images/golden-gate-bridge.jpg',
        photo: 'images/golden-gate-bridge.jpg',
        title: 'Golden Gate Bridge',
        description: 'What happened here, why is this a very nice image'
    },
    {
        thumb: 'images/lighthouse.jpg',
        photo: 'images/lighthouse.jpg',
        title: 'Lighthouse',
        description: 'What happened here, why is this a very nice image'
    },
    {
        thumb: 'images/palace.jpg',
        photo: 'images/palace.jpg',
        title: 'Palace',
        description: 'What happened here, why is this a very nice image'
    },
    {
        thumb: 'images/parlament.jpg',
        photo: 'images/parlament.jpg',
        title: 'Parlament',
        description: 'What happened here, why is this a very nice image'
    },
    {
        thumb: 'images/milky-way.jpg',
        photo: 'images/milky-way.jpg',
        title: 'Milky way',
        description: 'What happened here, why is this a very nice image'
    }
];

//nagyképek
let loadPhoto =  function (photoNumber){
    $('#photo').attr('src', imagesData[currentPhoto].photo);
    $('#photo-title').text(imagesData[currentPhoto].title)
    $('#photo-description').text(imagesData[currentPhoto].description)
}

//nyilak
$('#arrow-right').click(function (){
    if(currentPhoto === 7){
        currentPhoto = 0;
        loadPhoto(currentPhoto);
    }
    else{
        currentPhoto++;
        loadPhoto(currentPhoto);
    }
})
$('#arrow-left').click(function (){
    if(currentPhoto === 0){
        currentPhoto = 7;
        loadPhoto(currentPhoto);
    }
    else{
        currentPhoto--;
        loadPhoto(currentPhoto);
    }
})

//betölti a nagyképeket
loadPhoto(currentPhoto)

//kisképek
var activeIndex = currentPhoto
function loadThumbnails(itemData, index) {
    $('#thumbnails-container').append(
        `<div class="thumbnail-box">
            <img class="thumbnail" data-idx="${index}" src="${itemData.thumb}">
            <p class="title">${itemData.title}</p>
        </div>`
    )
}
//betölti a kisképeket
imagesData.forEach(loadThumbnails)
//klikkelés a kisképekre
$('.thumbnail').click(function (event){
    let indexClicked = $(event.target).attr('data-idx');
    currentPhoto = indexClicked;
    loadPhoto(currentPhoto);
})