使用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同一頁上打開畫廊圖像

回答

相關問題