Mobile Colorbox

Mobile First Colorbox

Mobile First Responsive Colorbox Window to open a link, div, code, about anything. Including a iframe using external data.

Using the provided code works with, Jquery 3.3.2 and Bootstrap 4 beta 3.

Colorbox if you have not used it was created by Jack Moore

I created a colorbox window for ASP.Net Core 2 app. On most Phone and Tablets, no matter the orientation Colorbox was way to small about 40% of the view.

On orientation change it flickered and tried to change sizes several times.

I searched around and found similar posts and came up with a small addition to the Initialization of colorbox.

Colorbox now is working perfect on my Android and some other phone’s I have tried. It now makes the colorbox windows 90% of the view on a normal website, and 90% on mobile.

I am building Mobile First sites now and it way to easy with Core 2 framework, with a Mobile First Agency Theme based on Bootstrap 4 beta 3 using colorbox for some internal views. Click to open the Page Code block or anything in a Colorbox Window

To use the Colorbox window by clicking a link that uses a class as class=”inline” and link it to the div with href=”#profiles”

<a class="inline" href="#profiles" title="Colorbox">Click to open in a Colorbox Window.</a>

Hide Content in a hidden div class=”hidden”

The css for hidden

.hidden{display:none}

The link is to a div with id=”profiles” Add Colorbox Content in the div with profiles

The Inline Code for inline code

$(".inline").colorbox({
    inline: !0,
    width: '100%',
    rel: 'proflex'
});
$('.inline_content').on('click', function() {
    $.fn.colorbox.prev()
});
$('.inline_content').on('click', function() {
    $.fn.colorbox.next()
});

Below is the changed javascript with additions highlighted.

The Javascript

  $(".group1").colorbox({
    rel: "group1"
  });
  $(".group2").colorbox({
    rel: "group2",
    transition: "fade"
  });
  $(".group3").colorbox({
    rel: "group3",
    transition: "none",
    width: "80%",
    height: "80%"
  });
  $(".group4").colorbox({
    rel: "group4",
    slideshow: true
  });
  $(".ajax").colorbox();
  $(".youtube").colorbox({
    iframe: true,
    innerWidth: 640,
    innerHeight: 390
  });
  $(".vimeo").colorbox({
    iframe: true,
    innerWidth: 500,
    innerHeight: 409
  });
  $(".iframe").colorbox({
    iframe: true,
    width: "80%",
    height: "80%"
  });
  $(".inline").colorbox({
    inline: true,
    width: "80%"
  });
  $(".callbacks").colorbox({
    onOpen: function () {
      alert("onOpen: colorbox is about to open");
    },
    onLoad: function () {
      alert("onLoad: colorbox has started to load the targeted content");
    },
    onComplete: function () {
      alert("onComplete: colorbox has displayed the loaded content");
    },
    onCleanup: function () {
      alert("onCleanup: colorbox has begun the close process");
    },
    onClosed: function () {
      alert("onClosed: colorbox has completely closed");
    }
  });
  $(".non-retina").colorbox({
    rel: "group5",
    transition: "none"
  });
  $(".retina").colorbox({
    rel: "group5",
    transition: "none",
    retinaImage: true,
    retinaUrl: true
  });
  $("#click").click(function () {
    $("#click").css({
      "background-color": "#f00",
      color: "#fff",
      cursor: "inherit"
    }).text("Open this window again and this message will still be here.");
    return false;
  });
  var resizeTimer;
  //Mobile Resize Function
  function resizeColorBox() {
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function () {
      if (jQuery("#cboxOverlay").is(":visible")) jQuery.colorbox.resize({
        width: "90%",
        height: "90%"
      });
    }, 300);
  }
  jQuery(window).resize(resizeColorBox);
  window.addEventListener("orientationchange", resizeColorBox, false);

 2 Comments

 Comment Form

Notify me of replies by email, Subscribe

Item Reviewed
jekyll-image-gallery
Dated: 
Rating:
Title: Jekyll Image Gallery
Message
Adding comments and reviews per page for google positioning. Someone need to try it out
Item Reviewed
home
Dated: 
Rating:
Title: Home
Message
Hi, My name is Randy and I was looking at a few different sites online and came across your site donboulton.com. I must say - ...
Item Reviewed
drag-drop-no-spambots
Dated: 
Rating:
Title: No Spam
Message
Posted this with drag and drop submit button defeating spambots. No more honeypots or captchas - recaptcha.
Item Reviewed
defrag-sql
Dated: 
Rating:
Title: Defrag SQL
Message
This is an old post but still relevant to SQL 2016. Some updates will be forthcoming in the near future for SQL Server 2018.

Add A Page Review

Add A Rating: