Solution: Make your Colorbox images responsive

310 Posts
ricco
11 years ago
6
Topic

Hi guys,


I just found a way to make your images responsive if you are using ColorBox.


Place this code in the header of your template's index file:


<script type="text/javascript">
	// Make ColorBox responsive
	jQuery.colorbox.settings.maxWidth  = '95%';
	jQuery.colorbox.settings.maxHeight = '95%';

	// ColorBox resize function
	var resizeTimer;
	function resizeColorBox()
	{
		if (resizeTimer) clearTimeout(resizeTimer);
		resizeTimer = setTimeout(function() {
				if (jQuery('#cboxOverlay').is(':visible')) {
						jQuery.colorbox.load(true);
				}
		}, 300);
	}

	// Resize ColorBox when resizing window or changing mobile device orientation
	jQuery(window).resize(resizeColorBox);
	window.addEventListener("orientationchange", resizeColorBox, false);
</script>


Regards

Ricco

Get a Book for SEBLOD
31 Posts
gzukry
11 years ago
0
Level 1

Thx Ricco ! I found the second part with timer to resize on screen's size change, but not the first part that makes it responsive on load !

Thx a lot ! 

85 Posts
kromoadv
11 years ago
0
Level 1

Thank you Ricco, very helpful.

I put your code in a system plugin so i don't warry about template upgrade.

310 Posts
ricco
10 years ago
3
Level 1
Hi all, how are you?

I don't know if the SEBLOD team can make this default, it's been a few months and updates that I have a list with tasks which I perform after each SEBLOD update, here it is:

1.(This is to make my images responsive) ADD:

//Make ColorBox responsive

jQuery.colorbox.settings.maxWidth = '95%';
jQuery.colorbox.settings.maxHeight = '95%';

// ColorBox resize function
var resizeTimer;
function resizeColorBox()
{
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
if (jQuery('#cboxOverlay').is(':visible')) {
jQuery.colorbox.load(true);
}
}, 300);
}
// Resize ColorBox when resizing window or changing mobile device orientation
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);

In the following file: "media/cck/scripts/jquery-colorbox/js/jquery.colorbox-min.js" after the content of it, on a new row!!!

2. (This is to make my image and link editing window in the backend of SEBLOD bigger so it can show all the options like e.g: New field -> Description -> Link -> *Insert; Help; Cancel* (the last stared options are not visible to me unless I don't make this change) ):

ADD:

#cboxWrapper {
height: 100% !important;
}
#cboxLoadedContent {
height:815px !important;
overflow: visible !important;
}
#cboxLoadedContent iframe {
position: absolute; top: 0;
}


In the file: "media/cck/scripts/jquery-colorbox/css/colorbox.css".
JJL
10 years ago
2
Level 2
Hi again Ricco,
This is my first beginner's question for you :
Why didn't you do it all in css3 instead of jquery ? Is it not supported yet by all browser ? this reducing box function, I mean.
Turn up my light please.
By
310 Posts
ricco
10 years ago
1
Level 3
Hi,

Because I don't know how. Do you?

Respect,
Ricco
JJL
10 years ago
0
Level 4
Hi Ricco,
As I said it was a beginner's question, and I also realize that I didn't know what colorbox was, I thought it was a color picker, my mistake.
But my instinct said why not something like:

.class_of _your_img
{
-webkit(and the others...)-transform : scale();
}
triggered by the size of the client device.
But I think you could learn me something about it,
Regards,
Jo
Get a Book for SEBLOD