どうも！LSSです！！
以前、公開した
というフォトギャラリーの仕組みがあります。
「六角」の名の通り、見せたい画像が６枚ある場合にちょっと面白い見せ方ができる、というものでしたが、より多い・少ない場合には使えないという最大の欠点が！
今回はその欠点を解消し、より多い枚数でも少ない枚数でも使えるようにしたものを「多角形フォトギャラリー」として公開します^^
多角形フォトギャラリー
コード
<style>
#ph3d{
position:relative;
transform-style:preserve-3d;
width:150px;
height:150px;
left:75px;
transition:1.5s;
transform:rotateX(-10deg) rotateY(-10deg);
}
#ph3d img{
position:absolute;
box-sizing:border-box;
width:100%;
}
</style>
<div id="ph3d"></div>
<p><img id="ph3dimg" /></p>
<script>
ph3dimgs=[
'画像ファイルのURL'
,'画像ファイルのURL'
,'画像ファイルのURL'
,'画像ファイルのURL'
,'画像ファイルのURL'
,'画像ファイルのURL'
,'画像ファイルのURL'
,'画像ファイルのURL'
];
txt='';
for(i=0;i<ph3dimgs.length;i++){
txt+='<img src="'+ph3dimgs[i]+'" id="ph3d'+i+'" style="transform:rotateY('+(360/ph3dimgs.length*i)+'deg) translateZ(150px);"/>';
}
ph3d.innerHTML=txt;
ph3dimg.src=ph3d0.src;
ph3d.addEventListener('click',
function(ph3de){
ph3d.style.transform='rotateX(-10deg) rotateY('+(parseInt(ph3de.srcElement.id.substr(4))*(-360/ph3dimgs.length)-10)+'deg)';
if(ph3de.srcElement.tagName=="IMG"){ph3dimg.src=ph3de.srcElement.src;}
}
,false);
</script>
使い方
上記コードをコピペし、赤文字の「画像ファイルのURL」の部分を見せたい画像ファイルのURLに置き換えるだけで使用できます。
上記コードでは８つ「画像ファイルのURL」がありますが、増やしても減らしてもOKです^^
２行目以降は冒頭に「,」（カンマ）がつき、１行目だけついていない点にだけご注意ください。
置き換えた後は、こんな感じのコードになります。
ph3dimgs=[
'https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20210504/20210504201000.png'
,'https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20210504/20210504201751.png'
,'https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20210504/20210504204336.png'
,'https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20210504/20210504210309.png'
,'https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20210505/20210505180146.png'
,'https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20210505/20210505181048.png'
,'https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20210819/20210819222656.png'
,'https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20210826/20210826233115.png'
];
難点
ちょっと難点があります。
この記事の最初に乗せたサンプルがそうなっているのですが
「多角形状に配置されたサムネイルの端と端がくっついて噛み合ってしまっている」
というところ^^;
これは画像の枚数（＝多角形の角数）が多い場合に発生し、数が少ないほど離れていきますが、コード中オレンジ色文字で書いた、
translateZ(150px);
の150という数値を大きくする（200とか）事で引き離す事もできます。
ただ、それは多角形を大きくする事に繋がるため、大きくし過ぎるとスマホ等で閲覧した場合に画面幅を拡げてしまう事にもなりますので、ほどほどにするか、噛み合った状態で良しとする他ない、という現状があります^^;
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
