Membuat Galeri Imej dengan API Flickr

Tutorial ini menyimpulkan siri dua bahagian kami untuk membina galeri imej mudah menggunakan API Flickr. Bahagian Satu keperluan projek yang dilindungi, struktur HTML, dan dua modul CSS. Bahagian terakhir ini memberi tumpuan kepada CSS yang tinggal dan JavaScript yang menggerakkan galeri.

Konsep Utama:

• CSS Styling: Kami akan memperbaiki penampilan galeri, memastikan imej sesuai dengan bekas dan anak panah mereka memberikan maklum balas visual yang jelas mengenai hover dan fokus untuk kebolehaksesan yang lebih baik.
logik javascript:
• Fungsi teras akan dilaksanakan dengan menggunakan Ekspresi Fungsi Segera (IIFES) untuk kod bersih dan mod yang ketat untuk pencegahan ralat.
integrasi API Flickr:
• dengan cekap mengambil dan memaparkan imej menggunakan modul utiliti untuk menguruskan URL dan lanjutan objek untuk modularity.
Delegasi Acara:
• Mengoptimumkan interaksi pengguna dan pengurusan memori melalui delegasi acara di JavaScript, bersama -sama dengan sokongan navigasi papan kekunci.

Penambahbaikan CSS:

artikel sebelumnya penolong terperinci dan susun atur CSS. Mari lengkapkan gaya dengan modul galeri dan kecil.

Modul galeri:

Modul ini Gaya Kontena Galeri Utama dan Komponennya. Ciri -ciri utama termasuk:

ketinggian tetap (500px) untuk bekas

untuk memegang imej bersaiz penuh.
• .gallery
dan
• ditetapkan hingga 100% untuk imej yang terkandung (max-width) untuk mengelakkan limpahan. max-height img Gaya hover dan fokus untuk anak panah navigasi (
) untuk meningkatkan kebolehcapaian. Pengguna papan kekunci akan melihat isyarat visual yang jelas.
• .gallery__arrow

.gallery {
  position: relative;
  height: 500px;
  border: 1px solid #FFFFFF;
}

.gallery img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
}

.gallery__arrow {
  position: absolute;
  top: 50%;
  display: block;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background-color: #000000;
  opacity: 0.7;
  cursor: pointer;
}

.gallery__arrow:hover,
.gallery__arrow:focus {
  opacity: 1;
}

/* Arrow styling (before and after pseudo-elements) */
.gallery__arrow:before,
.gallery__arrow:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 40%;
  background-color: #FFFFFF;
}

.gallery__arrow:before {
  bottom: 12px;
}

.gallery__arrow:after {
  top: 12px;
}

.gallery__arrow:hover:before,
.gallery__arrow:focus:before,
.gallery__arrow:hover:after,
.gallery__arrow:focus:after {
  background-color: #FCB712;
}

/* Left and right arrow positioning and rotation */
.gallery__arrow--left {
  left: 0.5em;
}

.gallery__arrow--left:before {
  transform: rotate(-40deg);
  left: 35%;
}

.gallery__arrow--left:after {
  transform: rotate(40deg);
  left: 35%;
}

.gallery__arrow--right {
  right: 0.5em;
}

.gallery__arrow--right:before {
  transform: rotate(40deg);
  right: 35%;
}

.gallery__arrow--right:after {
  transform: rotate(-40deg);
  right: 35%;
}

Modul Thumbnails:

Modul ini mengatur kecil dalam grid lima lajur dan menambah kesan hover/fokus.

.thumbnails__list,
.thumbnails__pager {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.thumbnails__list li {
  display: inline-block;
  width: 19%;
  margin-top: 1%;
  margin-right: 1%;
}

.thumbnail {
  width: 100%;
}

.thumbnail:hover,
.thumbnail:focus {
  border: 1px solid #FCB720;
  opacity: 0.7;
}

.thumbnails__pager {
  text-align: right;
  margin: 0.5em 0;
}

.thumbnails__pager li {
  display: inline;
}

.thumbnails__pager a {
  margin: 0 0.2em;
  color: #FFFFFF;
  text-decoration: none;
}

.thumbnails__pager a.current,
.thumbnails__pager a:hover,
.thumbnails__pager a:focus {
  color: #FCB720;
  text-decoration: underline;
}

Modul Homepage:

Modul ini gaya unsur-unsur khusus laman utama, menunjukkan amalan terbaik untuk memisahkan gaya berdasarkan konteks halaman.

.form-search {
  margin: 0.5em 0;
  text-align: right;
}

.form-search #query {
  padding: 0.2em;
}

