This question is answered.


Permlink Replies: 6 - Pages: 1 - Last Post: 16-Jan-2020 11:07 Last Post By: ming666 Threads: [ Previous | Next ]
ming666

Posts: 18
Registered: 27-Aug-2019
adding magnific popup javascript, not working
Posted: 15-Jan-2020 11:58
 
  Click to reply to this thread Reply
Hi
I'm trying to get the above to work in my album.
The idea being that it's an album of photos of paintings, each has a description which might be quite long.
In the comments section I want to put a link to the description using magnific popup so that the description pops up on top of the page in a transparent window. you can still see the photo whilst reading the description.

I have added the script to the site- custom code - head and body sections and when the pages are generated they have the correct code added to them (exactly the same as other pages on the site where this works just fine)
However when clicking the link it just opens a new browser window.

example where it doesn't work:
http://www.e-yaji.com/temp/test/index.html#img=AK19.1.jpg

example where it works outside of jalbum:
http://www.e-yaji.com/AK-paintings/zoom%20images/AK19.1.asp

any help would be much appreciated
Laza

Posts: 2,287
Registered: 6-Sep-2005
Re: adding magnific popup javascript, not working
Posted: 15-Jan-2020 13:13   in response to: ming666 in response to: ming666
Correct
  Click to reply to this thread Reply
I guess it's because this plugin was designed for static content. So it adds the functionality to links only that visible during page load. There are 2 options you can use natively in Tiger:

1. Using the "tooltip" plugin. In this case add the content as "data-tooltip" attribute:
<a href="javascript:void" data-tooltip="The HTML code goes here... (quotes and new line characters need to be replaced!)">more details...</a>

The skin will automatically create a tooltip on mouse over.

2. Using the "modal" plugin. A bit more complicated. Use this code in the "Tiger / Site / Custom code / CSS" box:
.lightbox .lightbox-caption .caption .imginfo { display: none; } 
.modal .window { background-color: rgba(0,0,0,0.5); }


This code in the "Javascript" box:
handleClick = function(e) { 		
	$('.lightbox').modal($('.lightbox .lightbox-caption .caption .imginfo').clone()); 
	return false; 
};


Add the captions this way:
<a class="icon-info btn" onclick="handleClick()">more details</a>
<div class="imginfo">
<p><strong>Whoosh</strong><br>
Ink and water-colours on cloud dragon paper<br>
19 x 182.4 cm<br>
January 2019<br>
With three seals of the artist, 水松石山房 <em>Shuisongshi shanfang</em> (&lsquo;Water, Pine and Stone Retreat&rsquo;), 竹虛老人 <em>Zhuxu laoren</em> (&lsquo;Old man as Empty Inside as Bamboo), and 山外山樵 <em>Shanwai shanqiao</em> (&lsquo;The mountain woodcutter who is not in the mountains&rsquo;).</p>
<p><strong>Inscription:</strong><br>
Inscribed for Jana by the Master of the Water, Pine and Stone Retreat as a gift for the New Year in January 2019.</p>
</div>


3. However if you have already created all these external HTML files it's easier just adding them through IFRAME's:

Add this code in the "Tiger / Site / Custom code / CSS" box:
.modal .window { background-color: rgba(0,0,0,0.5); } 
.modal .window iframe { width: 100%; height: 300px; border: none; }

This to the "Javascript" box:
showInfo = function(e) { 
	var link = $('.lightbox .lightbox-caption .caption a.showinfo').data('href'); 
	$('.lightbox').modal($('<iframe src="' + link + '">')); 
	return false; 
}

And add captions this way:
<a onclick="showInfo()" data-href="//www.e-yaji.com/temp/test/inscriptions/AK19.1.html" class="icon-info showinfo">more info</a>


Note, the texts in your HTML files are black which will not be readable on dark background. You might want to modify the CSS file belongs to your HTML files.

Edited by: Laza on 16-Jan-2020 10:41
Fixing missing function call in A tags.
ming666

Posts: 18
Registered: 27-Aug-2019
Re: adding magnific popup javascript, not working
Posted: 15-Jan-2020 15:40   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
Thank you for the swift reply

Now.. I can't find the plugins!

Can you point me at them please?
Laza

Posts: 2,287
Registered: 6-Sep-2005
Re: adding magnific popup javascript, not working
Posted: 15-Jan-2020 17:25   in response to: ming666 in response to: ming666
 
  Click to reply to this thread Reply
These plugins are loaded with the skin - they are used by the album.
ming666

Posts: 18
Registered: 27-Aug-2019
Re: adding magnific popup javascript, not working
Posted: 16-Jan-2020 10:20   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
Ah! Thanks

OK I've tried all three options
the tool tip one works but not very well, if there is a lot of text. It runs off the page and there's no scroll option. It's also not wide enough to look good.
http://www.e-yaji.com/temp/test-2/#img=AK19.1.jpg

The modal plug in doesn't seem to work. The link is there but doesn't do anything

http://www.e-yaji.com/temp/test-3/index.html#img=AK19.1.jpg

and the same for the IFrame option

http://www.e-yaji.com/temp/test-4/index.html#img=AK19.1.jpg
Laza

Posts: 2,287
Registered: 6-Sep-2005
Re: adding magnific popup javascript, not working
Posted: 16-Jan-2020 10:43   in response to: ming666 in response to: ming666
Helpful
  Click to reply to this thread Reply
Sorry, I forgot to add one important detail. In case 2 add this to the A tag:
onclick="handleClick()"

In case 3 add this:
onclick="showInfo()"

This calls the javascript function on click event. I've fixed the code samples above too.
ming666

Posts: 18
Registered: 27-Aug-2019
Re: adding magnific popup javascript, not working
Posted: 16-Jan-2020 11:07   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
Great. thanks very much. I think the modal plugin is going to look the best. I will go and tinker!
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums