×
画像サムネイルをランダムシャッフル表示
イラストや写真のギャラリーページを作る時、並び順で悩むことはありませんか?
このサンプルは、完全ランダムにシャッフルして並び替えるものなので、並び順を自分で決める必要がなくなります。
このサンプルは、完全ランダムにシャッフルして並び替えるものなので、並び順を自分で決める必要がなくなります。
- 画像を自動でトリミングしてサムネイルにする(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; }※スタイルシートファイルに追加する