Lightbox gallery
-
You may put any HTML content in each gallery item and mix content types. In this example lazy-loading of images is enabled for the next image based on move direction. If you wish to add touch-swipe support, check my article on the Smashing Magazine.
+
You may put any HTML content in each gallery item and mix content types. In this example lazy-loading of images is enabled for the next image based on move direction. If you wish to add touch-swipe support, check my article on the Smashing Magazine, or new PhotoSwipe script.
+
+
Keep updated
+
diff --git a/website/site-assets/site.css b/website/site-assets/site.css
index 64ef674e..963eb8a2 100644
--- a/website/site-assets/site.css
+++ b/website/site-assets/site.css
@@ -186,45 +186,46 @@ h2.intro {
}*/
-#magnific_popup_docs {
- display: none;
-}
-.maruku_toc {
+#markdown-toc {
position: fixed;
left: 0;
top: 50px;
padding: 20px 20px;
background: rgba(255, 255, 255, 0.71);
-webkit-backface-visibility:hidden;
+ list-style: none;
}
-.maruku_toc ul {
+#markdown-toc a[href="#magnific-popup-docs"] {
+ display: none;
+}
+#markdown-toc ul {
list-style: none;
}
-.maruku_toc ul ul {
+#markdown-toc ul ul {
display: none;
}
-.maruku_toc:before {
+#markdown-toc:before {
content: 'Table of contents';
font-weight: bold;
display: block;
margin-bottom: 10px;
}
@media all and (max-width: 75em) {
- .maruku_toc {
+ #markdown-toc {
position: static;
padding: 0;
background: none;
}
}
-.maruku_toc a {
+#markdown-toc a {
text-decoration: none;
border-bottom: 1px dotted;
}
-.maruku_toc ul {
+#markdown-toc ul {
margin: 0;
padding: 0;
}
-.maruku_toc .active a{
+#markdown-toc .active a{
text-decoration: none;
color: #666;
}
@@ -299,6 +300,60 @@ content: 'CSS';
}
+#mc_embed_signup {
+ max-width: 350px;
+ padding: 32px;
+ background: #EEE;
+}
+#mc_embed_signup input[type="email"] {
+ border: 1px solid #CCC;
+ border-top: 1px solid #999;
+ padding: 5px;
+ font-size: 18px;
+ width: 200px;
+ margin-right: 10px;
+ height: 25px;
+ transition: all 0.3s ease;
+ -moz-transition: all 0.3s ease;
+ -webkit-transition: all 0.3s ease;
+ border-radius: 2px;
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+}
+#mc_embed_signup input[type="email"]:focus {
+ background-color: #FFF;
+ border: 1px solid #3169B3;
+ box-shadow: #3169B3 0px 0px 5px;
+ -moz-box-shadow: #3169B3 0px 0px 5px;
+ -webkit-box-shadow: #3169B3 0px 0px 5px;
+ outline: none;
+}
+#mc_embed_signup input[type="submit"] {
+ border: 1px solid #3169B3;
+ font-size: 13px;
+ font-weight: bold;
+ color: #FFF;
+ height: auto;
+ padding: 8px 13px;
+ cursor: pointer;
+ background-color: #3169B3;
+ display: inline-block;
+ width: auto;
+ -webkit-appearance: none;
+ border-radius: 2px;
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+ vertical-align: top;
+}
+.embed-form {
+ position: relative;
+}
+#mc_embed_signup p {
+ font-size: 15px;
+ color: #4F4F4F;
+}
+
+
#main-wrapper {
diff --git a/website/documentation.md b/website/documentation.md
index bd799a2e..fc8cb062 100644
--- a/website/documentation.md
+++ b/website/documentation.md
@@ -27,6 +27,9 @@ Here you can find the guide on how to use Magnific Popup. Besides this docs page
Please ask general questions through StackOverflow tagged with `magnific-popup`.
+If you're looking for touch-friendly popup just for images, PhotoSwipe might be a better choice.
+
+
# magnific popup docs
* This will become a table of contents (this text will be scraped).
@@ -1195,3 +1198,16 @@ Improve this documentation page (simply submit commit