MyBB Community Forums
[For 1.8] Open image link and youtube link in modal - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: [For 1.8] Open image link and youtube link in modal (/thread-160840.html)

Open image link and youtube link in modal - martec - 2014-10-06

1 - create new file in extra.js using Notepad++

1.1 - Put code below in extra.js
$(document).ready(function() {
	$("a[href*='.jpg'], a[href*='.gif'], a[href*='.png']").each(function(e) {
		$(this).attr('data-link', $(this).attr('href'));
	});
	$("a[href*='.jpg'], a[href*='.gif'], a[href*='.png']").click(function(e) {
		e.preventDefault();
		src_elem = $(this).attr('data-link');
		src_val = $(this).text();
		$('<div id="image_mod" style="display: none; width: initial;"><table><tr><th>'+ src_val +'</th></tr><tr><td><img src="'+ src_elem +'"/></td></tr></table></div>').appendTo('body');
		$(this).attr({'href':'#image_mod', 'rel':'modal:open'});
	});

	$("a[href*='youtu.be'], a[href*='youtube']").each(function(e) {
		var url = $(this).attr('href'),
		regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/,
		match = url.match(regExp);
		if (match&&match[2].length==11){
			url = match[2];
		}
		else {
			url = url.replace(/^[^v]+v.(.{11}).*/,"$1");
		}
		$(this).attr('data-yt', url);
	});
	$("a[href*='youtu.be'], a[href*='youtube']").click(function(e) {
		e.preventDefault();
		src_elem = $(this).attr('data-yt');
		$('<div id="yt_mod" style="display: none; width: initial;"><iframe width="560" height="315" src="//www.youtube.com/embed/'+ src_elem +'?html5=1&autoplay=1" frameborder="0" allowfullscreen ></iframe></div>').appendTo('body');
		$(this).attr({'href':'#yt_mod', 'rel':'modal:open'});
	});
});

2 - In headerinclude template

2.1 - find
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.plugins.min.js?ver=1800"></script>

2.2 - add below
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/extra.js"></script>

it´s all

Demo in my forum: https://forum.minnasuki.com/thread-403-post-325350.html#pid325350
click in 
 https://www.youtube.com/watch?v=9Fiwc79_N9c and https://i.imgur.com/xhLyWcm.jpg
to see result.

RE: Open image link and youtube link in modal - mikeh - 2014-10-06

Neat. I think another handy tool would be to move your mouse onto an image's link and the image opens in a modal box like in this tutorial but without actually clicking.

RE: Open image link and youtube link in modal - tetsu - 2014-10-07

Thank you very much Smile
Works great!

RE: Open image link and youtube link in modal - eNvy - 2014-10-07

EXCELLENT, nothing more than that! haha

RE: Open image link and youtube link in modal - Oxygen - 2014-10-09

Works well and is very nice, thanks Smile

RE: Open image link and youtube link in modal - SeeD - 2014-10-14

Superb!

BTW, what should I do if I wanted to extend this to support unlinked <img> as well?

RE: Open image link and youtube link in modal - dthiago - 2014-10-15

Works - http://bf4brasil.com.br/t%C3%B3pico-mybb-plugins-para-o-mybb-aumente-o-poder-do-mybb.html