VirtualBoxの仮装ディスクが気がついたら肥大化してたので圧縮する方法を調べた【Wordpress開発環境】
shu sgw.today
どうもsgwです。久しぶりにウェブネタです。
ということで今回はVueで超簡単に作れるレスポンシブ対応、サムネ付きレスポンシブLightBoxを紹介します。CSSとかの編集も特別必要なくササッと実装できちゃうのでめっちゃ楽です。
目次
実装するとこんな感じになります。デモはCDNですが、モダンにES6でwebpack使ってもできます。
実装コードはこちら。
const images = [
`https://unsplash.it/300/300/?image=1`,
`https://unsplash.it/300/300/?image=2`,
`https://unsplash.it/300/300/?image=3`,
`https://unsplash.it/300/300/?image=4`,
`https://unsplash.it/300/300/?image=5`,
`https://unsplash.it/300/300/?image=6`,
];
new Vue({
el: "#app",
components: {
tinybox: Tinybox,
},
data: {
index: null,
isLoading: true,
images: [
{
src: images[0],
thumbnail: images[0],
caption: "Caption Text1",
alt: "Alt Text1",
},
{
src: images[0],
thumbnail: images[1],
caption: "Caption Text2",
alt: "Alt Text2",
},
{
src: images[2],
thumbnail: images[2],
caption: "Caption Text3",
alt: "Alt Text3",
},
{
src: images[3],
thumbnail: images[3],
caption: "Caption Text1",
alt: "Alt Text1",
},
{
src: images[4],
thumbnail: images[4],
caption: "Caption Text1",
alt: "Alt Text1",
},
{
src: images[5],
thumbnail: images[5],
caption: "Caption Text4",
alt: "Alt Text4",
},
],
},
});
こちらはHTML
<div class="container" id="app" v-cloak>
<div class="image_gallery_items" ref="image_gallery_items">
<div
v-for="(img, idx) in images"
@click="index = idx"
class="open-tinybox"
ref="archive_list_alink"
>
<img :src="img.thumbnail" :alt="img.alt" />
</div>
<tinybox v-model="index" :images="images" loop> </tinybox>
</div>
</div>
基本上記をコピペすれば動きます。ただ、使ってる方法によってはこのTiny Boxをどう読み込むかが変わって来るので試した限り書いていきます。
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-tinybox"></script>
<script src="main.js"></script>
これは簡単です。上記vueから読み込んで、その後vue-tinybox、んで自作JS。
WordPressのテーマ作ってる時によくあるんですが、jsとcss(sass)だけコンパイルしてる時わりとオフィシャルに書いてあるやり方でならない時があるのでメモ。
import Vue from 'vue/dist/vue.min.js'
import Tinybox from 'vue-tinybox'
vueはnode_modulesの中にあるvueディレクトリからパス指定する必要があるみたいですが、vue-tinyboxの方は直接書いても大丈夫。
あんまりvueのテンプレとかになれてないのでちょっと苦戦したんですが下記のような感じでテンプレート作れば問題なく動きました。ただvue3では動きませんでした。
<template>
<div class="container">
<div
v-for="(img, idx) in images"
@click="index = idx"
class="open-tinybox"
ref="archive_list_alink"
v-bind:key="img.alt"
>
<img :src="img.thumbnail" :alt="img.alt" />
</div>
<Tinybox v-model="index" :images="images" loop> </Tinybox>
</div>
</template>
<script>
import Tinybox from "vue-tinybox";
export default {
name: "App",
components: {
Tinybox,
},
data: function () {
const images = [
`https://unsplash.it/300/300/?image=1`,
`https://unsplash.it/300/300/?image=2`,
`https://unsplash.it/300/300/?image=3`,
`https://unsplash.it/300/300/?image=4`,
`https://unsplash.it/300/300/?image=5`,
`https://unsplash.it/300/300/?image=6`,
];
return {
index: null,
isLoading: true,
images: [
{
src: images[0],
thumbnail: images[0],
caption: "Caption Text1",
alt: "text1",
key: 1,
},
{
src: images[1],
thumbnail: images[1],
caption: "Caption Text1",
alt: "text2",
key: 2,
},
{
src: images[2],
thumbnail: images[2],
caption: "Caption Text1",
alt: "text3",
key: 3,
},
{
src: images[3],
thumbnail: images[3],
caption: "Caption Text1",
alt: "text4",
key: 4,
},
{
src: images[4],
thumbnail: images[4],
caption: "Caption Text1",
alt: "text5",
key: 5,
},
{
src: images[5],
thumbnail: images[5],
caption: "Caption Text1",
alt: "text6",
key: 6,
},
],
};
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
なぞにvue3で動かなすぎて時間かけてしまったw
おしゃれに実装できるし、スタイリングの設定無しで動くのでおすすめ。ワードプレスで作ったサイトにぶちこんだ経験あるんですが、モバイル、パソコンともに完璧な動作でした。
それではSeeeee Yaaaaaa!!!!