Question

谢谢大家的答案，您的信息对未来非常有用并且学习如何构建。但是，当我们进行新手编码时，我的问题很难解决。

我在我的（购买）脚本上有这个功能。该脚本不带图像库，所以部件到多个上传图像到商店ID图像文件夹是好的，我做到了。但是带有船舶信息（小弹出窗口）的脚本全部是我已经添加的javascript，所以我将显示原始脚本和我的新手愚蠢变化的脚本。也许你的专业知识可以帮助我解决这个疯狂问题xD再次感谢大家！

原创（仅显示商店信息的部分以及我想添加图片库按钮的位置）：

function info_window_content(v) {

    var info_window_string = "<div class='maps_popup'>";

    if(v.img != '') {
        info_window_string += "<img class='img' src='"+v.img+"' alt='"+v.name+"' /></a>";
    }

     var splitaddress = "";
     saddress = v.address.split(" ");
     for(i=0;i<saddress.length;i++){
        splitaddress += saddress[i]+" ";
         if(i==4){
          splitaddress += "<br>";
         }
     }

    info_window_string += "<h1>"+v.name+"</h1><p>"+splitaddress+"</p>";

    if(v.telephone != '') {
        info_window_string += "<p class='tel'>"+v.titletel+": "+v.telephone+"</p>";
    }
    if(v.email != '') {
        info_window_string += "<p class='email'>"+v.titleemail+": <a href='mailto:"+v.email+"'>"+v.email+"</a></p>";
    }

    if(v.website != '') {

        if(v.website.substring(0, 4)!="http"){
        info_window_string += "<p class='web'>"+v.titlewebsite+": <a href='http://"+v.website+"' target='new'>http://"+v.website+"</a></p>";
        } else {
            info_window_string += "<p class='web'>"+v.titlewebsite+": <a href='"+v.website+"' target='new'>"+v.website+"</a></p>";
        }
    }

    if(v.description != '') {
        info_window_string += "<p class='description'>"+v.description+"</p>";
    }


    if(v.cat_img != '') {
        info_window_string += "<div class='products'><img src='"+v.cat_img+"' style='max-width:15px; max-height:15px;' /> "+v.cat_name+"</div>";
    }

    if(v.email != ''){
      info_window_string += "<span class='email'><center><a href='mailto:"+v.email+"' class='contact-clinic button blue-button' style='display:block;"+
                      "padding:5px 10px;"+
                      "margin-top:10px;"+ 
                      "margin-bottom:10px;"+
                      "margin-left:3px;"+
                      "border:1px solid #8b8b8b;"+
                      "text-align: center;"+
                      "font-weight:bold;"+
                      "width:190px;'>"+v.titlecontactstore+"</a></center></span>";


    }

    info_window_string += "<a href='javascript:streetView("+v.lat+","+v.lng+");'>Street view</a> | <a href='javascript:zoomHere("+v.lat+","+v.lng+");'>Zoom here</a> | <a href='javascript:direction(\""+v.address+"\","+v.lat+","+v.lng+");'>Directions</a>";
    info_window_string += "</div>";

return info_window_string;
}

function gallery(){
                api_gallery=['images/fullscreen/1.JPG','images/fullscreen/2.jpg','images/fullscreen/3.JPG'];
                api_titles=['API Call Image 1','API Call Image 2','API Call Image 3'];
                api_descriptions=['Description 1','Description 2','Description 3'];
}
function streetView(lat,lng){

           // street view
           street = new google.maps.StreetViewPanorama(document.getElementById("map_canvas"), { 

            position: new google.maps.LatLng(lat, lng),
            zoomControl: false,
            enableCloseButton: true,
            addressControl: false,
            panControl: true,
            linksControl: true
          });

}

function zoomHere(lat,lng){

    map.setZoom(15);
    var currentLatLng = new google.maps.LatLng(lat, lng);
    map.setCenter(currentLatLng);

}


function direction(dest,lat,lng){

     $('#direction').show();
     $('#results').hide();
     $('#dest-direction').val(dest);


    $('#direction-form').submit(function() {

     var ori = $('#origin-direction').val();

        map.setZoom(7);
        var currentLatLng = new google.maps.LatLng(lat, lng);
        map.setCenter(currentLatLng);

            var directionsRenderer = new google.maps.DirectionsRenderer();
            directionsRenderer.setMap(map);    
            directionsRenderer.setPanel(document.getElementById('direction'));

            var directionsService = new google.maps.DirectionsService();
            var request = {
              origin: ori, 
              destination: dest,
              travelMode: google.maps.DirectionsTravelMode.DRIVING,
              unitSystem: google.maps.DirectionsUnitSystem.METRIC
            };
            directionsService.route(request, function(response, status) {
              if (status == google.maps.DirectionsStatus.OK) {
                directionsRenderer.setDirections(response);
              } else {
                //alert('Error: ' + status);
                $('#direction').append('<table width="100%"><tr><td>Direction not found. Please try again.</td></tr></table>');
              } 
            });

      $('#direction-form').nextAll().remove();
      return false;

    });

}

