如何使用Ajax和javascript构建图像组合

Question

I am trying to launch an image portfolio by pressing a thumbnail. 我正在尝试通过按缩略图启动图像库。 The code to build the portfolio does not get run until the user presses the thumbnail. 在用户按下缩略图之前，构建投资组合的代码不会运行。 Here is what I have. 这就是我所拥有的。

I am essentially trying implement one these into my website. 我本质上是在尝试将这些应用到我的网站中。 http://www.jacklmoore.com/colorbox/example1/ http://www.jacklmoore.com/colorbox/example1/

The workflow is: 1. A list of portfolios is displayed with a thumbnail 2. When the thumbnail is selected, the portfolio is built and displayed. 工作流程为：1.将显示带有缩略图的项目组合列表。2.选择缩略图后，将构建并显示项目组合。

The code below works as it should. 下面的代码可以正常工作。 When the thumbnail is selected, the portfolio is launched and all is good. 选择缩略图后，便会启动投资组合，一切都很好。 This was tested with a loop and executed each time the page is loaded. 对此进行了循环测试，并在每次加载页面时执行。

<a class="group2" href="'.$cacheDataPath . $thumbnail.'">
<img style="display: inline-block" src="'.$cacheDataPath . $thumbnail.'" width="100" height="100"></a>

In order to build the portfolio when selected (and not each time the page is loaded) I am using this which is working. 为了在选择时（而不是每次加载页面时）构建项目组合，我正在使用此方法。

<a href="javascript:void(0)" onclick="buildColorboxPortfolio()">

function buildColorboxPortfolio() {
      $.ajax({
       type: "POST",
       url: 'http://ec2-xx-xx-xx-xx.compute-1.amazonaws.com/build_portfolio.php',
       data:{action:'test'},
       async:false,
       complete: function (response) {
       jQuery('#output').html(response.responseText);
      }
    //      alert(html);
  });

} }

From here what needs to happen is a url is created that looks like this. 从这里开始，需要创建一个看起来像这样的URL。 It is generated in the php script. 它是在php脚本中生成的。 Then launched. 然后推出。

<a class="group2" href="'.$cacheDataPath . $thumbnail.'">

The HTML looks like this: HTML看起来像这样：

<?php
$html = '<html>
    <head>
            <meta charset=\'utf-8\'/>
            <title>Colorbox Examples</title>
            <style>
            </style>
            <link rel="stylesheet" href="/colorbox-master/example1/colorbox.css" />
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script src="/colorbox-master/jquery.colorbox.js"></script>
            <script>
                    $(document).ready(function(){
                            //Examples of how to assign the Colorbox event to elements
                            $(".group3").colorbox({rel:\'group3\', transition:"none", width:"75%", height:"75%"});
                            $(".group2").colorbox({rel:\'group2\', transition:"none", width:"75%", height:"75%"});
                            //Example of preserving a JavaScript event for inline calls.
                            $("#click").click(function(){
                                    $(\'#click\').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                                    return false;
                            });
                    });
            </script>
    </head>

    <body>

            <a class="group3" href="/colorbox-master/content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">TEST</a>
            <p><a class="group3" href="/colorbox-master/content/ohoopee2.jpg" title="On the Ohoopee as a child"></a>TEST</p>
            <p><a class="group3" href="/colorbox-master/content/ohoopee3.jpg" title="On the Ohoopee as an adult"></a></p>
    </body>
</html>';
echo $html;

Can someone tell me how to get this working? 有人可以告诉我如何使它工作吗？ The html is returned correctly, and I can press the TEST url which will launch the portfolio correctly...but I need it to go automatically on the original onclick. html正确返回，我可以按TEST url，它将正确启动投资组合...但是我需要它在原始onclick上自动运行。

Any help is appreciated. 任何帮助表示赞赏。

Answer 1

I'd suggest to first stop wrapping all the HTML within a PHP string. 我建议首先停止将所有HTML封装在PHP字符串中。 It's not necessary. 这不是必需的。

To fix the issue, don't return false; 要解决此问题，请不要return false; in the jQuery #click() method. 在jQuery #click()方法中。

如何使用Ajax和javascript构建图像组合

问题描述

1 个解决方案

解决方案1
0 2014-05-29 02:52:34

如何使用Ajax和javascript构建图像组合

问题描述

1 个解决方案

解决方案1 0 2014-05-29 02:52:34

解决方案1
0 2014-05-29 02:52:34