Swiperを設置したホームページを作ってみる

2019年4月9日

ＰＨＰで検索表示できるページとして激安の中古戸建てのページを試作してみたのですが、一覧表示のページからリンクされた詳細ページにおいて、Swiperを使って複数の画像を手動で入れ替えるようにしようと思っています。

ページによって画像の数が違うので、Swiperを使ったほうが、すっきりしたページになるんです。
せっかくなので、PHPでMySQLからデータを読み込むようにしようと思います。

とりあえず、HTMLでSwiperを使えるようにします。
https://github.com/nolimits4web/swiper/releases
から、swper（今回は　swiper-4.4.6.zip）をダウンロードします。
ダウンロードしたswiper-2.7.6.zipを解凍して、swiper.min.cssとswiper.min.jsを取り出しまて、自分のサイトにアップロードします。
<HEAD></HEAD>の間に
<link rel=”stylesheet” href=”アップロードしたフォルダ/swiper.min.css”>
<BODY></BODY>の間の</BODY>の直前に
<script src=”アップロードしたフォルダ/swiper.min.js”>
</script>
を記載します。この部分がちょっと判りにくかったのでメモしておきます。

とりあえずアップロードしたswiper.min.jsとswiper.mini.cssは使わないで、
https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css
https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js
にリンクして動作させることにしました。

ここまで準備出来たら、後は　https://garigaricode.com/swiper/　を参考に
Swiperのオプション設定（Javascript）の内容を
<script src=”アップロードしたフォルダ/swiper.min.js”>の下に
<script>　　　　</script>に囲んで記入します。
この位置関係が重要です。
俊は

を選びました。

HTML内には表示したい場所に

<!– Swiper START –>
<div class=”swiper-container”>
<!– メイン表示部分 –>
<div class=”swiper-wrapper”>
<!– 各スライド –>
<div class=”swiper-slide”>Slide 1</div>
<div class=”swiper-slide”>Slide 2</div>
<div class=”swiper-slide”>Slide 3</div>
<div class=”swiper-slide”>Slide 4</div>
</div>
<div class=”swiper-button-prev”></div>
<div class=”swiper-button-next”></div>
<div class=”swiper-pagination”></div>
</div>
<!– Swiper END –>

を記入します。
<div class=”swiper-slide”>Slide 1</div>
のSlide 1部分は各自で表示したいものに変更します。
画像の場合は
<div class=”swiper-slide”><IMG src=”abare2.jpg” border=”0″></div>
みたいな感じです。

<div class=”swiper-button-prev”></div>
<div class=”swiper-button-next”></div>
は次のページ、前のページに移動するためのボタンで
<div class=”swiper-pagination”></div>
は何ページ目かを表示するためのものです。

2019年4月13日

実際に、動作させてみたのですが、自分のサイトのファイルでも無事動作しました。

https://kimassi.net/hudousan/1/kodate1.php

PHPで工夫が必要なのは、<div class=”swiper-slide”>Slide 1</div>で画像の登録数を確認し登録数に従って記述の数を調整すところかなと思います。
IF文でデータが無ければ、<!– メイン表示部分 –>の処理を止めるという処理でうまくいけば楽なんですけど。
最終的にはカラムにデータがあれば表示するという処理を、10回繰り返す方法を採用しました。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<META name=”keywords” content=”金沢市,石川県,不動産,戸建て,中古”>
<META name=”description”content=”金沢の激安の中古住宅を紹介しています。”>
<META charset=”UTF-8″>
<STYLE>
<!–
.gyou{
line-height: 18pt ;
}
–>
</STYLE>
<STYLE>
<!–
body, th, td{
font-size: 95%;

// 600px以降から、100pxごとに1px大きくなる
@media (min-width: 600px) {
font-size: calc(112.5% + 4 * (100vw – 600px) / 400)
}

// 1,000px以上は、22pxに
@media (min-width: 1000px) {
font-size: calc(137.5%)
}
}

–>
</STYLE>
<STYLE>
<!–

@media(min-width: 600px){p.resizeimage3{
margin-top: 0px;margin-bottom: 0px;width: 720px;
}
}
p.resizeimage3 img{
width: 100%;
}

body,html{
max-width:800px;
margin-right: auto;
margin-left : auto;
}

–>
</style>

<?php
try {
$dsn=’mysql:host=127.0.0.1;dbname=kimassi_kodate’;
$db = new PDO($dsn, ‘kimassi_kodate’, ‘********’);
} catch (PDOException $e) {
echo ‘DB接続エラー： ‘ . $e->getMessage();
}
?>

<?php
$where=”no=1″;
?>

<BR>

</CENTER>

