Lightbox Gallery
Responsive Colorbox (10 posts)

  1. Pascal Schmolck
    Posted 2 years ago #

    I found out how to make the colorbox JavaScript to behave "responsive". It was quite simple:

    Within the file


    change the values for maxWidth and maxHeight to "100%".

    // ColorBox v1.3.19 - jQuery lightbox plugin
    // (c) 2011 Jack Moore - jacklmoore.com
    // License: http://www.opensource.org/licenses/mit-license.php
    (function ($, document, window) {
        // Default settings object.
        // See http://jacklmoore.com/colorbox for details.
        defaults = {
            transition: "elastic",
            speed: 300,
            width: false,
            initialWidth: "600",
            innerWidth: false,
            maxWidth: "100%",
            height: false,
            initialHeight: "450",
            innerHeight: false,
            maxHeight: "100%",


  2. trouille2
    Posted 2 years ago #

    Thanks for that, it was quite easy to change it but why the author put "false" originally? a percentage should be set by default.

  3. dkumawat3
    Posted 2 years ago #

    Thanks mate... Works Like Charm....!

  4. Nicolas Bernier
    Posted 2 years ago #

    I added the following snippet in my header. It does the same but doesn't require to hack the code of the plugin. It also handles resizing and mobile device orientation change.

    <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')) {
    		}, 300);
    	// Resize ColorBox when resizing window or changing mobile device orientation
    	window.addEventListener("orientationchange", resizeColorBox, false);
  5. offpeakdesign
    Posted 2 years ago #

    Is there a way this can be applied to jquery.lightbox.js?

  6. valedim
    Posted 2 years ago #

    Thank you nicolas.bernier! This is awesome, it helped me a lot!

  7. nvijaya
    Posted 1 year ago #

    Really great code.Helped me a lot.Very much thanks nicolas.bernier......

  8. Bloxxor
    Posted 1 year ago #

    No Coding needed.

    Just go into Lightbox ColorBox Plus settings > Primary Settings > Size and set the maximum width Field to 100%

    works like a charm

  9. PurpleEdge
    Posted 1 year ago #

    Thanks - for dummies like me, don't forget the quotes "100%" and set the lightbox size to 'large' in the settings for Lightbox Gallery.

    In case that you would like to set the default lightbox size:
    thumbnail medium large full

  10. jfarr13
    Posted 1 year ago #

    This doesn't work for me. Changing 'maxWidth' and 'maxHeight' to 100% doesn't work. Setting 100% as the maximum height and width in the plugin settings doesn't work so I'm a bit bewildered.

    I have a responsive image slider that pops up in colorbox. On it's own, the image slider is 100% responsive on my site however as soon as I add it into a colorbox, the size doesn't change/adapt.

    So the issue must be colorbox.

    Anyone got any ideas?

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Lightbox Gallery
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.