PHP、MYSQL、JQUERYの初心者です。
フォトギャラリー(ul)をdivにロードするつもりでした。
次のスニペットは適切に機能し、その要素とその子に適用されたスタイルも機能します。
WHERE句は、1つのパラメータ(TabFotosVisivel = 1)だけで12枚の画像をロードするのに十分です。
次のスニペットを確認してください。
INDEX.PHP
<div id="idDivTC">
<ul>
$result = mysql_query("SELECT * FROM TabFotos WHERE TabFotosVisivel=1 ORDER BY TabFotosID DESC LIMIT 0,12");
while($row = mysql_fetch_array($result)){
$caminhoArquivo=$row["TabFotosCamArqMini"];
$descricao=$row["TabFotosDescricao"];
$titulo=$row["TabFotosTitulo"];
echo("<li><img class='claFotoMiniatura' src='".$caminhoArquivo."' title='".$titulo."' alt='".$descricao."'></li>");
}//fim do while
</ul>
</div><!-- /idDivTC -->
//-----------index.phpのスタイル------------------------
#idDivTC ul li {
display:inline;
}
#idDivTC ul li img{
margin:1px;
float:left;
}
次に、同じ構造に別のギャラリーをロードし、Jqueryを使用して純粋なPHPでページを呼び出します。
WHERE句ID'idLido'への追加パラメータ。
コードは
//-------------index.phpのjquery----------------------
$(".claSubMenu").click(function (){
var idLido=$(this).attr("alt");
$.post("miniatura.php", { idLido:idLido})
.done(function(data) {
var arrayRetorno=new Array();
arrayRetorno=data.split("@");
for (i=0;i<arrayRetorno.length;i++){
$("#idDivTC ul").append(arrayRetorno[i]);
}
});
});
MINIATURA.PHP
<?php
require_once("bd.php");
$idLido=$_POST['idLido'];
$sentenca = "SELECT * FROM TabFotos WHERE TabFotosFKGalerias = ".$idLido." AND TabFotosVisivel=1";
$result = mysql_query($sentenca);
while ($row = mysql_fetch_array($result)){
$titulo=$row['TabFotosTitulo'];
$descricao=$row['TabFotosDescricao'];
$caminhoArquivo=$row['TabFotosCamArqMini'];
$retorno=$retorno."<li><img class='claFotoMiniatura' src='".$caminhoArquivo."' title='".$titulo."' alt='".$descricao."'></li>@";
}
echo $retorno;
mysql_close($con);
?>
データを取得した後、Jquery/javascriptはそれを配列に変換します。
これが私のポイントです。私が言ったように、私が呼び出すときに、この配列の各値を読み取り、その要素/リストに追加したいと思います
$(".claSubMenu").click(function (){
終えた
for (i=0;i<arrayRetorno.length;i++){
$("#idDivTC ul").append(arrayRetorno[i]);
}
それは機能しますが、スタイルはもう適用されません。前者のブロックは同じIDを持っていますが、後者は同じではないように思えます。
その上、このクリックイベント
$("#idDivTC ul li > img").click(function (e){ ...
JqueryUIダイアログウィンドウを呼び出しますが、前者の構造でも機能します。
どうすれば私の意図を達成できますか?
ありがとうございました
さらに、これはモーダルダイアログウィンドウ(Ui JQuery)へのコードです。
//--------------------index.phpのモーダル----------------
$("#idDivTC ul li > img").click(function (e){
e.preventDefault();
var titulo = $(this).attr("title");
var alternativa = $(this).attr("alt");
var imagemObj = new Image();
var caminhoArquivo=$(this).attr("src");
imagemObj.src= caminhoArquivo;
imagemObj.onload = function()
{
var largura=imagemObj.width;
var altura=imagemObj.height;
$(this).clone().dialog({
title: function (){
return titulo+" - "+caminhoArquivo;
},
modal: true,
resizable: false,
draggable: true,
width: function(){
return largura;
}
//fim da funcao da largura
});//fim da da this clone
};// fim da imagem load
});
// ------------------------------