-2

I am trying to customize a html template. which is

https://html5up.net/ethereal

it has a gallery with modal. i want to add a simple link and some text in that modal. but i am unable to do so.

can any one please help me.

Thank You

smehsan
  • 243
  • 1
  • 10

1 Answers1

1

Follow these steps : each gallery image add caption and link data like this :

<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>

in the main.js find this line 

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

and below this add these line:

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

then find this line 

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

and after this add(caption and link)

if(caption!=undefined){
$modalImg.before('<div class="caption"><a href="'+capurl+'">'+caption+'</a></div>');
}
Balwant
  • 745
  • 1
  • 7
  • 13
  • WOW, amazing, thank you. one more thing, can i separate the caption and link. i mean caption will be text and link will be icon. Thank you. – smehsan Oct 21 '17 at 19:58
  • yes you can do this by changing this snippet : if(caption!=undefined){ $modalImg.before('

    '+caption+'

    icon url
    '); }     – Balwant Oct 21 '17 at 20:04