使用PHP和Ajax同一页上打开画廊图像

PHP和AJAX代码：使用PHP和Ajax同一页上打开画廊图像

<div id = "galleryContainer"></div>

var linkArray = document.getElementByTagName('a'); 

for (var i = 0; i > linkArray.length; i++) 
{ 
    if (linkArray[i].getAttribute('class') == 'myLinks') 
    { 
     linkArray[i].onclick = function() 
     { 
      var url = (this.href); 

      var xmlhttp; 

      if (window.XMLHttpRequest) 
      { 
       xmlhttp = new XMLHttpRequest(); 
      } 
      else 
      { 
       xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP"); 
      } 

      xmlhttp.onreadystatechange = function() 
      { 
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
       { 
        document.getElementById ("galleryContainer").innerHTML = xmlhttp.responseText; 
       } 
      } 

      xmlhttp.open ("GET", "stubs/storage.php?theurl="+url, true); 
      xmlhttp.send() 

      return (false); 

     } 
    } 
}

目前我在本地主机上测试这一点，什么情况是我的链接显示在我的HTML中。单击时，能正常打开，但是URL更改图像

http://localhost/images/gallery/image-name.extension.

而且为了回到页面的实际位置，你从字面上有打后退按钮。我试图让链接直接在HTML链接所在的地方显示图片。

我想调用另一个名为storage.php的文件，但它似乎没有工作。我尝试使用警报，甚至使用另一个文件，但它不会打开它。到目前为止，我不相信链接文件的错误位置存在问题，而是我调用该文件时出现问题。我使用W3示例中的一小段代码。

像往常一样，我做了我的研究，并试图遵循其他人想在新窗口中打开某些东西的计算器示例，并试图将其逆向工程到我的代码中，但它不起作用。我对Ajax相当陌生，所以任何帮助将不胜感激。

来源

2013-04-21 Time

使用灯箱点击图片url – 2013-04-21 07:01:32

不要重新发明轮子。使用灯箱，fancybox等... ...只要在谷歌搜索。 – bestprogrammerintheworld 2013-04-21 07:03:01

是不是都使用jquery制作lightbox和fancybox？如果我不需要，我宁愿不使用Jquery。 – Time 2013-04-21 07:08:35

如果您只需要在页面上的一个图像。我建议做galleryContainer图像：

<img src="" id="galleryContainer" />

以此为JS：

for (var i = 0; i > linkArray.length; i++) 
{ 
    if (linkArray[i].getAttribute('class') == 'myLinks') 
    { 
     linkArray[i].onclick = function() 
     { 
      var url = (this.href); 

      document.getElementById('galleryContainer').src = url; 
      return false; 
     } 
    } 
}

图像将重新加载每次它的源改变时，我觉得达到你想达到的效果。

也就是说，正如在评论fancybox中提到的人可能更有可能是你想要达到的目标，所以这可能是值得研究的。

来源

2013-04-21 07:05:56 Aeolun

非常感谢！有效。问题是我正在使用getElementByTag，而我本应该使用getElementsByTag。我也用过你的方法，而不是我最初使用的方法，因为它非常简约，实际上我正在做的。 – Time 2013-04-21 08:04:36

使用PHP和Ajax同一页上打开画廊图像

回答

相关问题