Permalink
Browse files

Use icon-only buttons on device widths <= 480px.

  • Loading branch information...
1 parent 7aaed1c commit 6aa9a3d1bf7455f01c8e57dca25e754e9fbee388 @blueimp committed Mar 8, 2012
Showing with 34 additions and 15 deletions.
  1. +7 −1 css/bootstrap-image-gallery.css
  2. +1 −0 css/bootstrap-image-gallery.min.css
  3. +26 −14 index.html
@@ -1,6 +1,6 @@
@charset 'UTF-8';
/*
- * Bootstrap Image Gallery CSS 2.1
+ * Bootstrap Image Gallery CSS 2.3
* https://github.com/blueimp/Bootstrap-Image-Gallery
*
* Copyright 2011, Sebastian Tschan
@@ -93,3 +93,9 @@
.modal-fullscreen .modal-footer:hover {
opacity: 1;
}
+
+@media (max-width: 480px) {
+ .modal-gallery .btn span {
+ display: none;
+ }
+}
@@ -13,3 +13,4 @@
.modal-fullscreen .modal-footer{top:auto;bottom:0;}
.modal-fullscreen .close,.modal-fullscreen .modal-title{color:#fff;text-shadow:0 0 2px rgba(33, 33, 33, 0.8);}
.modal-fullscreen .modal-header:hover,.modal-fullscreen .modal-footer:hover{opacity:1;}
+@media (max-width:480px){.modal-gallery .btn span{display:none;}}
View
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<!--
/*
- * Bootstrap Image Gallery 2.2
+ * Bootstrap Image Gallery 2.3
* https://github.com/blueimp/Bootstrap-Image-Gallery
*
* Copyright 2011, Sebastian Tschan
@@ -78,19 +78,31 @@
</header>
<div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery"></div>
<br>
- <!-- modal-gallery is the modal dialog used for the image gallery -->
- <div id="modal-gallery" class="modal modal-gallery hide fade">
- <div class="modal-header">
- <a class="close" data-dismiss="modal">&times;</a>
- <h3 class="modal-title"></h3>
- </div>
- <div class="modal-body"><div class="modal-image"></div></div>
- <div class="modal-footer">
- <a class="btn btn-primary modal-next">Next <i class="icon-arrow-right icon-white"></i></a>
- <a class="btn btn-info modal-prev"><i class="icon-arrow-left icon-white"></i> Previous</a>
- <a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000"><i class="icon-play icon-white"></i> Slideshow</a>
- <a class="btn modal-download" target="_blank"><i class="icon-download"></i> Download</a>
- </div>
+</div>
+<!-- modal-gallery is the modal dialog used for the image gallery -->
+<div id="modal-gallery" class="modal modal-gallery hide fade">
+ <div class="modal-header">
+ <a class="close" data-dismiss="modal">&times;</a>
+ <h3 class="modal-title"></h3>
+ </div>
+ <div class="modal-body"><div class="modal-image"></div></div>
+ <div class="modal-footer">
+ <a class="btn btn-primary modal-next">
+ <span>Next</span>
+ <i class="icon-arrow-right icon-white"></i>
+ </a>
+ <a class="btn btn-info modal-prev">
+ <i class="icon-arrow-left icon-white"></i>
+ <span>Previous</span>
+ </a>
+ <a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000">
+ <i class="icon-play icon-white"></i>
+ <span>Slideshow</span>
+ </a>
+ <a class="btn modal-download" target="_blank">
+ <i class="icon-download"></i>
+ <span>Download</span>
+ </a>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

0 comments on commit 6aa9a3d

Please sign in to comment.