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

Приветствую Вас дамы и господа[url=http://vika-service.by/]![/url] Наша компания занимается свыше 10 лет ремонтом и обслуживанием оргтехники в городе Минске.Основные направления и виды нашей деятельности:

1)[url=http://vika-service.by/]Заправка и восстановление картриджей[/url]

2)[url=http://vika-service.by/]Ремонт и сервис оргтехники[/url]

3)[url=http://vika-service.by/]Ремонт и настройка компьютеров и ноутбуков[/url]

4)[url=http://vika-service.by/]SEO продвижение сайтов[/url]

5)[url=http://vika-service.by/]Разработка сайтов[/url] Всегда рады помочь Вам!С уважением,ЧУП ТЕХНОСЕРВИС ВИКТОРИЯ.

http://new-kino.net/user/Servicerzg/ http://forum.parfenov.ru/index.php?action=profile;u=5503 http://yourtao.kz/index/8-587 http://alawar.multmir.ru/user/Serviceqfb/ http://fast-press-news.ru/index/8-1696

 Comment Form Moderated


Add A Page Review

Add A Rating: 
Please Agree to Our Terms and Conditions  *