WordPress.org

Support

Support » Plugins and Hacks » Responsive Colorbox

Responsive Colorbox

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

    Within the file

    lightbox-gallery/js/jquery.colorbox.js

    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) {
        var
        // 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%",

    http://wordpress.org/extend/plugins/lightbox-gallery/

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thanks for that, it was quite easy to change it but why the author put “false” originally? a percentage should be set by default.

    Thanks mate… Works Like Charm….!

    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')) {
    						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>

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

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

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

    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

    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

    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?

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Responsive Colorbox’ is closed to new replies.