[For 1.8] Open image link and youtube link in modal

[martec]

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-p...#pid325350
click in

 https://www.youtube.com/watch?v=9Fiwc79_N9c and https://i.imgur.com/xhLyWcm.jpg

to see result.

[mikeh]

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.

[tetsu]

Thank you very much
Works great!

[eNvy]

EXCELLENT, nothing more than that! haha

[Oxygen]

Works well and is very nice, thanks

[SeeD]

Superb!

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

[dthiago]

Works - http://bf4brasil.com.br/t%C3%B3pico-mybb...-mybb.html