WordPress.org

Ready to get started?Download WordPress

Forums

Lightbox Gallery
Responsive Colorbox (10 posts)

  1. Pascal Schmolck
    Member
    Posted 1 year ago #

    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/

  2. trouille2
    Member
    Posted 1 year 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
    Member
    Posted 1 year ago #

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

  4. Nicolas Bernier
    Member
    Posted 1 year 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')) {
    						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>
  5. offpeakdesign
    Member
    Posted 1 year ago #

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

  6. valedim
    Member
    Posted 1 year ago #

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

  7. nvijaya
    Member
    Posted 10 months ago #

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

  8. Bloxxor
    Member
    Posted 9 months 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
    Member
    Posted 8 months 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
    Member
    Posted 7 months 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

About this Topic

Tags

No tags yet.