-1

それぞれに異なるガレリアギャラリーを持つ onclick 字幕が必要です (ポップアップスタイルではありません)。別々の HTML ページにガレリア ギャラリーがあり、ショーケース ページで ajax 呼び出しを実行して、サブタイトルをクリックするとギャラリーが表示されるようにしたいと考えています。

どこが間違っていますか？

これまでの私のphpページのコードは次のとおりです。

    <?
$main_content .= '

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.9.min.js"></script> 

            <style>
            #galleria{ width: 700px; height: 400px; background: #000; } 
            </style>


            <script type="text/javascript">
        $(document).ready(function() {
            $("#agricultural").click(function() {
                changeProduct($(this), $(this));

$("#galleria").load("AgriculturalSlideshow.html");
            });
            $("#commercial").click(function() {
                changeProduct($(this), $(this));

$("#galleria").load("CommercialSlideshow.html");
            });
            $("#community").click(function() {
                changeProduct($(this), $(this));

$("#galleria").load("communityslideshow.html");
            });
            $("#industrial").click(function() {
                changeProduct($(this), $(this));

$("#galleria").load("industrialslideshow.html");
            });
            $("#recreational").click(function() {
                changeProduct($(this), $(this));

$("#galleria").load("recreationalslideshow.html");
            });
            $("#underconstruction").click(function() {
                changeProduct($(this), $(this));

$("#galleria").load("underconstructionslideshow.html");
            });

        function changeProduct(menu, obj){
            $(".productMenu").css({"color":"#000000"});
            $(".prodContent").hide();
            $(menu).css({"color":"#a50000"});
            $(obj).fadeIn();
        }
        });
    </script>
    <div style="padding-top:0px; padding-bottom:50px;">
        <div class="pageHeader">
            SHOWCASE
        </div>
        <div class="content">   
        <div style="padding:20px 0px 20px 0px;">
            <span class="productMenu" id="agricultural" style="cursor:pointer; padding-right:20px; color:#a50000">AGRICULTURAL</span>       
            <span class="productMenu" id="commercial" style="cursor:pointer; padding-right:20px;">COMMERCIAL</span>
            <span class="productMenu" id="community" style="cursor:pointer; padding-right:20px;">COMMUNITY</span>
            <span class="productMenu" id="industrial" style="cursor:pointer; padding-right:20px;">INDUSTRIAL</span>
            <span class="productMenu" id="recreational" style="cursor:pointer; padding-right:20px;">RECREATIONAL</span>
            <span class="productMenu" id="underconstruction" style="cursor:pointer; padding-right:20px;">UNDERCONSTRUCTION</span>             
        </div>
         <div id="galleria"> 
        </div>
        <script>
            Galleria.loadTheme("galleria/themes/classic/galleria.classic.min.js");
            Galleria.run("#galleria");
        </script>




        <div style="clear:both; text-align:justify; text-align-last:justify;padding-top:50px;">
            AGRICULTURAL | COMMERCIAL | RESIDENTIAL & GARAGES | GOVERNMENT | INDUSTRIAL | INSTITUTIONAL | RECREATIONAL
        </div>
        <div style="clear:both"></div>
    </div>';
?>
4

1 に答える 1

0

ajaxリクエストではファイルパスではなくURLを使用する必要があるため、../AgriculturalSlideshow.html機能しません。なしで URL を使用する必要があります../。

絶対 URLhttp://または正しい相対 URL のいずれか。

そして、あなたjquery click event はによって上書きされますonclick attribute。したがってchangeProduct、jquery イベント ハンドラ内で呼び出して、スパン要素から onclick 属性を削除します。

にもセミコロンがありませんでしたchangeProduct:

     function changeProduct(menu, obj){
        $(".productMenu").css({"color":"#000000"});
        $(".prodContent").hide();
        $(menu).css({"color":"#a50000"});
        $(obj).fadeIn();
    }

そのフィドルを見てください：http://jsfiddle.net/YqFEn/2/

javascript をデバッグするには、chrome 開発者ツールまたは firebug (Firefox) を使用することをお勧めします。そうすれば、構文エラーや ajax リクエストを簡単にチェックできます。

ちなみに、パラメータmenuとobjはまったく同じであるため、期待どおりに動作しないことがあります。しかし、ajax リクエストは機能するはずです。

追加の問題について

字幕の下に div ボックスを追加し、すべてのギャラリーをこの div ボックスにロードできます。

<div id="gal_content"></div>

loadそして、ステートメントを調整します：

$("#gal_content").load("AgriculturalSlideshow.html");
于 2013-03-27T21:31:00.623 に答える