×
画像サムネイルをランダムシャッフル表示
イラストや写真のギャラリーページを作る時、並び順で悩むことはありませんか？
このサンプルは、完全ランダムにシャッフルして並び替えるものなので、並び順を自分で決める必要がなくなります。
このサンプルは、完全ランダムにシャッフルして並び替えるものなので、並び順を自分で決める必要がなくなります。
- 画像を自動でトリミングしてサムネイルにする（CSS）
- スタイル指定を追加（CSS）
- PHPはPHPタグ（ <?php ?> ）で囲み、拡張子は「.php」にする
- 使用する画像のファイル名（パス）のみ変更（PHP）
- サンプル画像は「http://fc.ashrose.net/PD/（パブリックドメイン画像素材）」様より
表示サンプル-（画像に直接リンク）
※リロードするたびに画像シャッフル
PHPサンプル-（画像に直接リンク）
<?php
//Ateh's theme
//http://material.atehs.net/template/
//★表示させる画像を指定
$array = array(
"img/bg0.jpg",
"img/bg1.jpg",
"img/bg2.jpg",
"img/bg3.jpg"
);
shuffle($array);
for( $i = 0; $i<= count($array)-1; $i++ ){
//タグを表示（クラス名「gallaery」をCSSに指定）
echo "<a href="."'".$array[$i]."'"." target='_blank'><span style=".'"background-image:'."url('".$array[$i]."')".'" class="gallery"></span></a>';
// echo "<span style=".'"background-image:'."url('".$array[$i]."')".'" class="gallery" ></span>';//リンクなし
}
?>※コピペ推奨
CSSサンプル
.gallery{ width:130px; height:130px; margin:3px 3px 3px 3px ; display: inline-block; background-position:center center; background-repeat:no-repeat; background-size: cover; border:0px solid #ffffff; border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; -moz-border-radius:10px 10px 10px 10px; box-shadow:rgba(64, 65, 66, 0.368627) 1px 1px 3px 1px; -webkit-box-shadow:rgba(64, 65, 66, 0.368627) 1px 1px 3px 1px; -moz-box-shadow:rgba(64, 65, 66, 0.368627) 1px 1px 3px 1px; }※スタイルシートファイルに追加する