Ogre Codes

Follow @ogre_codes to get notified when new articles are posted to this site.

👨🏻‍💻

Pop Up Images 👨🏻‍💻

Jul 10, 2017 at 9:48 AM

Over the past week I spent a lot of time out enjoying some of my favorite Oregon trails so I hadn’t gotten a chance to finish up the Javascript for pop up images on the blog until yesterday. I’ve done more sophisticated pop-up galleries in the past, but I wanted to keep things simple at this stage. For the moment the app just includes some bone simple jQuery which falls back to a link. To accomplish this, there is a div which covers the whole page and toggle on and off. The div has three images of varying sizes for different screen sizes. The browser’s media query handles the heavy lifting of choosing correct size image to display.

The least code to get the job done

$(".pop-image").on("click", function() {
  if ($(".pop-image-overlay:visible").length>0) {
    $(".pop-image-overlay").hide();
  } else {
    $(this).find(".pop-image-overlay").show();
  }
  return false;
})

The result is a bit more HTML for the various image sizes, but it makes for far simpler Javascript and allows for graceful degradation in the event Javascript is broken or disabled. It also preserves the theme of lightning fast, lightweight pages. I do plan on adding more sophisticated animations and paging later, but right now I’m still pushing to get this app to the “Minimum Viable Product” stage and these animations are low priority.

What I’m a bit more excited about is the new editing tools and Babelfish translator I built to the editor to handle translating from plain text to NSAttributedString to HTML!