Question

我正在尝试通过按缩略图来启动图像组合。构建投资组合的代码在用户按下缩略图之前不会运行。这就是我所拥有的。

我基本上尝试将这些实现到我的网站中。 http://www.jacklmoore.com/colorbox/example1/

工作流程是： 1.显示投资组合列表，其中包含缩略图 2.选择缩略图后，将构建并显示投资组合。

下面的代码可以正常工作。选择缩略图后，投资组合即可启动，一切正常。这是通过循环测试的，并在每次加载页面时执行。

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

为了在选择时构建投资组合（而不是每次加载页面时）我正在使用它正在运行。

<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);
  });

}

从这里需要发生的是创建一个看起来像这样的网址。它是在php脚本中生成的。然后推出。

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

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;

有人可以告诉我如何让这个工作吗？ html正确返回，我可以按下TEST网址，这将正确启动产品组合......但我需要它自动在原始onclick上。

感谢任何帮助。

Answer 1

我建议先停止在PHP字符串中包装所有HTML。没有必要。

要解决此问题，请不要使用jQuery return false;方法#click()。

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

1 个答案: