加载Fancybox jQuery，Javascript和Stylesheet时出错

时间：2017-06-22 13:46:32

标签： javascript jquery fancybox fancybox-2

我正在尝试实现FancyBox v2.1.7，并且在尝试加载内容时收到一些错误。所以我按照说明将相关代码添加到我的php文档的head标签中。请参阅代码和图像作为参考：

<!-- Add jQuery library -->
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.7"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<script type="text/javascript">
  $(document).ready(function() {
    $(".fancybox").fancybox();
  });
</script>

网站错误 Website Errors 我已在服务器上命名文件夹fancybox，并且我已将上面的代码放在product.php页面的头部。

产品代码

<?php
$product_sql = mysql_query("SELECT * FROM products WHERE Product_Title_Slug = '$seo_title'");

// If no match exists, display error 404
if (mysql_num_rows($product_sql) == 0)
{
    include('error404.php');
    exit();
}
$prod_row = mysql_fetch_array($product_sql);
$prod_id = $prod_row['Product_ID'];
$cat_id = $prod_row['Category_ID'];
$prod_title = $prod_row['Product_Title'];
$prod_meta_title = $prod_row['Product_Meta_Title'];
$prod_code = $prod_row['Product_Code'];
$prod_description = $prod_row['Product_Description'];
$prod_meta_description = $prod_row['Product_Meta_Description'];
$prod_meta_keywords = $prod_row['Product_Meta_Keywords'];
$prod_points = explode("|", $prod_row['Product_Points']);
$info_name = array("","Continuous KVA:","Maximum KVA:","Continuous KW:","Maximum KW:","Sockets:","Fuel Type:","Run Time:","Noise Level:","Weight:","Width:","Height:","Length:","Fuel Capacity:","Starting Method:","Frequency:","AVR:", "ATS:");
$info_type = array(""," KVA"," KVA"," KW"," KW","",""," hours"," dba @ 7m","kg","mm","mm","mm","L","","Hz","", "");
$price = $prod_row['Price'];
$price_sale = $prod_row['Price_Sale'];
$price_final = $prod_row['Price_Final'];
$prod_video = $prod_row['Product_Video'];
$offer = $prod_row['Offer'];
$next_day_del = $prod_row['Next_Day_Delivery'];
$stock = $prod_row['Stock'];
$prod_brand = $prod_row['Product_Brand'];
$warranty = $prod_row['Warranty'];
$brand_sql = mysql_query("SELECT * FROM brands WHERE Brand_ID = $prod_brand");
if (mysql_num_rows($brand_sql) > 0)
{
    $brand_row = mysql_fetch_array($brand_sql);
    $brand_name = $brand_row['Brand_Name'];
}

// Get category details for breadcrumbs
$category_sql = mysql_query("SELECT Category_Name, Category_Name_Slug FROM categories WHERE Category_ID = $cat_id");
$cat_row = mysql_fetch_array($category_sql);
$cat_name = $cat_row['Category_Name'];
$cat_name_slug = $cat_row['Category_Name_Slug'];

// Assign page details
$page_title = $prod_title;
$meta_title = $prod_meta_title; 
$meta_description = $prod_meta_description;
$meta_keywords = $prod_meta_keywords;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?=$meta_title?> | <?=$site_name?></title>
<meta name="description" content="<?=$meta_description?>" />
<meta name="keywords" content="<?=$meta_keywords?>" />

<?php include ("includes/header-tags.php") ?>


<!--2017 Fancy-->
<!-- Add jQuery library -->
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.7"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<script type="text/javascript">
  $(document).ready(function() {
    $(".fancybox").fancybox();
  });
</script>

<script type="text/javascript" src="/js/tabs.js"></script>
<?php if (isset($_POST['Add_Basket'])): // Adding to basket ?>
<script src="/js/addbasketpopup.js"></script>
<?php endif; ?>
<link href="/css/tabs.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="wrapper">
    <?php include ("includes/header.php") ?>
    <ul id="breadcrumbs">
        <li><a href="/">Home</a></li>
        <li> &rsaquo; <a href="/<?=$cat_name_slug?>"><?=$cat_name?></a></li>
        <li> &rsaquo; <?=$page_title?></li>
    </ul>
    <?php include ("includes/left-content.php") ?>
    <div id="main">
        <div id="prod-details-img">
            <?php
            if ($warranty >= 2) {
                echo '<div class="prod-details-warranty">' . $warranty . ' Years Warranty</div>';
            }
            ?>
            <div></div>
            <img src="/images/large/<?=$prod_id?>.jpg" alt="<?=$prod_title?>" />
        </div>
        <div id="prod-details">
            <h1 class="prod-title-large"><?=$prod_title?></h1>
            <span id="prod-details-delivery">
            <img class="price-prom-sml" src="/images/price-promise.gif" alt="Price Promise" /><br />
            Price includes VAT &amp; Delivery<br />Order before 1pm for Free Next Day Delivery <br/>(UK Mainland Only)*</span>
            <div id="prod-details-buy">
                £<?=$price_final?>
                <?php if ($stock == "TRUE"):?>
                <form action="<?php $_SERVER['PHP_SELF'] ?>" method="post">
                    <input type="hidden" name="Auto_ID" value="<?=$prod_id?>" />
                    <input type="hidden" name="QTY" value="1" />
                    <button type="submit" name="Add_Basket" id="buy-btn">Buy</button>
                </form>
                <?php else: ?>
                <br />Out of Stock
                <?php endif; ?>
            </div>
        </div>
        <div id="product-specs">       
        <div id="tabContainer">
                <div id="tab_1" class="tabs_on" onclick="tabsClass.switchTab(this);">Description</div>
                <div id="tab_2" class="tabs_off" onclick="tabsClass.switchTab(this);">Specifications</div>
                <?php if(!empty($prod_video)): ?>
                <div id="tab_3" class="tabs_off" onclick="tabsClass.switchTab(this);">Video</div>
                <?php endif; ?>
            </div>
            <div id="tab_1_data" class="tab_content">
                <p><?=nl2br($prod_description)?></p>
                <?php
                // If product has bullet points, explode and print
                if (!empty($prod_points[0]))
                {
                    echo '<ul>';
                    foreach ($prod_points as $bullet_point)
                    {
                        echo '<li>' . $bullet_point . '</li>';
                    }
                    echo '</ul>';
                }
                ?>
            </div>
            <div id="tab_2_data" class="tab_content" style="display: none;">
                <table class="spec-table" cellspacing="0" cellpadding="0">
                    <?php if(!empty($brand_name)): ?>
                    <tr>
                      <td>Manufacturer:</td>
                      <td><?=$brand_name?></td>
                    </tr>
                    <?php endif; ?>
                    <tr>
                      <td width="150">Product Code:</td>
                      <td><?=$prod_code?></td>
                    </tr>
                    <?php
                    $class = ($x == 3) ? 'prod-result-last' : 'prod-result';
                    $x = 1;
                    while ($x <= 17):
                        if (!empty($prod_row["Info_$x"])):
                            if ($prod_row["Info_$x"] == "TRUE")
                            {
                                $prod_row["Info_$x"] = "Yes";
                            }
                            elseif ($prod_row["Info_$x"] == "FALSE")
                            {
                                $prod_row["Info_$x"] = "No";
                            }
                    ?>
                    <tr>
                      <td><?=$info_name[$x]?></td>
                      <td><?=$prod_row["Info_$x"] . $info_type[$x]?></td>
                    </tr>
                    <?php
                        endif;
                    $x++;
                    endwhile;
                    ?>
                    <?php if(!empty($warranty)): ?>
                    <tr>
                      <td>Warranty:</td>
                      <td><?=$warranty?> Year</td>
                    </tr>
                    <?php endif; ?>
                </table>
               </div>
               <?php if(!empty($prod_video)): ?>
               <div id="tab_3_data" class="tab_content" style="display: none;">
                    <?=$prod_video?>
               </div>
               <?php endif; ?>
            <script type="text/javascript">
                tabsClass.addTabs("tabContainer");
            </script>
        </div>
        * Next Day Delivery subject to stock, please see our <a href="/terms">Terms &amp; Conditions</a>.
    </div>
    <?php include ("includes/footer.php") ?>
</div>

</body>
</html>

1 个答案:

答案 0 :(得分：0)

我猜（因为你没有提供实时页面的链接）文件没有正确的路径，因此它们包含404错误消息或类似的东西，因此你会看到这些消息。

检查您的路径，尝试使用直接路径，例如src="/fancybox/代替src="fancybox/

相关问题
最新问题