打開大量圖像到1個html頁面中

我創建了一個html文件，其中包含所有照片和另一個html文件，我只在其中看到1個圖像全尺寸。現在，如果我從第一個文件中單擊一個圖像，我希望使用他的src從第一個文件打開這個第二個html頁面，我想要使用javascript。（是的，我知道我可以創建20個HTML文件，其中每個人都有不同的照片，但我希望只使用1 HTML文件）打開大量圖像到1個html頁面中

文件1 =「的index.html」：

<a href="work_detail.html" ><img src="images/templatemo_image_01_big.jpg" alt="image" 
width="100%" height="100%" id="pic1" onClick="hello();" /></a>

文件2 = 「work_detail.html」：

<a target="_parent"><img src="" alt="product" id="work" /></a>

的JavaScript：

function hello(){ 
    var pic1 = document.getElementById('pic1').src; 
document.getElementById('work').src= pic1; 
}

如何第一ID與第二id其中不乏連接在不同的文件使用JavaScript？

來源

2013-03-11 manuel.koliqi

我能想到的一個選擇是讓第二個頁面以url參數的形式接收圖像的源。 Here是一篇文章，描述如何使用javascript讀取url參數。

之後，使用圖像src並將其設置爲第二個圖像。順便說一句，您需要對網址進行網址編碼。對於編碼使用encodeURIComponent這樣的：

str = encodeURIComponent(imageSource);

您解碼在接收頁面decodeURIComponent這樣的：

str = decodeURIComponent(uri_encode);

來源

2013-03-11 19:21:20

它看起來太複雜了，我認爲不是我要找的 – 2013-03-11 23:15:28

考慮PHP。

在PHP它會像

頁面將顯示完整的圖像作爲

<?php 
$src= isset($_GET['src']) ? $_GET['src'] : "default_image_url.ext"; 
$alt= isset($_GET['alt']) ? $_GET['alt'] : "default_alt"; 
echo "<img src='$src' alt='$alt'>";

現在，主要的Javascript網頁上，添加它

function GtU(url, alt){ 
window.location.href="second_page.php?src="+url+"&alt="+alt; 
}

，並在每img標籤添加這個，< img src =「source」alt =「alt」onclick =「GtU（this.src，this.alt）」>其實更好的方法......只是需要一點點的服務器端。它也可以用餅乾來完成，但它會使手變髒

來源

2013-03-11 19:37:37 Ronnie

不工作：\t

– 2013-03-11 23:13:20

因爲您的元素在帖子表單下並且PHP腳本收到GET ..此外，在GtU被開除之前，A會獲得優先權並加載該文件 – Ronnie 2013-03-12 04:33:27

已更新的帖子... – Ronnie 2013-03-12 04:34:04

打開大量圖像到1個html頁面中

回答

相關問題