5013


fancyBox2 で写真をポップアップさせたいのですが、`The requested content cannot be loaded. Please
try again later.` という文章が出てしまいます。

何が間違えているのでしょうか？？

僕が現状書いているプログラムは以下のとおりです。  
なお、 DreamWeaver CS6 の可変グリッドを使いウェブサイトを作っております。

[code]

    <!doctype html>
    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="">
    <!--<![endif]-->
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="we are web maker" />
    <meta name="keywords" content="we are">
    <meta name="robots" content="ALL">
    <title> Welcome to Web Site　</title>
    
    <link href="boilerplate.css" rel="stylesheet" type="text/css">
    <link href="cotte_index.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    a:link {
        color: #FFFFFF;
        text-decoration: none;
    }
    a:visited {
        text-decoration: none;
        color: #FFFFFF;
    }
    a:hover {
        text-decoration: none;
        color: #ADFFE9;
    }
    a:active {
        text-decoration: none;
    }
    </style>
    
    <link rel="stylesheet" href="fancyapps-fancyBox/source/jquery.fancybox.css" type="text/css">
    
    
    <!-- 
    To learn more about the conditional comments around the html tags at the top of the file:
    paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
    
    Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
    * insert the link to your js here
    * remove the link below to the html5shiv
    * add the "no-js" class to the html tags at the top
    * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build 
    -->
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="fancyapps-fancyBox/source/jquery.fancybox.pack.js"></script>
    
    <script src="respond.min.js"></script>
    
    
    <script>var __adobewebfontsappname__="dreamweaver"</script>
    <script src="http://use.edgefonts.net/alike:n4:default.js" type="text/javascript"></script>
    
    
    <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
    
    
    <script type="text/javascript">
    
            $('.fancybox').fancybox();
    </script>
    
    
    </head>
    
      <body>
    
    
        <div class="gridContainer clearfix">
    
         <div class="blank">
    
           <div id="all_contents">
    
           <div id="image-home">
             <p><img src="images/home_picture_png.png"></p>
           </div>
    
           <div id="logo"><img src="images/logo-web.png"></div>
    
    
    
            <nav id="navi" class="fluid ">
    
                    <ul id="menu" class="fluid fluidList ">
    
                            <li class="fluid menu_list" id="home_btn"><a href="1.html">1</a></li> 
    
                            <li class="fluid menu_list " id="2_btn"><a href="2.html">2</a></li>
    
                            <li class="fluid menu_list" id="3_btn"><a href="3.html">3</a></li>
    
                            <li class="fluid menu_list" id="4_btn"><a href="4.html">4</a></li>
    
                            <li class="fluid menu_list" id="5_btn"><a href="5">5</a></li>
    
                            <li class="fluid menu_list " id="6_btn"><a href="6">6</a></li>
    
                    </ul>
            </nav>
    
            <h2>We are</h2>
    
                               <a class="fancybox" href="stylist_pt/aa1.png" data-fancybox-group="group" title=""><img src="stylist_pt/aa2.png" alt="" /></a>
    
            <footer id="footer" class="fluid ">Copyright© 2014 we are web maker . All Rights Reserved.</footer>
    
        </div><!--all_contents end-->
         </div><!--blank end-->
      </div><!--end gridcontainer clearfix-->
    
    
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2015-01-21T11:39:11.023
5002
2015-01-21T15:08:09.327
2015-01-21T11:47:25.137
4978
7647
question
javascript jquery
fancyBox2 で写真をポップアップすると、 `Please try again later.` エラーが表示される


画像ファイルが期待された URL に存在しない可能性があります。以下の部分:

[code]

    <h2>We are</h2>
    <a class="fancybox" href="stylist_pt/aa1.png" data-fancybox-group="group" title="">
      <img src="stylist_pt/aa2.png" alt="" />
    </a>
    
[/code]

この記述は、「 _最初に画像`stylist_pt/aa2.png` を表示しておいて、クリックされたときに、 画像
`stylist_pt/aa1.png` を拡大表示する指定_ 」です。拡大表示するべき画像を取得しようとしたときに、 404 エラーが返っていると
`The requested content cannot be loaded. Please try again later.`
が表示されます。ですので、質問の場合も単純に、 `stylist_pt/aa1.png` にファイルが存在しないのではないでしょうか。

直接 URL にアドレスを指定して確認してみてください。ページを閲覧するのに:

  * `http://127.0.0.1:8080/site/sample.html`

にアクセスしていたとすれば:

  * `http://127.0.0.1:8080/site/stylist_pt/aa1.png`

が必要な画像の URL になります。


CC BY-SA 3.0
2015-01-21T12:29:07.450
5006
2015-01-21T12:29:07.450
4978
5002
answer

[code]

    <a class="fancybox" href="stylist_pt/aa1.png" data-fancybox-group="group" title="">
        <img src="stylist_pt/aa2.png" alt="" />
    </a>
    
[/code]

この部分を

[code]

    <a class="fancybox" rel="gallery1" href="http://farm9.staticflickr.com/8614/15993952806_52bd5e4798_b.jpg" title="Glowing Oak (Keartona)">
        <img src="http://farm9.staticflickr.com/8614/15993952806_52bd5e4798_m.jpg" alt="" />
    </a>
    
[/code]

こうしただけで動作が確認できました。

アップロード先で画像のURLを指定して画像のみ表示できますか？  
もしくは拡張子やファイル名が大文字になっていませんか？


CC BY-SA 3.0
2015-01-21T15:08:09.327
5013
2015-01-21T15:08:09.327
7214
5002
answer