申し訳ありませんが、コーディングに関してはあまり経験がありませんが、学習しようとしています。
画像ギャラリーに Isotope プラグインを使用しています。各画像、タイトル、カテゴリ、および説明をハードコーディングする代わりに、それを mysql データベースに接続したいと考えています。誰かが私が始めるのを手伝ってくれますか?
これは、私が使用しようとしているギャラリーの例です。それはすべてハードコードされており、データベース駆動型に変換したいと考えています。
http://www.wiseguys-themes.com/wiseguys/creative/portfolio-filter-4columns.html
これは、ハードコードされたもののように見えます... 1 つの項目のみが表示されています。
HTML
<!-- Isotope filters
================================================== -->
<section class="isotopeFilters clearfix">
<ul class="option-set clearfix" data-option-key="filter">
<li><a href="#" data-filter=".outdoor">Outdoor Living</a></li>
<li><a href="#" data-filter=".bathrooms">Bathrooms</a></li>
<li><a href="#" data-filter=".master">Master Suites</a></li>
<li><a href="#" data-filter=".kitchen">Kitchens</a></li>
<li><a href="#" data-filter=".dining">Dining Rooms</a></li>
<li><a href="#" data-filter=".office">Office</a></li>
<li><a href="#" data-filter=".great">Great Rooms</a></li>
<li><a href="#" data-filter=".bonus">Bonus Room/Man Cave</a></li>
<li><a href="#" data-filter="*">All</a></li>
</ul>
<!-- Responsive Filters
================================================== -->
<form action="#" method="post" class="hidden">
<select>
<option value="">Categories</option>
</select>
</form>
</section>
<!-- Isotope container
================================================== -->
<section class="isotopeContainer portfolio left-twenty">
<div class="element onefourth kitchen">
<div class="portfolioImage">
<a class="jackbox" data-group="work1" data-thumbTooltip = "Image Title" data-title="Image Title with <a href='http://themeforest.net/user/wiseguys' target=_blank'>link</a>" data-description="#description_1" href="images/portfolio/1.jpg">
<div class="jackbox-hover jackbox-hover-blur jackbox-hover-magnify"></div>
<img width="225" height="170" src="images/portfolio/thumbs4/1.png" alt="" />
<span class="portfolioImageOver transparent"></span>
</a>
</div>
<div class="portfolioText" data-targetURL="portfolio-single.html">
<span class="portfolioTextOver transparent"></span>
<p>Single image example</p>
<span>- illustration -</span>
</div>
<span class="portfolioArrow"></span>
<!-- Sample div used as an item's description, will only appear inside JackBox -->
<div class="jackbox-description" id="description_1">
<h3>Description Title One</h3>
<a href="#">Link</a> ipsum dolor sit amet, consectetur adipiscing elit. In est metus, tincidunt vitae eleifend sit amet, porta a sapien. Fusce in dolor nec purus facilisis dictum. tincidunt sed quam.
</div>
</div>
</section><!-- end isotope container -->
これが私のPHPです。もちろん、実際のファイルでは db_username と db_password を置き換えました。
PHP
<?
$con = mysql_connect("localhost", "db_username", "db_password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("gallery", $con);
$sql="SELECT * FROM entry WHERE status = 'registered'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)) {
//Category ids
$cat = $row['id'] ;
print "<p >" . $row['cat'] . "</p>";
print "<p >" . $row['image'] . "</p>";
print "<p class='title'>" . $row['title'] . "</p>";
print "<p class='description'> Description: " . $row['description'] . "</p>";
print "</div>";
}
mysql_close($con);
?>
データベースに接続できますが、すべてのギャラリー画像を取得して 4 列で表示し、まだフィルター可能にするためのコードがわかりません。
アップデート
Carlos が提供するコードを試しましたが、必要に応じて動作しませんでした。私が持っているものと一致するように、コードを少し編集しました。データベースに接続しますが、出力 HTML に問題があると思います。これが私が持っているものです...
<section class="isotopeContainer portfolio left-twenty">
<?PHP
//connect in db
$mysqli = new mysqli('localhost', 'db user', 'my db password', 'db name');
//check for error
if ($mysqli->connect_error) {
die('Connect Error (' . $mysqli->connect_errno . ') '. $mysqli->connect_error);
}
//mount query
$query = 'SELECT * FROM gallery WHERE type=\'image\'';
//declare var array
$array = array();
//use query and make associative array.
if($result = $mysqli->query($query)){
//fetch associative array
while ($row = $result->fetch_assoc()){
$array[] = $row;
}
}
/*use associative array and make html*/
//count array
$count = count($array);
//declare container var for html code
$html = '';
//note: but I think it's impossible to put link on titles. I think, in this case you need to use fancybox and put link in description
for($i=0; $i<$count; $i++){
$html .= '<div class="element onefourth illustration">'.
'<div class="portfolioImage">'.
'<a class="jackbox" data-group="'.$array[i]["cat"].'" data-thumbTooltip = "'.$array[i]["title"].'" data-title="'.$array[i]["title"].'" href="http://holmesbydesign.com/test/galleryimages/'.$array[i]["url"].'>'.
'<div class="jackbox-hover jackbox-hover-blur jackbox-hover-magnify"></div>'.
'<img width="225" height="170" src="http://holmesbydesign.com/test/galleryimages/'.$array[i]["image"].'" alt="" />'.
'<span class="portfolioImageOver transparent"></span>'.
'</a>'.
'</div>'.
'<div class="portfolioText" data-targetURL="portfolio-single.html">'.
'<span class="portfolioTextOver transparent"></span>'.
'<p>'.$array[i]["description"].'</p>'.
'<span>- '.$array[i]["title"].' -</span>'.
'</div>'.
'<span class="portfolioArrow"></span>'.
'</div>' ;
}
//and finally display html code
echo $html;
?>
</section><!-- end isotope container -->
ここでコードをライブで見ることができます: http://holmesbydesign.com/test/portfolio2.php
これが私が望むものです：http://holmesbydesign.com/test/portfolio.php
出力で終了 div タグが正しく配置されていません。解決策を見つけられるかどうかを調査して確認しようとしています。
再度更新
また、ここにデータベースに関する情報があります。
テーブルは次のとおりです: ギャラリー
表の列は次のとおりです。
id (数値 1、2、3 など)
画像(完全な URL ではなく、画像の名前... 例: gallery_0cda5_image4.jpg)
動画（動画のURL）
タイトル（例：キッチン）
タイプ(数値、これはアップローダーの選択フィールドであり、「タイプ」テーブルからタイプを取得します。ここで、1 = 画像、2 = ビデオ)
cat (数値、これはアップローダの選択フィールドで、1 = エクステリア、2 = アウトドア リビング、3 = キッチンなどの「cat」テーブルから猫を取得します。)
説明(ジャックボックスで使用される説明)
上記のコードで正しく設定されている場合、ここでは 3 つの異なるテーブルが使用されているため、わかりません。
クエリが正しく設定されていないと思います。