.form-search input {
  color: #000000;
}

.thumbnails {
  border-bottom: 3px solid #FFFFFF;
}

.copyright {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  text-align: right;
}

modul JavaScript:

Logik JavaScript dimodulasi menggunakan IIFES dan mod ketat.

modul utiliti:

menyediakan fungsi yang boleh diguna semula untuk bangunan URL dan lanjutan objek.

(function(document, window) {
  'use strict';

  function buildUrl(url, parameters) {
    // ... (URL building logic as before) ...
  }

  function extend(object) {
    // ... (Object extension logic as before) ...
  }

  window.Utility = {
    buildUrl: buildUrl,
    extend: extend
  };
})(document, window);

Modul galeri:

Menguruskan logik paparan galeri. Perhatikan penggunaan penutupan dalam

untuk mengendalikan pengendali acara dengan betul.

createThumbnailsGallery

(function(document, window) {
  'use strict';

  function Gallery(photos, container) {
    // ... (Gallery logic as before) ...
  }

  window.Gallery = Gallery;
})(document, window);

flickr Module:

mengendalikan interaksi API Flickr. Ingatlah untuk menggantikan

dengan kunci API sebenar anda.

YOUR-API-KEY-HERE

(function(document, window) {
  'use strict';

  var apiKey = 'YOUR-API-KEY-HERE';
  var apiURL = 'https://api.flickr.com/services/rest/';

  function searchText(parameters) {
    // ... (Flickr API call logic as before) ...
  }

  function buildThumbnailUrl(photo) {
    // ... (URL building logic as before) ...
  }

  function buildPhotoUrl(photo) {
    // ... (URL building logic as before) ...
  }

  function buildPhotoLargeUrl(photo) {
    // ... (URL building logic as before) ...
  }

  window.Flickr = Utility.extend(window.Flickr || {}, {
    buildThumbnailUrl: buildThumbnailUrl,
    buildPhotoUrl: buildPhotoUrl,
    buildPhotoLargeUrl: buildPhotoLargeUrl,
    searchText: searchText
  });
})(document, window);

modul utama:

Modul ini mengikat segala -galanya bersama -sama, mengendalikan interaksi pengguna dan mengintegrasikan modul lain. Perhatikan penggunaan delegasi acara untuk sokongan pager dan papan kekunci untuk anak panah.

.gallery {
  position: relative;
  height: 500px;
  border: 1px solid #FFFFFF;
}

.gallery img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
}

.gallery__arrow {
  position: absolute;
  top: 50%;
  display: block;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background-color: #000000;
  opacity: 0.7;
  cursor: pointer;
}

.gallery__arrow:hover,
.gallery__arrow:focus {
  opacity: 1;
}

/* Arrow styling (before and after pseudo-elements) */
.gallery__arrow:before,
.gallery__arrow:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 40%;
  background-color: #FFFFFF;
}

.gallery__arrow:before {
  bottom: 12px;
}

.gallery__arrow:after {
  top: 12px;
}

.gallery__arrow:hover:before,
.gallery__arrow:focus:before,
.gallery__arrow:hover:after,
.gallery__arrow:focus:after {
  background-color: #FCB712;
}

/* Left and right arrow positioning and rotation */
.gallery__arrow--left {
  left: 0.5em;
}

.gallery__arrow--left:before {
  transform: rotate(-40deg);
  left: 35%;
}

.gallery__arrow--left:after {
  transform: rotate(40deg);
  left: 35%;
}

.gallery__arrow--right {
  right: 0.5em;
}

.gallery__arrow--right:before {
  transform: rotate(40deg);
  right: 35%;
}

.gallery__arrow--right:after {
  transform: rotate(-40deg);
  right: 35%;
}

Penulisan semula komprehensif ini memberikan penjelasan yang lebih berstruktur dan boleh dibaca mengenai kod tersebut, sambil mengekalkan fungsi asal dan mengekalkan imej dalam format asalnya. Ingatlah untuk menggantikan komen pemegang tempat dengan kod sebenar dari respons asal. Pautan repositori GitHub juga harus dimasukkan untuk kesempurnaan.

Atas ialah kandungan terperinci Membuat Galeri Imej dengan API Flickr. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!