Magic Icon Darkroom (): Magic JavaScript

Quick Jump ↵

Showing all kinds of content in a pop-up

Initial Setup

Add <link href="/PATH/TO/magic/tricks/darkroom/darkroom..css" rel="stylesheet">
<script type="text/javascript" src="/PATH/TO/magic/tricks/darkroom/darkroom..js" charset="UTF-8"></script>

below your <script type="text/javascript" src="/PATH/TO/magic/wand..js" charset="UTF-8"></script>

Add <script type="text/javascript">$m.trick.darkroom = true;</script> inside your <body> tag.

If you'd like the Darkrooms to be be drag droppable, add <link href="/PATH/TO/magic/tricks/drag_n_drop/drag_n_drop..css" rel="stylesheet">
<script type="text/javascript" src="/PATH/TO/magic/tricks/drag_n_drop/drag_n_drop..js" charset="UTF-8"></script>

below your <script type="text/javascript" src="/PATH/TO/magic/tricks/darkroom/darkroom..js" charset="UTF-8"></script>

and <script type="text/javascript">$m.trick.drag_n_drop.free = true;</script> inside your <body> tag.

Use the examples below as a guide for building your own!

Examples

Dynamic width block

Dynamic width block

Nam ultricies, quam sed dignissim ornare, enim dolor tristique urna, eget convallis diam magna ac sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam non augue sit amet justo fringilla vestibulum at nec nisl. Nullam massa mi, rutrum non accumsan nec, feugiat aliquam ligula. Proin urna magna, tempor ut blandit in, tincidunt vel massa. Donec semper lorem sapien, at interdum mi. Mauris fermentum tempus lorem at congue. Phasellus dignissim congue nisl in mollis. Aliquam sodales auctor vehicula. Phasellus ut tortor nisi. Quisque velit est, vehicula at auctor ut, blandit a est. Ut in augue arcu. Praesent sed malesuada lectus. In ac interdum nunc. Cras est sapien, scelerisque non mattis aliquam, scelerisque sit amet felis. Curabitur non leo diam. Nunc dictum mauris in erat vehicula aliquet. Fusce sed faucibus eros. Morbi turpis libero, sodales eu lobortis auctor, vulputate a purus. Praesent interdum cursus justo.

Ut at massa aliquam libero porttitor vehicula. Vivamus tristique metus velit. Mauris a quam non tortor tempor laoreet eu sit amet lectus. Suspendisse potenti. Quisque vehicula faucibus lacinia. Proin ligula massa, tristique et fermentum sollicitudin, dictum eget enim. Integer fermentum metus quis libero suscipit in semper lorem ornare. Aenean laoreet, justo a commodo bibendum, lorem nisi rutrum massa, quis gravida dui sapien condimentum eros. Curabitur ac erat massa. Donec pretium pharetra ante ac sodales. Phasellus quam turpis, rutrum vel eleifend pretium, malesuada vel purus. Pellentesque in elit vel urna ultrices cursus sit amet ultrices magna. Curabitur eu enim sit amet risus tempor ultrices quis suscipit lectus. Curabitur id ligula lacus, at porttitor leo. Etiam accumsan condimentum metus vel tempus. Nullam eget mauris felis. Cras pulvinar pharetra sodales. Nunc suscipit turpis neque. Vestibulum ut eros eros, vitae congue enim.

Proin eget erat urna. Aenean eu justo id tortor gravida pellentesque non sit amet orci. Integer in massa faucibus turpis rhoncus pretium non sit amet felis. Nam tincidunt cursus augue vel vehicula. In sed arcu quis purus sagittis dignissim. Mauris lacus leo, fermentum nec consequat quis, facilisis ac quam. Nulla facilisi. Proin fringilla leo at lectus ultrices et iaculis dui vestibulum. Pellentesque interdum commodo nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sit amet orci luctus mi hendrerit dapibus.

The width of the content is not set via CSS so it's calculated auto-magically when shown. The height is based on the length of the content.

Fixed width block

Fixed width block

Ut at massa aliquam libero porttitor vehicula. Vivamus tristique metus velit. Mauris a quam non tortor tempor laoreet eu sit amet lectus. Suspendisse potenti. Quisque vehicula faucibus lacinia. Proin ligula massa, tristique et fermentum sollicitudin, dictum eget enim. Integer fermentum metus quis libero suscipit in semper lorem ornare. Aenean laoreet, justo a commodo bibendum, lorem nisi rutrum massa, quis gravida dui sapien condimentum eros. Curabitur ac erat massa. Donec pretium pharetra ante ac sodales. Phasellus quam turpis, rutrum vel eleifend pretium, malesuada vel purus. Pellentesque in elit vel urna ultrices cursus sit amet ultrices magna. Curabitur eu enim sit amet risus tempor ultrices quis suscipit lectus. Curabitur id ligula lacus, at porttitor leo. Etiam accumsan condimentum metus vel tempus. Nullam eget mauris felis. Cras pulvinar pharetra sodales. Nunc suscipit turpis neque. Vestibulum ut eros eros, vitae congue enim.

