Како да направите једноставну галерију слика користећи ХТМЛ, ЦСС и ЈаваСцрипт

Прављење једноставне галерије слика користећи ХТМЛ, ЦСС и ЈаваСцрипт је одличан начин да научите основе веб развоја. У галерији слика, моћи ћете да листате кроз слике тако што ћете изабрати сличице да бисте увећали слику на веб страници.

Да бисте креирали галерију, можете користити ХТМЛ да додате садржај веб странице и ЦСС да додате стил. Можете да користите ЈаваСцрипт да бисте галерију учинили интерактивном када корисник кликне на било коју сличицу.

Како да креирате кориснички интерфејс за галерију слика

Додајте кориснички интерфејс за галерију слика користећи ХТМЛ и ЦСС. Ово укључује додавање велике слике у центар веб странице, која ће се променити на основу одабране сличице. Такође можете погледати цео пример изворни код на ГитХуб-у.

1. Направите нову датотеку под називом "индек.хтмл".
2. Унутар ове датотеке додајте основну структуру ХТМЛ кода:

   хтмл>
   <хтмлланг="ен-УС">
   <глава>
   <наслов>Галерија сликанаслов>
   глава>
   <тело>
   <дивкласа="увод">
   <х2>Галерија сликах2>
   <стр>Изаберите сличицу испод да бисте видели сликустр>
   див>
   тело>
   хтмл>

3. Направите поддиректоријум под називом "слике". Попуните га са неколико слика и назовите их од "имаге1.јпг" до "имаге10.јпг".
4. У своју ХТМЛ датотеку додајте див за галерију слика:

   <дивид="Галерија слика">
   див>

5. Унутар див галерије слика додајте ознаку слике да бисте приказали увећану изабрану слику. Подразумевано, прикажите прву слику унутар фасцикле „имагес“:

   <имгид="тренутна слика"срц="имагес/имаге1.јпг"алт="Слика 1">

6. У исту фасциклу као и ваша ХТМЛ датотека, додајте нову датотеку под називом „стилес.цсс“ са следећим ЦСС-ом. Слободно измените ЦСС за додавање неуморфне компоненте дизајна или направите друга подешавања дизајна користећи ове ЦСС савете и трикове.

7. .интро { 
   Поравнање текста: центар; 
   породица фонтова: Ариал;
   }
   х2 { 
   фонт-сизе: 36пк;
   }
   стр { 
   фонт-сизе: 14пт;
   }
   #Галерија слика { 
   ширина: 600пк; 
   маргина: 0 ауто;
   }
   #цуррент-имаге { 
   ширина: 100%;
   } 

8. Додајте везу до своје ЦСС датотеке у ознаку хеад ХТМЛ датотеке:

   <линкрел="стилесхеет"тип="текст/цсс"хреф="стилес.цсс">

Како додати сличице за остале слике у галерији

Тренутно, галерија слика приказује само прву слику. Испод изабране слике додајте листу сличица. Ове сличице ће приказати преглед свих слика унутар фасцикле "имагес".

1. Унутар див галерије слика у ХТМЛ датотеци, додајте још један див за приказ сличица за друге слике:

   <дивид="имаге-тхумбс">див>

2. Унутар ЦСС датотеке додајте неки стил за листу сличица:

   #имаге-тхумбс { 
   приказ: флек; 
   оправдати-садржај: центар; 
   маргин-топ: 20пк;
   }

3. У исту фасциклу као и ваше ХТМЛ и ЦСС датотеке, додајте нову датотеку под називом „сцрипт.јс“.
4. Додајте везу до своје ЈаваСцрипт датотеке на дну ХТМЛ ознаке тела:

   <тело>
    Ваш код овде 
   <скриптасрц="сцрипт.јс">скрипта>
   тело>

5. Унутар ЈаваСцрипт датотеке, набавите ХТМЛ елемент див који ће чувати листу сличица:

   вар имагеТумбс = документ.гетЕлементБиИд("имаге-тхумбс");

6. Додајте фор-петљу за петљу кроз сваку од 10 слика у галерији:

   за (вар и = 1; и <= 10; и++) {
   }

7. Унутар петље направите нови имг елемент за сваку слику:

   вар тхумб = документ.цреатеЕлемент("имг");

8. Додајте вредности за атрибуте "срц" и "алт". У овом случају, атрибут "срц" је путања датотеке до слике на истом индексу унутар фасцикле "имагес":

   тхумб.срц = "слике/слика" + и + ".јпг";
   тхумб.алт = "Слика " + и;

9. Унутар ваше ЦСС датотеке додајте нову класу да бисте стилизовали сличицу слике. Такође можете да додате други стил лебдења или прелазни ЦСС стил за сличице учините своју веб страницу прилагодљивом и интерактивном.

   .палац { 
   ширина: 80пк; 
   висина: 80пк; 
   објектно уклапање: поклопац; 
   маргин-десно: 10пк; 
   курсор: показивач;
   }

10. Унутар ЈаваСцрипт датотеке додајте горњу класу у нову сличицу:

    тхумб.цлассЛист.адд("палац");

11. Додајте нову сличицу у ХТМЛ елемент који садржи листу сличица:

    имагеТхумбс.аппендЦхилд (палац);

Како променити слику када корисник кликне на сличицу

Када корисник кликне на једну од сличица, промените увећану слику у центру странице на изабрану слику. Ову функцију можете додати унутар ЈаваСцрипт датотеке.

1. На врху ЈаваСцрипт датотеке преузмите ХТМЛ елемент тренутно изабране слике:

   вар цуррентИмаге = документ.гетЕлементБиИд("тренутна слика");

2. Унутар фор-петље, додајте обрађивач догађаја који се покреће када корисник одабере било коју сличицу на дну странице:

   тхумб.аддЕвентЛистенер(
   "кликни", функција() {
    }
   );

3. Унутар обрађивача догађаја промените атрибут "срц" тренутне слике у новоизабрану слику. Такође можете да ажурирате атрибут "алт":

   цуррентИмаге.срц = ово.срц;
   цуррентИмаге.алт = ово.алт;

4. Кликните на датотеку „индек.хтмл“ да бисте је отворили у веб прегледачу.
5. Изаберите било коју сличицу да бисте видели слику.

Наставите да проширујете своје знање о ЈаваСцрипту

Без обзира на ваше искуство, важно је да наставите да градите пројекте како бисте проширили своје знање. Наставите да истражујете друге пројекте као што је прављење шаховске игре, калкулатора или листе обавеза.