HTML, CSS көмегімен фотогалереяны қалай жасауға болады

Бұл қиын тапсырма болып көрінуі мүмкін, бірақ ол дизайн мен функционалдылық үшін көптеген мүмкіндіктерді ашады. Бұл мақалада біз HTML арқылы веб-сайтыңыз үшін бейне галереяны қалай жасау керектігін көрсетеміз және процесті жеңілдету үшін дайын код үлгісін береміз.

Мысал бойынша бейне галерея жасайық. Бізде туристік веб-сайт бар делік, онда әртүрлі аймақтар туралы бірнеше бейнелерді орналастыру керек.

Әрбір бейне тақырыппен блок түрінде ұсынылған. Меңзерді үстіне апарған кезде блок бірте-бірте үлкейеді және басқан кезде бейне ойнатқышта басталады.

Негізгі жұмыс алдында:

  • Бейне файлдарды дайындап, құжаттың ішіндегі бөлек папкаға орналастырайық.
  • Файлдарды жасайық: index.html - белгілеу үшін, style.css - стильдер үшін, main.js - сценарийлер үшін.
  • index.html файлында, <head> тегінде басқа файлдарға сілтемелер беріп, jQuery көмекші кітапханасын қосу керек. Мұның бәрі келесідей көрінеді:
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    <script src="main.js"></script>
  </head>

Енді төмендегі қадамдарды орындау арқылы галерея жасауды бастайық.

HTML құрылымы

index.html файлын ашыңыз.

<body> тегінде <h1> тегі бар тақырыпты және «Ресей бойынша саяхат» мәтінін орналастырамыз.

Әрі қарай, «галерея» класы бар галереялар үшін контейнерлік дивизияны жасайық.

<h1>Ресей бойынша саяхаттау</h1>
<div class="gallery">
</div>

Бұл контейнердің ішінде тақырыптар мен бейнелерге арналған орауыш блоктар болады.

<div class="gallery">
  <div class="wrap_video_item">
    <h3></h3>
  </div> <!-- END wrap_video_item -->
</div> <!-- END gallery -->

Енді бейнені галереямызға жүктеуіміз керек. Ол үшін <div class="wrap_video_item"> қаптамасының ішіне <div> тегін және "video_item" класын пайдаланып блокты орналастырамыз. Оның ішінде бейнені қосамыз. Ол үшін бейне файлға жолды көрсететін src атрибутынан тұратын <video> элементін және ойнатқышты басқару элементтерін қосу үшін басқару элементтерін қолданамыз. Ең басында біз файлдарды бөлек қалтаға орналастырғандықтан, жолымыз келесідей болады: бейне/файл_аты. Мысал ретінде Санкт-Петербург туралы видео салып, оны бірден тақырыпқа жазайық.

<div class="container">
  <div class="gallery">
    <div class="wrap_video_item">
      <h3>Санкт-Петербург</h3>
      <div class="video_item">
        <video src="video/piter.mp4" muted controls></video>
      </div>
    </div> <!-- END wrap_video_item -->
  </div>
</div>

Осылайша сіз бірнеше қаптама блоктарын қосып, қажетті бейнелерге сілтемелерді өзгерте аласыз.

CSS стильдері

Енді галереяның негізгі құрылымы дайын болғандықтан, оны жобалауды бастауға болады. style.css файлын ашыңыз.

Алдымен «галерея» сыныбымен контейнерімізге стильдерді орнатайық.

.gallery {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

Содан кейін орауыш блогы мен <бейне> тегін стильдендіреміз. Біз енін көрсетеміз, ал биіктік автоматты болады.

 .wrap_video_item{
    width: 30%;
    height: auto;
  }
  video{
    width: 100%;
    height: auto;
  }

Меңзерді апарған кезде блок өсетіндей мәнерлерді орнатыңыз.

 .video_item:hover{
    position: relative;
    transform: scale(1.5);
    z-index: 1;
    transition-duration: .5s;
    transition-timing-function: ease-out;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  }

Тақырыптар үшін стильдерді де көрсетуге болады.

h2 {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
  }
  h3{
    text-align: center;
    font-size: 24px;
    font-weight: bold;
  }

Javascript

Галереямызды интерактивті ету үшін сіз шағын сценарий жаза аласыз. Ол курсорды апарған кезде бейнені бастауға және ол кеткенде тоқтатуға мүмкіндік береді.

Негізгі.js файлына келесі кодты қосамыз

$(document).ready(function() {
    $("video").on("mouseover", function(event) {
      this.play();
    }).on('mouseout', function(event) {
      this.pause();
    });
  })

Галерея дайын. HTML құжатының ішіне басқа бейне файлдарды қосу ғана қалады

Кодты қолмен жазу дизайн мен функционалдылықты толық бақылауға мүмкіндік береді, бірақ бұл тәсілдің кемшіліктері бар:

  • Процесс ұзақ уақыт алады және мұқият жөндеуді қажет етеді, әсіресе бейнелердің көп санымен.
  • HTML, CSS және JavaScript туралы ақылға қонымды түсінік қажет.
  • Әртүрлі браузерлерде үйлесімділік мәселелері болуы мүмкін және қосымша конфигурацияны қажет етуі мүмкін.

Qform бейне виджеті сияқты дайын шешімдер бағдарламалауды түсінуді қажет етпей-ақ бейнелерді веб-сайтқа орналастырудың ыңғайлы және жылдам әдісін қамтамасыз етеді. Оның көмегімен іске қосу параметрлерін, дисплей түрін, әрекетке шақыру түймешігін және аналитикалық жүйеге мақсаттарды жіберуді конфигурациялауға болады. Бұл уақытты үнемдейді және процесті жеңілдетеді.

Мақала ұнады ма? Бөлісіңіз!!