2017-10-21 115 views
-2

我想自定義一個html模板。 這是如何添加標題和鏈接到圖片庫模式?

https://html5up.net/ethereal

它與模態畫廊。 我想在該模式中添加一個簡單的鏈接和一些文本。 但我無法這樣做。

任何人都可以幫助我。

謝謝

+1

你試過到目前爲止什麼代碼後? – Niladri

+0

你能提供你想要展示的截圖嗎? – Balwant

+0

這裏是html和js https://gist.github.com/ehsanatwork/21551df982dfb2d35cd1797c7a8f5f4b – smehsan

回答

1

遵循以下步驟: 每家畫廊的圖像添加標題和鏈接數據是這樣的:

<a href="images/gallery/fulls/01.jpg" class="image filtered span-3" data-position="bottom" data-url="addlink" data-caption="addcaption"><img src="images/gallery/thumbs/01.jpg" alt=""></a> 

在main.js找到這一行

$modalImg = $modal.find('img'), 
href = $a.attr('href'); 

及以下這添加這些行:

var caption = $a.data('caption'); 
var capurl = $a.data('url'); 
$modal.find('.caption').remove(); 

然後找到這一行

$modalImg.attr('src', href); 

與此插件(標題和鏈接)

if(caption!=undefined){ 
$modalImg.before('<div class="caption"><a href="'+capurl+'">'+caption+'</a></div>'); 
} 
+0

哇,太好了,謝謝。 還有一件事, 我可以分開標題和鏈接。 我的意思是說明文字和鏈接將是圖標。 謝謝。 – smehsan

+0

是的,你可以通過改變這個代碼來實現: if(caption!= undefined){0} } – Balwant