感谢大家的回答，你们的信息对未来和学习如何构建非常有用。但我的问题是，但很难解决，当我们非常新手编码。
我有这个功能在我的(购买)脚本。该脚本没有自带图片库，所以多上传图像到Shop 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"非常抱歉，再次感谢大家。
目前，这个问题还不清楚，但我将做一些假设:
- 你想要一个按钮，当点击将打开一个新的页面。 新页面将显示该文件夹中的所有图像
- 你不需要一个服务器目录列表，而是一个实际的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处理器也会更漂亮一点，但这是一个比这个问题更广泛的主题。
希望这对你有帮助，如果你需要我缩小范围，请随时评论。
要做一个图片画廊，你需要:
- 标准名称 的图像文件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 /> ";
}
?>