MyBB Community Forums

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.

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.

Thank you very much
Works great!

EXCELLENT, nothing more than that! haha

Works well and is very nice, thanks

Superb!

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

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