.htaccessでPHPのファイルアップロードサイズの上限値を変更
2022.02.5
PHPを使用して画像(動画・PDF等)をアップロードするフォームを作成した際に、ファイル…
「東洋堂」のランディングページ制作に携わった際に使用したランダムでの画像表示の実装方法をメモ。
アクセスすたびに画像の表示順序が変わるので、コンテンツが単調になりにくく、また一点づつ表示されるので、一度に全ての商品を見せるよりも印象付けることができる。
<ul class="mainimage__list">
<li class="mainimage__list__item"><img src="画像URL"></li>
<li class="mainimage__list__item"><img src="画像URL"></li>
<li class="mainimage__list__item"><img src="画像URL"></li>
<li class="mainimage__list__item"><img src="画像URL"></li>
<li class="mainimage__list__item"><img src="画像URL"></li>
</ul>
var $list = $('.mainimage__list__item');
var showlist = [];
$list.each(function(i) {
showlist.push(i);
});
showlist.sort(function() {
return Math.random() - Math.random();
});
$('.mainimage__list__item').css({opacity:0});
$list.css({opacity: 0}).each(function(i){
$(this).delay(showlist[i] * 500)
.animate({opacity: 1}, 500);
});
「each」を使用して、表示する画像のリスト(通し番号)を配列に保存。
保存した配列を「sort」を使ってランダムに入れ替える。
入れ替えの完了した配列を「animate」を使って表示。
表示までの待ち時間は「delay」で指定。
2022.02.5
PHPを使用して画像(動画・PDF等)をアップロードするフォームを作成した際に、ファイル…
2020.10.3
テキストエリア等で入力した文字の中にURLを含んでいた場合に、自動で認識してリンクタグを…
2024.03.30
外部ファイル(CSVファイル等)を読み込んでサイト内に表示する際に、保存時の文字コードが…
2020.12.5
メールフォームからメールを送信する際に、画像(ファイル)を添付できるようにしてほしいとの…
2023.12.2
ワードプレスの投稿のカテゴリー機能を、目的ごとに使い分けたいというご要望があった際に、カ…
2020.08.1
動画ファイルをCMS化して保存するときに、多くの場合はファイルパスをデータベース(MyS…
2019.12.29
メールフォーム等での入力値チェック(バリデーション)。PHPの「preg_match」(…
2022.02.19
画像データ等をサーバーにアップロードする際、一点づつアップロードしても良いけれど、ファイ…
2020.08.15
フォームの入力値やURLのパラメータ等、文字列や数値を受け取る際に正規表現を利用してバリ…
2022.09.24
パソコンやスマートフォンの戻るボタンを使って画面を戻す(ブラウザバックする)時があります…