• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Generowanie galerii - JavaScript

VPS Starter Arubacloud
0 głosów
198 wizyt
pytanie zadane 24 kwietnia 2021 w JavaScript przez Chandraa Nowicjusz (150 p.)

Witam!

Czy istenieje możliwość "wygenerowania" galerii w JaviaScript?

Chodzi o to że pętla wyświetla obrazy w tabeli, razem z podpisami pod nimi.
Jeśli jest to możliwe to w jaki sposób wyświetlić te obrazy za jej pomocą?

 

Mam program wyświetlający liczby w ten sposób i nie wiem jak go przerobić, aby generowała zdjęcia.

 

<html>

<head>

</head>

<body>

    <script>
        document.write("<h2>Tabela: </h2>")
    </script>


    <p id="Tabela"></p>


    <script>
        var k = 5;
        var w = 5;
        var napis = '';
        var tab = [];

        for (var i = 0; i < w; i++) {
            tab[i] = [];
        }

        for (var i = 0; i < w; i++) {
            for (var j = 0; j < k; j++) {
                tab[i][j] = i + j;
            }
        }

        for (var i = 0; i < w; i++) {
            for (var j = 0; j < k; j++) {
                napis += tab[i][j] + "  |  ";
            }
            napis += "<br>";
        }

        document.getElementById("Tabela").innerHTML = napis;
    </script>


</body>

</html>

 

1 odpowiedź

0 głosów
odpowiedź 24 kwietnia 2021 przez SzkolnyAdmin Szeryf (86,280 p.)
wybrane 25 kwietnia 2021 przez Chandraa
 
Najlepsza
Stwórz sobie tablicę zawierającą ścieżki do plików graficznych. W pętli przejdź po tablicy tworząc tagi do wyświetlania  obrazów (znacznik img z całym "osprzętem" lub lepiej figure z figcaption - masz wtedy i podpis) oraz podpisy. Tagi dopisuj do zmiennej przechowującej tekst. Wstaw tekst na stronę
komentarz 25 kwietnia 2021 przez Chandraa Nowicjusz (150 p.)

W jaki sposób mogę zapisać ścieżki do plików w tablicy?
Bo raczej w ten sposób nie zadziała:

const tab = ["<img src = "1.jpg">", "<img src = "2.jpg">", "<img src = "3.jpg">"];

A nigdzie nie mogę znaleźć podobnego przykładu.

komentarz 25 kwietnia 2021 przez SzkolnyAdmin Szeryf (86,280 p.)

Separatory w tabeli są problemem.

const images = ["1.jpg", "2.jpg", "3.jpg"];

let gallery = "";

for(img of images) {
	gallery+='<img src="'+img+'" alt="">';
}

Zmienną gallery możesz wstawić na stronę.

Podobne pytania

0 głosów
0 odpowiedzi 158 wizyt
0 głosów
1 odpowiedź 267 wizyt
pytanie zadane 27 czerwca 2019 w JavaScript przez kordix Gaduła (3,910 p.)
0 głosów
1 odpowiedź 584 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...