Nam ultricies, quam sed dignissim ornare, enim dolor tristique urna, eget convallis diam magna ac sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam non augue sit amet justo fringilla vestibulum at nec nisl. Nullam massa mi, rutrum non accumsan nec, feugiat aliquam ligula. Proin urna magna, tempor ut blandit in, tincidunt vel massa. Donec semper lorem sapien, at interdum mi. Mauris fermentum tempus lorem at congue. Phasellus dignissim congue nisl in mollis. Aliquam sodales auctor vehicula. Phasellus ut tortor nisi. Quisque velit est, vehicula at auctor ut, blandit a est. Ut in augue arcu. Praesent sed malesuada lectus. In ac interdum nunc. Cras est sapien, scelerisque non mattis aliquam, scelerisque sit amet felis. Curabitur non leo diam. Nunc dictum mauris in erat vehicula aliquet. Fusce sed faucibus eros. Morbi turpis libero, sodales eu lobortis auctor, vulputate a purus. Praesent interdum cursus justo.

Proin eget erat urna. Aenean eu justo id tortor gravida pellentesque non sit amet orci. Integer in massa faucibus turpis rhoncus pretium non sit amet felis. Nam tincidunt cursus augue vel vehicula. In sed arcu quis purus sagittis dignissim. Mauris lacus leo, fermentum nec consequat quis, facilisis ac quam. Nulla facilisi. Proin fringilla leo at lectus ultrices et iaculis dui vestibulum. Pellentesque interdum commodo nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sit amet orci luctus mi hendrerit dapibus.

The width of the content is set via CSS and therefore respected when shown. The height is based on the length of the content.

450 x 250 block

450 x 250 block

Proin eget erat urna. Aenean eu justo id tortor gravida pellentesque non sit amet orci. Integer in massa faucibus turpis rhoncus pretium non sit amet felis. Nam tincidunt cursus augue vel vehicula. In sed arcu quis purus sagittis dignissim. Mauris lacus leo, fermentum nec consequat quis, facilisis ac quam. Nulla facilisi. Proin fringilla leo at lectus ultrices et iaculis dui vestibulum. Pellentesque interdum commodo nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sit amet orci luctus mi hendrerit dapibus.

Nam ultricies, quam sed dignissim ornare, enim dolor tristique urna, eget convallis diam magna ac sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam non augue sit amet justo fringilla vestibulum at nec nisl. Nullam massa mi, rutrum non accumsan nec, feugiat aliquam ligula. Proin urna magna, tempor ut blandit in, tincidunt vel massa. Donec semper lorem sapien, at interdum mi. Mauris fermentum tempus lorem at congue. Phasellus dignissim congue nisl in mollis. Aliquam sodales auctor vehicula. Phasellus ut tortor nisi. Quisque velit est, vehicula at auctor ut, blandit a est. Ut in augue arcu. Praesent sed malesuada lectus. In ac interdum nunc. Cras est sapien, scelerisque non mattis aliquam, scelerisque sit amet felis. Curabitur non leo diam. Nunc dictum mauris in erat vehicula aliquet. Fusce sed faucibus eros. Morbi turpis libero, sodales eu lobortis auctor, vulputate a purus. Praesent interdum cursus justo.

The width and height of the content is set via the data-mjf_dr_dim attribute.

Block that fills the window

Block that fills the window

Proin eget erat urna. Aenean eu justo id tortor gravida pellentesque non sit amet orci. Integer in massa faucibus turpis rhoncus pretium non sit amet felis. Nam tincidunt cursus augue vel vehicula. In sed arcu quis purus sagittis dignissim. Mauris lacus leo, fermentum nec consequat quis, facilisis ac quam. Nulla facilisi. Proin fringilla leo at lectus ultrices et iaculis dui vestibulum. Pellentesque interdum commodo nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sit amet orci luctus mi hendrerit dapibus.

Nam ultricies, quam sed dignissim ornare, enim dolor tristique urna, eget convallis diam magna ac sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam non augue sit amet justo fringilla vestibulum at nec nisl. Nullam massa mi, rutrum non accumsan nec, feugiat aliquam ligula. Proin urna magna, tempor ut blandit in, tincidunt vel massa. Donec semper lorem sapien, at interdum mi. Mauris fermentum tempus lorem at congue. Phasellus dignissim congue nisl in mollis. Aliquam sodales auctor vehicula. Phasellus ut tortor nisi. Quisque velit est, vehicula at auctor ut, blandit a est. Ut in augue arcu. Praesent sed malesuada lectus. In ac interdum nunc. Cras est sapien, scelerisque non mattis aliquam, scelerisque sit amet felis. Curabitur non leo diam. Nunc dictum mauris in erat vehicula aliquet. Fusce sed faucibus eros. Morbi turpis libero, sodales eu lobortis auctor, vulputate a purus. Praesent interdum cursus justo.

