无法初始化Fancybox和PHP

时间:2011-11-27 10:05:47

标签: php jquery fancybox

我在我的脚本中安装了fancybox但由于某些原因而不是单击弹出窗口,它只是单击图像的位置。我正在运行它通过一些数字生成的PHP代码(基于数据库中的信息)。因此,存在多个代码块,但其代码基本相同。我只是不知道如何让它工作任何建议都会很棒。我的代码如下。

<?php 
if(isset($_GET['package'])) {
    $package = ($_GET['package']);
    $arr = array();
    $items = "SELECT * FROM ind_products";
    $item_list = mysql_query($items);
    /*$row = mysql_fetch_array($item_list);*/
    while($row = mysql_fetch_array($item_list)) {
        $arr = explode(',',$row['packages']);
        if (in_array("$package",$arr)) {

        echo "<form action=\"\" method=\"post\" class=\"jcart\" >";
        echo "<div id=\"itemBox\" align=\"left\">";
        $item_name = ($row['item_name']);
        $size = ($row['size']);
        $description = ($row['description']);
        $id = ($row['id']);
        $photo = ($row['photo']);
        $photo2 = ($row['photo2']);

        if ($photo == '') {
            $photo = 'images/pph.jpg';
        }
        if ($photo2 == '') {
            $photo2 = 'images/pph2.jpg';
        }
        if ($description == '') {
            $description = 'Description goes here!';
        }
        echo "<input type=\"hidden\" name=\"my-item-id\" value=\"$id\">";       
        echo "<input type=\"hidden\" name=\"my-item-name\" value=\"$item_name\">";  
        echo "<input type=\"hidden\" name=\"my-item-price\" value=\"0.00\">";   
        echo "<input type=\"hidden\" name=\"my-item-url\" value=\"\">"; 

        echo "<p id=\"info_image\">";
        echo "<a id=\"single_1\" href=\"$photo2\">";
        echo "<img src=\"crop.php?h=85&w=85&f=$photo\" align=\"left\" alt=\"item images\" />";
        echo "</a>";
        echo "</p>";

        echo "<p id=\"info_box\">";
        echo "<span id=\"pro_name\">",$item_name,"</span>",'<br>';
        echo "<span id=\"pro_size\">",$size,"</span>",'<br>';
        echo "<span id=\"pro_des\">",$description,'<br>';   
        echo "<span id=\"pro_title\">Quantity</span><input name=\"my-item-qty\" type=\"text\" value=\"1\" size=\"3\" />";
        echo "<span id=\"pro_input\"></span><input type=\"submit\" name=\"my-add-button\" value=\"add to inquiry\" class=\"button\" />";    
        echo "</p>";
        echo "<div style=\"clear:both; margin-bottom:0.5em\"></div>";
        echo "</div>";
        echo "</form>";
        }else{

        // do nothing for now


        /*echo "<form action=\"\" method=\"post\" class=\"jcart\" >";
        echo "<div id=\"itemBox\" align=\"left\">";
        $item_name = ($row['item_name']);
        $size = ($row['size']);
        $description = ($row['description']);
        $id = ($row['id']);


        echo "<span id=\"pro_name\">",$item_name,"</span>",'<br>';
        echo "<span id=\"pro_size\">",$size,"</span>",'<br>';
        echo "<span id=\"pro_des\">",$description,'<br>';
        echo 'There are no products to display!!';
        echo "<div style=\"clear:both; margin-bottom:0.5em\"></div>";
        echo "</div>";
        echo "</form>"; */
        }
    }
}else{
    echo 'The packages are not set';
}
?>

fancybox代码:

$(document).ready(function() {

       $("#single_1").fancybox({
          helpers: {
              title : {
                  type : 'float'
              }
          }
      });
});

3 个答案:

答案 0 :(得分:1)

你确定所有必需的脚本(jquery + fancybox),以及加载/初始化没有错误的所有其他加载的js-script /代码? 在fancybox-setup-call之前发生任何错误的javascript错误都会阻止成功启动。

答案 1 :(得分:1)

首先,我将通过Fancy盒子如何

http://fancybox.net/howto

然后尝试这个

$(document).ready(function() { 

       $("a#single_1").fancybox();
}); 

如果可行,则开始添加您的自定义。

我会将您的ID更改为班级

echo "<a class=\"single_1\" href=\"$photo2\">";          
echo "<img src=\"crop.php?h=85&w=85&f=$photo\" align=\"left\" alt=\"item images\" />";          
echo "</a>"; 

一起
$(document).ready(function() { 

       $("a.single_1").fancybox();
});  

假设您计划同时显示多个拇指

答案 2 :(得分:0)

就像托马斯所说的那样,现在你的回声是id = \“single_1 \”href = \“$ photo2 \ line将生成具有相同id的多个对象,这可能会阻止你的花哨盒。

echo "<a id=\"single_".$row['id']."\" href=\"$photo2\">"; 

$java = ' $(document).ready(function() {           
           $("#single_';
$java .= $row['id'];
$java .= '").fancybox({ 
             helpers: { 
                 title : {                    
                  type : 'float'  
          }   
     }      
   }); 
 }); 
 ';