[php+js]phpでswiperを大量生産する

2020.07.16

前の記事の続きというか。

やりたいこと

$imageArray = [
	'01' => array('01.jpg','02.jpg','03.jpg','04.jpg'),
	'02' => array('01.jpg','02.jpg','03.jpg','04.jpg','05.jpg','06.jpg'),
	'03' => array('01.jpg','02.jpg','03.jpg','04.jpg','05.jpg','06.jpg'),
	'04' => array('01.jpg','02.jpg','03.jpg','04.jpg','05.jpg')
];

こんな感じでディレクトリをキーにしてその中の画像を配列にした多次元連想配列を作ったのでそれをswiper.jsに突っ込んで、1ページ内にディレクトリごとに分けたスライドを設置しまくるっていうのをやる。

やっていくこと

作った配列をいい感じに展開して任意の形に書き出していく。
別でデザインを組んでおいて法則っていうか形を決めておく。

<ul>
	<li>
		<div class="thumb"><img src="【1枚目】" alt=""></div>
		<div class="popup">【swiper.js】</div>
	</li>
</ul>

 

ディレクトリごとにメイン画像として1枚表示しておいて、それをクリックしたらスライドがポップアップで表示されるってのを作りたいから、大枠はこんな感じ。

<div class="popup">
	<div class="slide_set">
		<div class="inner">
			<div class="slide">
				<div class="swiper-container slide_01">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><img src="img/gallery/madetoorder/01/01.jpg" alt=""></div>
						<div class="swiper-slide"><img src="img/gallery/madetoorder/01/02.jpg" alt=""></div>
						<div class="swiper-slide"><img src="img/gallery/madetoorder/01/03.jpg" alt=""></div>
						<div class="swiper-slide"><img src="img/gallery/madetoorder/01/04.jpg" alt=""></div>
						<div class="swiper-slide"><img src="img/gallery/madetoorder/01/05.jpg" alt=""></div>
						<div class="swiper-slide"><img src="img/gallery/madetoorder/01/06.jpg" alt=""></div>
					</div>
					<div class="swiper-pagination-thumbs thumbs_01"></div>
				</div>
			</div>
			<span class="close_btn">閉じる</span>
		</div>
	</div>
</div>

popupの中はこんな感じ。
スライドと一緒にページャーのサムネも付ける。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
<script>
var thumb01 =[
	'./img/gallery/madetoorder/01/01.jpg',
	'./img/gallery/madetoorder/01/02.jpg',
	'./img/gallery/madetoorder/01/03.jpg',
	'./img/gallery/madetoorder/01/04.jpg',
	'./img/gallery/madetoorder/01/05.jpg',
	'./img/gallery/madetoorder/01/06.jpg',
];
var mySwiper01 = new Swiper('.slide_01', {
	loop: true,
	observer: true,
	observeParents: true,
	pagination: {
		bulletClass:'swiper-pagination-thumb',
		bulletActiveClass:'active',
		el: '.thumbs_01',
		clickable: true,
		renderBullet: function (index, className) {
			return '<span class="' + className + '" style="background-image:url('+ thumb01[index] +');"></span>';
		}
	}
});
</script>

js部分はこう。
ページャーのことがなければ手間もなかったんだけどね。

HTMLの方でも書いてるけど、スライドを複数設置するから各所で連番「01」を付けてるのがポイント。
foreachで展開しつつこれらを書き出していく。

配列の作成と準備

同じパターンでやるなら流用できるけど、考え方を理解する方で活用したのが今後を考えると良いと思う。

<?php
$imagesArray = array();
$dir = "./images/";
$res = scandir($dir);
unset($res[0],$res[1]);
$dirArray = array_values($res); 
foreach($dirArray as $dirName){
	$fileName = scandir($dir.$dirName);
	unset($fileName[0],$fileName[1]);
	$fileNameArray = array_values($fileName);
	$imagesArray += [$dir.$dirName.'/' => $fileNameArray];
}
//キーを抽出して配列作成
$keyArray = array_keys($imagesArray);
?>

前回のおさらいを含めて。
画像を格納してるディレクトリをキーにして入ってる画像名の配列を紐付けてる。前回の記事ではキーが「01」だったと思うけど、こっちでは使い勝手優先で「./images/01/」みたくなるようにした。

で、array_keys()に突っ込んでそのキーだけを取り出して配列化。
見直してみたら$dirArrayからでも$keyArray生成できるじゃんって感じだけど、慣れるまでは順を追ってやんないと混乱するし、まあいいよねと。
これで準備完了。

配列の展開

展開しつつ書き出しをやっていく。

html部分

<ul>
<?php 
$cntKey = 0;
//キーの配列を展開
foreach($keyArray as $keys){
	$cntKey++;
	$slideImgs = array();
?>
<li>
<?php
	//キーを指定してファイル名展開
	foreach($imagesArray[$keys] as $fileNames){
		if($fileNames === reset($imagesArray[$keys])){//最初だけ処理
?>
<div class="cover"><div class="img"><img src="<?php echo $keys.$fileNames; ?>" alt=""></div></div>
	<div class="popup">
		<div class="slide_set">
			<div class="inner">
				<div class="slide">
					<div class="swiper-container slide_<?php echo $cntKey; ?>">
						<div class="swiper-wrapper">
<?php
		}
?>
							<div class="swiper-slide"><img src="<?php echo $keys.$fileNames; ?>" alt=""></div>
<?php
	}
?>
						</div>
						<div class="swiper-pagination-thumbs thumb_<?php echo $cntKey; ?>"></div>
					</div>
				</div>
				<span class="close_btn">閉じる</span>
			</div>
		</div>
	</div>
</li>
<?php
}
?>
</ul>

$cntKeyで連番を生成してる。
上の方のhtmlでは「01」ってやってるのにこれだと「1」になるからダメなんだけど狙い的に間違ってないから良しとする。

「foreach($keyArray as $keys){}」でキーの配列を展開。
「foreach($imagesArray[$keys] as $fileNames){}」で各キーが持ってる配列を展開。
これでうまいことやっていく。

「if($fileNames === reset($imagesArray[$keys])){}」で最初だけ処理。
$cntKeyみたいに連番振ってn番目でなんちゃらってやろうとしても効かなかったからそうしてる。基礎がないからなんで動かないのか分からないまんま。

JS部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
<script>
<?php 
$cntKey = 0;
foreach($keyArray as $keys){
	$cntKey++;
	$slideImgs = array();
?>
var thumb<?php echo $cntKey; ?> =[ <?php foreach($imagesArray[$keys] as $fileNames){ if($fileNames === reset($imagesArray[$keys])){ echo '\''.$keys.$fileNames.'\''; }else{ echo ',\''.$keys.$fileNames.'\''; }} ?> ];
var mySwiper<?php echo $cntKey; ?> = new Swiper('.slide_<?php echo $cntKey; ?>', {
	loop: true,
	observer: true,
	observeParents: true,
	pagination: {
		bulletClass:'swiper-pagination-thumb',
		bulletActiveClass:'active',
		el: '.thumb_<?php echo $cntKey; ?>',
		clickable: true,
		renderBullet: function (index, className) {
			return '<span class="' + className + '" style="background-image:url('+ thumb<?php echo $cntKey; ?>[index] +');"></span>';
		}
	}
});
<?php
}
?>
</script>

swiper.jsの決まりごとで<body>の最後に記述しろってなってるのでまた1から展開。
htmlの方で理解できたらこっちは応用までいかないレベルの内容なので超簡単。

まあでもこれに関しては全部同じ動作でいいからってとこがある。
物によって処理を変えたいとかになってくるとifの振り分けがクソだるい。

参考

PHP – foreachで最初と最後の処理を制御する – Qiita

スポンサーリンク

コメント

タイトルとURLをコピーしました