<!– Swiper START –>
<div class=”swiper-container”>
<!– メイン表示部分 –>
<div class=”swiper-wrapper”>

<?php
$stmt = $db->query(”
SELECT *
FROM gekiyasukodate
WHERE $where
“);
$result = $stmt->fetch();

$price=number_format($result[‘kakaku’]);
if (empty($result[‘gazou2’])==false){
//<!– 各スライド –>;
echo “<div class=\”swiper-slide\”><p class=\”resizeimage3\”><IMG src=\””.$result[‘gazou2’].”\” border=\”0\”></P></div>\n”;}
if (empty($result[‘gazou3’])==false){
echo “<div class=\”swiper-slide\”><p class=\”resizeimage3\”><IMG src=\””.$result[‘gazou3’].”\” border=\”0\”></P></div>\n”;}
if (empty($result[‘gazou4’])==false){
echo “<div class=\”swiper-slide\”><p class=\”resizeimage3\”><IMG src=\””.$result[‘gazou4’].”\” border=\”0\”></P></div>\n”;}
if (empty($result[‘gazou5’])==false){
echo “<div class=\”swiper-slide\”><p class=\”resizeimage3\”><IMG src=\””.$result[‘gazou5’].”\” border=\”0\”></P></div>\n”;}
if (empty($result[‘gazou6’])==false){
echo “<div class=\”swiper-slide\”><p class=\”resizeimage3\”><IMG src=\””.$result[‘gazou6’].”\” border=\”0\”></P></div>\n”;}
if (empty($result[‘gazou7’])==false){
echo “<div class=\”swiper-slide\”><p class=\”resizeimage3\”><IMG src=\””.$result[‘gazou7’].”\” border=\”0\”></P></div>\n”;}
if (empty($result[‘gazou8’])==false){
echo “<div class=\”swiper-slide\”><p class=\”resizeimage3\”><IMG src=\””.$result[‘gazou8’].”\” border=\”0\”></P></div>\n”;}
if (empty($result[‘gazou9’])==false){
echo “<div class=\”swiper-slide\”><p class=\”resizeimage3\”><IMG src=\””.$result[‘gazou9’].”\” border=\”0\”></P></div>\n”;}
if (empty($result[‘gazou10’])==false){
echo “<div class=\”swiper-slide\”><p class=\”resizeimage3\”><IMG src=\””.$result[‘gazou10’].”\” border=\”0\”></P></div>\n”;}
?>
</div>
<div class=”swiper-button-prev”></div>
<div class=”swiper-button-next”></div>
<div class=”swiper-pagination”></div>
</div>
<!– Swiper END –>

<?php

echo “<table bgcolor=\”#fbe48c\”>\n”;

echo “<tr>\n”;
echo “<td bgcolor=\”#ffffff\” class=\”gyou2\” valign=\”top\”><span style=\”color: #ff0000;\”><strong>価格 $price 円</strong></span><BR>{$result[‘tiiki’]}{$result[‘tyoumei’]}
<A href=\”{$result[‘map’]}\” target=\”_blank\”>地図を見る</a>　<BR>
土地面積　{$result[‘totimenseki’]}㎡　建物面積　{$result[‘tatemonomenseki’]}㎡　<BR>築年数　{$result[‘tikunensuu’]}年　　間取　{$result[‘madori’]}
駐車　{$result[‘tyuusya’]}<BR>
セットバック　{$result[‘setback’]}　　　再建築の可否　{$result[‘saikentiku’]}<BR>
<span style=\”color: #ff0000;\”>{$result[‘bikou1’]}<BR>
{$result[‘bikou2’]}</span>　<BR>
媒介種別　{$result[‘sennin’]} 　登録日　{$result[‘date’]}</td>\n”;
echo “</tr>\n”;
echo “</table>\n”;

?>
</center>
<script src=”https://kimassi.net/hudousan/swiper.min.js”>
</script>
<script>
var mySwiper = new Swiper(‘.swiper-container’, {
loop: true,
navigation: {
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’
},
pagination: {
el: ‘.swiper-pagination’,
type: ‘bullets’,
clickable: true
}
});
</script>

</BODY>
</HTML>

後は掲示板を設置と入会登録（さすがに高額な住宅を掲載するのに登録なしというのは具合悪い）のファイルは必要かな？
掲示板の投稿があった時に投稿者にもメールするようなシステムが良いかなと思います。

きまっし金沢の雑記帖

きまっし金沢に掲載しなかった情報と掲載する前の情報を中心に掲載しています。自分の備忘録も兼ねています。

Swiperを設置したホームページを作ってみる

コメントを残すコメントをキャンセル

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル