タグ: Nuxt

Nuxt3でWebサイトの再構築を進める2

、、、
Kentaro Kitagawa

コンポーネント内からhtmlにdata属性を操作したいとき

例えば、モーダルを表示する間だけhtml,bodyのスクロールをやめたい時などにクラスを追加したりdata属性をボタンの押下などで変化させるときの方法でつまづいたので備忘録その2。

続きを読む “Nuxt3でWebサイトの再構築を進める2”

Nuxt3でWebサイトの再構築を進める1

、、、
Kentaro Kitagawa

受託の仕事が夏季休暇期間でないため、今のうちにということで現状Nuxt2の状態だったcdbk.tokyoのサイトをNuxt3で対応させつつ、デザインを変えるために色々やった備忘録を少しずつまとめていきます。

続きを読む “Nuxt3でWebサイトの再構築を進める1”

自分のサイトcdbk.tokyoの画像表示を少し更新しました

、
Kentaro Kitagawa

やろうと考えつつ、できていなかった画像表示の更新をしました。

Photographyのサムネイル一覧をクリックすると表示されるモーダルで前後の画像表示に切り替えられるよう、ナビゲーションを追加しました。

ただそれだけなのですが、スクリプトを組む上でカルーセルを載せて、クリックしたサムネイルと同じ画像を最初に表示させるのか、それともリストを保持して、選択した画像とその前後の画像情報を持って、クリック時に更新させるかなど、いろいろ悩んだ結果、後者にしました。

今後はcdbk.blueの方にも対応させていく予定です。

Nuxtとvue-carouselを使ってFlickrの写真をサイトトップに実装する

、
Kentaro Kitagawa

前回に続き、次はサイトトップで実装しているカルーセルについて。

Photographyでは<li>を反復させているものをvue-carouselプラグインをインポートして<slide>を反復するように変更するのみです。
その際、slideとcarouselがうまく行かないことがあるので

nuxt.jsにvue-carouselを導入してスライダーを作成
Nuxtでvue-carouselを使用していたら’ReferenceError: window is not defined’が出たお話

などなど参考に別途インポートすると動くと思われます。

実際のコードのサンプルは以下

<template>
  <carousel :navigation-enabled="true" :per-page="1" :loop="true" :scrollPerPage="true" :autoplay="true" :autoplayHoverPause="true"  :autoplayTimeout="5000" :paginationPadding="4">
    <slide v-for="(photo, index) in data['photo']" :key="photo.id">
      <img :data-src="photo['url_l']" :width="photo['width_l']" :height="photo['height_l']" :alt="photo['title']" v-lazy-load>
    </slide>
  </carousel>
</template>
<script>
import Carousel from '~/components/vue-carousel/Carousel.vue'
import Slide from '~/components/vue-carousel/Slide.vue'
export default {
  components: {
    Carousel,
    Slide
  },
  data() {
    return {
      data:{}
    }
  },
  async mounted() {
      const url = 'https://www.flickr.com/services/rest/?{{flickrAPI}};
      const data = await this.$jsonp(url, {
        callbackName: 'getWall'
      });
      return this.data = data.photoset;
  },
}
</script>

サイトでFlickrの写真をNuxtを使って表示させたときの実装など

、
Kentaro Kitagawa
https://cdbk.tokyo のPhotographyコンテンツ

cdbk.tokyoのサイトをリニューアルするときに、もっと写真を大量に載せられる仕組みを作りたくなり、写真を保存しているflickrのAPIを利用して画像情報を取得、表示するようにしました。

続きを読む “サイトでFlickrの写真をNuxtを使って表示させたときの実装など”