13 {{ upvoteCount | shortNum }}
13 {{ upvoteCount | shortNum }}

Scalable/Responsive modal for images?

by WolfShade
11 replies
Hello, all,

New to WF, and here's my first question.

I'm building a site from scratch, the only library that I'm using is jQuery and Skeleton CSS - nothing else, not even a jQuery UI.

I'm looking for a modal for displaying images, preferably something purely CSS, but I'm not opposed to a jQuery modal. But the important thing is that it can scale the images so they look good (and are centered) on all devices, even mobile phones. And the images can be both portrait or landscape.

I look forward to hearing thoughts and ideas from everyone.

V/r,

^_^ WolfShade
#images #modal #scalable or reactive
  • Profile picture of the author robomedia
    I'm not sure if it meets all your requirements but this one is quite good IMO :
    Magnific Popup: Responsive jQuery Lightbox Plugin
    {{ DiscussionBoard.errors[10383595].message }}
  • Profile picture of the author WolfShade
    Thanks for the link, @robomedia. I was hoping to not resort to adding another library, but this does look pretty slick. And small enough (~3k) that I don't think it would bloat the page.

    Anyone else?

    V/r,

    ^_^ WolfShade
    {{ DiscussionBoard.errors[10383689].message }}
  • Profile picture of the author GeneralLedger
    https://github.com/fat/zoom.js this is the one that Medium uses
    {{ DiscussionBoard.errors[10383879].message }}
    • Profile picture of the author WolfShade
      Thanks, @GeneralLedger,

      Github is blocked, where I work, but I'll be sure to check that out as soon as I get home.
      {{ DiscussionBoard.errors[10383927].message }}
      • Profile picture of the author WolfShade
        Someone else suggested this, which looks promising, in case anyone else is looking for the same.

        The downside of it, however, is that it will not work in IE8 or earlier, and even in IE9 it doesn't quite render the buttons very well. IE10 and IE11 look great, as does FF and Chrome. I didn't test it in Safari or Opera or Konqueror (I don't have those browsers.)
        {{ DiscussionBoard.errors[10384017].message }}
      • Profile picture of the author GeneralLedger
        Originally Posted by WolfShade View Post


        Github is blocked, where I work..
        Here is an example, it is very simple but very functional... click the top image in this (or really any) article on medium: https://medium.com/@dtothefp/why-can...l-d0b075db35ed
        {{ DiscussionBoard.errors[10384186].message }}
        • Profile picture of the author WolfShade
          That is pretty slick! I only scanned the text (I'm still at work), but didn't see anything about library size(s). Is it small?
          {{ DiscussionBoard.errors[10385837].message }}
          • Profile picture of the author GeneralLedger
            Originally Posted by WolfShade View Post

            That is pretty slick! I only scanned the text (I'm still at work), but didn't see anything about library size(s). Is it small?

            V/r,

            ^_^ WolfShade
            Sorry, Just saw this now... it is less than 5k minified, imperceptible to include in a website
            {{ DiscussionBoard.errors[10387787].message }}
  • Profile picture of the author Dario2
    I know you said you don't want to use jquery, but this is super easy and powefull Bootbox.js—alert, confirm and flexible modal dialogs for the Bootstrap framework
    {{ DiscussionBoard.errors[10386671].message }}
    • Profile picture of the author WolfShade
      Originally Posted by Dario2 View Post

      I know you said you don't want to use jquery, but this is super easy and powefull Bootbox.js—alert, confirm and flexible modal dialogs for the Bootstrap framework
      Hi, @Dario2,

      Thank you for your input. Please re-read my original post. "the only library that I'm using is jQuery and Skeleton CSS"

      I am using jQuery, but I'd prefer to not use any other libraries, if possible. There are some libraries that are excellent, but I'm a little OCD when it comes to page weight.

      I'll look into your suggestion. If a small single library is required, I'm still interested. However, I'm not familiar with bootstrap, so if it requires something else in addition to the .js you suggest, that might load more library than I'm comfortable with.
      {{ DiscussionBoard.errors[10386941].message }}
      • Profile picture of the author cpusl
        If you are gonna develop a lot you might want to familiarize yourself with bootstrap. Go to Getbootstrap.com and look at the components, css and javascript tab. Very common and extremely useful. Is a standard for quick development of responsive websites that display on all devices. Every developer should at least be familiar with it...
        {{ DiscussionBoard.errors[10387117].message }}

Trending Topics