我如何使用ajax和javascript来构建一个图像组合

How do I use ajax and javascript to build an image portfolio

本文关键字：一个 组合 图像 构建 何使用 ajax javascript      更新时间：2023-09-26

我正试图通过按缩略图启动图像组合。在用户按下缩略图之前，构建投资组合的代码不会运行。

我基本上试图实现一个这些到我的网站。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);
  });

}

从这里需要发生的是创建一个url，看起来像这样。它是在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 url，这将正确启动投资组合…但是我需要它在原来的onclick上自动运行

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

要解决这个问题，在jQuery的#click()方法中不要使用return false;

相关文章：