MyBB Community Forums

Full Version: Open image link and youtube link in modal
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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) {
		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*=''], a[href*='youtube']").each(function(e) {
		var url = $(this).attr('href'),
		regExp = /^.*(\/|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*=''], a[href*='youtube']").click(function(e) {
		src_elem = $(this).attr('data-yt');
		$('<div id="yt_mod" style="display: none; width: initial;"><iframe width="560" height="315" src="//'+ 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:
click in and
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 Smile
Works great!
EXCELLENT, nothing more than that! haha
Works well and is very nice, thanks Smile

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