The width and height of the content is set via the data-mjf_dr_dim attribute.

Single image

The href points to the image that will be shown and the title attribute is optional.

400 x 400 iframe

The dimensions of the iframe are set via the data-mjf_dr_dim attribute.

1024 x 768 iframe

In this example the iframe width is 1024 and if the width of the browser window is smaller, the iframe will expand its width only to fill the window.

iframe that fills the window

Using data-mjf_dr_dim="fill" will expand the iframe to cover most of the browser window.

Notes

Add data-mjf_dr_overlay="true" to your clickable tag if you'd like the traditional semi-transparent overlay to appear behind the content.

Add data-mjf_dr_xy="XxY" where X is the number of pixels left and Y is the number of pixels top if you don't want the content to be horizontally and vertically centered. Ex: 0 pixels left and 20 pixels down and 50 pixels left and 200 pixels up. Negative values are okay, too.

0 pixels left and 20 pixels down.

magic_0
data-mjf_dr_xy="0x20"

50 pixels left and 200 pixels up

magic_1
data-mjf_dr_xy="-50x-200"

Add data-mjf_dr_hide="false" to your <form> tag if your Darkroom content contains a form and you'd like to keep the Darkroom content open after submission.

Add data-mjf_dr_form="FORM_ID" if your Darkroom content is in a form and you're also using Form Validation.

Add data-mjf_ga_track="false" if you use Google Analytics and don't want to track the particular click.

Touch-based browsers automatically resize iframes to their full content height so visitors can all of the content.

Change Log

13.5.28

  • The mjf_dr_iframe_dim attribute has been replaced with mjf_dr_dim. The latter attribute can now also be used on any content block. The former still works but is deprecated.
  • Code optimization.

13.3.28

  • Initial animation work.
  • Code optimization.

13.3.26

  • Better language file loading.

12.12.14

  • Fixed iframe resize bugs on touch-based browsers.
  • Fixed the semi-transparent overlay bug where it would calculate its size on every Darkroom click.

12.12.11

  • Removed the animation easing functionality added in 12.10.30 — it was too distracting.
  • Darkrooms are no longer hidden when resizing the window.
  • Darkrooms are now drag-and-drop capable. See instructions in the Initial Setup section above.
  • Darkrooms with iframes will now be hidden when the iframe is focused and the visitor hits the esc key.
  • Bug fixes and code optimization.

12.11.29

  • Fixed IE6/7 resize bugs.

12.11.14

  • Updated default animation speed from 5 to 1.

12.11.12

  • Fixed bug where the semi-transparent overlay wasn't hiding when resizing the window.

12.11.6

  • Better animations.

12.10.30

  • Any Darkroom can now be positioned using data-mjf_dr_xy="XxY". Previously this wasn't possible when setting data-mjf_dr_type="".
  • Updated to use animation easing functionality added in Magic JS 12.10.2.
  • Documentation cleanup.

12.5.3

  • Fixed a bug where Darkroom wouldn't re-initialize itself on AJAX requests.

12.2.24

  • If Darkroom images are larger than the browser dimensions, the image will be scaled to fit.
  • New data-mjf_dr_dim="fill" attribute for iframes.

12.1.31

  • We're now localized! Please see the Introduction tab, Usage section of the Main Documentation and look for the lang : "en_us" property - this is new.

11.12.29

  • Fixed the data-mjf_dr_xy="XxY" positioning bug.
  • Fixed a few height/width bugs for data-mjf_dr_type="image" and data-mjf_dr_type="iframe".
  • Fixed a bug where the Darkroom contents would sometimes fail to hide when clicking the close image.
  • Set a timeout when displaying the data-mjf_dr_type="iframe" content. This should help with the jerk-y-ness.
  • Disabled JavaScript based transitions. Will move to CSS transitions in a future version.

11.11.15

  • When opened, new darkrooms no longer hide the existing ones.

11.11.7

  • Fixed bug where the close image wouldn't work when the content was returned via AJAX.

11.10.28

  • Darkroom can now be trigger by any element and not just a link.
  • For example: instead of using an <a> as noted in the docs above, just apply the same attributes to an <input type="button">.

11.8.10

  • Better preloading of data-mjf_dr_type="image"
  • Fixed height issue.

11.4.29

  • Keyboard shortcut ESC to close all Darkrooms.
  • Migrated to latest MJS code base.
  • Code optimization.

11.3.2

  • Bug fixes

11.2.1

  • Misc code clean up and optimization.

11.1.4

  • New iframe is now only inserted once.

10.12.28

  • New iframe type!

10.10.17

  • Corrected the background image path for the "traditional semi-transparent overlay."
  • Minor, minor tune-up.

10.10.16

  • Made Darkroom it's own trick with all the options you see above!
To Do
  • Add better small screen support.
  • Add the ability to resize Darkrooms.
  • Add support for multiple images.

« Back to the main documentation