CODEWITHSUNDEEP
javascripthtmlcssmodal-dialoggallery
Balázs Vörös
Balázs Vörös

Reputation: 1

multiple modals for gallery website using HTML CSS JavaScript

Im making a gallery for a website but modals doesnt work for me. i tried everything. if possible please add two navigation arrows like on messenger or facebook.

my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galéria</title>
    <link rel="shortcut icon" href="pics/icon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="topnav" id="myTopnav"
        <a href="index.html">Home</a>
        <a href="galery.html">Galéria</a>
        <a href="info.html">Információk</a>
        <a href="javascript:void(0);">
          <i></i>
        </a>
    

    <div id="kepek">
      <img class="galleryimg" src="pics/gallery/kep (1).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (2).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (3).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (4).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (5).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (6).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (7).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (8).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (9).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (10).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (11).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (12).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (13).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (14).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (15).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (16).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (17).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (18).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (19).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (20).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (21).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (22).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (23).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (24).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (25).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (26).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (27).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (28).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (29).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (31).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (32).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (33).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (34).jpg" alt="">
      <img class="galleryimg" src="pics/gallery/kep (35).jpg" alt="">
    </div>
    
    
    <script src="app.js"></script>




#kepek {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
padding: 20px;
}

.galleryimg {
height: 26vh;
width: 100%;
object-fit: cover;
border-radius: 5px;
cursor: pointer;
transition: transform 0.2s;
}

.galleryimg:hover {
transform: scale(1.05);
}

Upvotes: -5

Views: 85

Answers (1)

Vladislav Vasinev
Vladislav Vasinev

Reputation: 1

Here is the solid js solution for multiple modals: https://fancyapps.com/fancybox/

Maybe it will give you some clue how to build your own modals on webpage. Make sure that you check the "Showcase" first

Upvotes: 0

Related Questions