310 Posts
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>Ricco
31 Posts
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
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
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:
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".
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!!!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);
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".
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
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
10 years ago
1
Level 3
Hi,
Because I don't know how. Do you?
Respect,
Ricco
Because I don't know how. Do you?
Respect,
Ricco
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
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