function directionBack(){

     $('#direction').hide();
     $('#results').show();
     resetDirection();
}

function resetDirection(){
    gmap_location_lookup($('#address').val(),'200','');
     $('#direction').html('');
     $('#direction').html('<form method="post" id="direction-form"><p><table><tr><td>Origin:</td><td><input id="origin-direction" name="origin-direction" class="orides-txt" type=text /></td></tr><tr><td>Destination:</td><td><input id="dest-direction" name="dest-direction" class="orides-txt" type=text readonly /></td></tr></table><div id="get-dir-button" class="get-dir-button"><input type=submit id="get-direction" class="btn" value="Get Direction"> <a href="javascript:directionBack()">Back</a></div></p></form>');
    var origin_autocomplete = new google.maps.places.Autocomplete($("#origin-direction")[0], {});
}

在功能info_window_content（v）之前我添加了这段代码：

             function Show(ident) {
            var gallery = document.getElementById("gallery"); // The DIV element

            xmlhttp = new XMLHttpRequest(); // AJAX magic
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    // Put the images in the DIV
                    gallery.innerHTML = xmlhttp.responseText;
                }
            }

            // Call the PHP file to load the images
            xmlhttp.open("GET", "image.gallery.php?id=" + ident, true);
            xmlhttp.send();
        }

然后我添加了一个这样的按钮：

info_window_string += "<center><button onclick='Show(1)' id='Btn1' type='button' class='contact-clinic button blue-button'> Image Gallery</button><br><br></center>";

我还创建了主文件夹

上的"image.gallery.php"

对不起那次重大的考验，非常感谢你。

Answer 1

目前，问题仍然不明确，但我会做出一些假设：

您需要一个按钮，点击该按钮即可打开新页面。
新页面将显示该文件夹中的所有图像
您不需要服务器目录列表，而是需要显示图像的实际HTML页面。
querystring参数是一个可接受的解决方案（与url重写处理器相对）。
安全对您来说不是问题。
最后，带有图像的目录将成为用户正在查看的当前页面的子目录。

如果是这种情况，您需要一个PHP脚本来处理请求列出图像的文件夹。我们来调用那个页面，imageList.php。

# imageList.php (do not include this line in the file)
<html><head><title>Image List</title></head><body>
<?php
$directoryName = $_GET['dir'];
foreach(scandir($directoryName) as $f) {
    $ext = pathinfo($f, PATHINFO_EXTENSION);
    if ($ext == 'png' || $ext == 'jpg' || $ext == 'gif') {
        echo '<img src="' . $directoryName . '/' . $f . '" alt="" />';
    }
} ?>
</body></html>

然后您的链接将是这样的：

<a href="imageList.php?dir=dirName" target="_blank">Click this to see the images</a>

我提到安全性的原因是因为这会将您的应用程序打开，直到有人放入他们想要的任何目录。

如果您想要更安全的东西，您应该考虑使用服务器端处理的ID系统来无形地从中提取目录图像。

http_rewrite处理器也会更漂亮一点，但这是一个比这个问题更广泛的主题。

希望有所帮助，如果您需要我缩小范围，请随时发表评论。

Answer 2

要制作图像厨房，您需要：

标准名称为
AJAX
DIV元素
PHP加载图片

HTML将在Javascript（AJAX）中有一个函数来调用PHP文件，获取PHP文件的结果，并将其放在DIV元素中。

这并不困难：

首先是HTML：

<html>

<body>
    <center>

        <script>
            function Show(ident) {
                var gallery = document.getElementById("gallery"); // The DIV element

                xmlhttp = new XMLHttpRequest(); // AJAX magic
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        // Put the images in the DIV
                        gallery.innerHTML = xmlhttp.responseText;
                    }
                }

                // Call the PHP file to load the images
                xmlhttp.open("GET", "image.gallery.php?id=" + ident, true);
                xmlhttp.send();
            }
        </script>

        <button onclick="Show(1)" id="Btn1" type="button"> Gallery 1 </button>
        <button onclick="Show(2)" id="Btn2" type="button"> Gallery 2 </button>
        <hr>
        <div id="gallery"> </div>

    </center>
</body>

</html>

第二个PHP：

将其命名为"image.gallery.php"，下面的脚本使用名为1.jpg, 2.jpg, ...的图片保存在名为store-1, store-2, ...

<?php

    // get the ID from the xmlhttp.open call
    $id = $_GET["id"];

    // You will need a way to know the amount of images in each folder
    if ($id == 1) { $quant = 5; }
    if ($id == 2) { $quant = 4; }

    // show the images
    for($cont=0; $cont<$quant; $cont++)
    {
        echo " <img src=\"store-".$id ."/".$cont.".jpg\" border=1 /> ";
    }

?>

Javascript，按钮按文件夹ID

2 个答案: