-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Removed columns display (col-*) and adopted flex display Media manager changed from default to JCE Removed the index.html files Moved the image caption from modal footer to modal body in order to avoid javascript errors Changed the way to include the helper functions from "require_once" to "JLoader::register" Call bootstrap.framework in order to load script file after the bootstrap and jquery files Removed screen size limitation from javascript file Add focus on carousel control next when call modal
- Loading branch information
1 parent
55d4c4b
commit a5465ed
Showing
18 changed files
with
526 additions
and
492 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,17 @@ | ||
| # Módulo B3 Gallery | ||
| Bootstrap 3 Gallery Module is a module for Joomla 3.6+ which displays a gallery of images and a modal carousel. | ||
| # B3 Gallery Module | ||
| **B3 Gallery Module is a module for Joomla 3.6+ which displays a gallery of images and a modal carousel.** | ||
|
|
||
| This is compatible with Bootstrap 3.x and 4.x | ||
|
|
||
| The gallery items width should be set on your template css file. Example (SASS): | ||
| ``` | ||
| .b3Gallery-item { | ||
| flex-basis: calc(50% - 1rem); | ||
| @media (min-width: 768px) { | ||
| flex-basis: calc(100% / 3 - 1rem); | ||
| } | ||
| @media (min-width: 992px) { | ||
| flex-basis: calc(25% - 1rem); | ||
| } | ||
| } | ||
| ``` |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| .b3Gallery { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| margin-left: -1rem; | ||
|
|
||
| /*** Gallery ***/ | ||
| .b3Gallery-item { | ||
| margin-bottom: 1rem; | ||
| margin-left: 1rem; | ||
|
|
||
| a { | ||
| display: block; | ||
|
|
||
| img { | ||
| width: 100%; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /*** Carousel ***/ | ||
| .modal-dialog { | ||
| max-width: calc(100% - 1rem); | ||
|
|
||
| .modal-body { | ||
| background: url('../images/load.gif') center center no-repeat; | ||
|
|
||
| .carousel-inner { | ||
| figure { | ||
| margin-bottom: 0; | ||
|
|
||
| img { | ||
| display: block; | ||
| margin: 0 auto; | ||
| max-width: 100%; | ||
| height: auto; | ||
| } | ||
|
|
||
| figcaption { | ||
| display: flex; | ||
| flex-wrap: nowrap; | ||
| justify-content: flex-end; | ||
| align-items: flex-start; | ||
| background-color: #fff; | ||
|
|
||
| .caption, | ||
| .counter { | ||
| padding-top: 1rem; | ||
| } | ||
|
|
||
| .caption { | ||
| flex-basis: 100%; | ||
| } | ||
|
|
||
| .counter { | ||
| flex: 0 0 100px; | ||
| text-align: right; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &.b3 { | ||
| margin-bottom: 1rem; | ||
|
|
||
| .modal-dialog { | ||
| margin-right: auto; | ||
| margin-left: auto; | ||
|
|
||
| .modal-header { | ||
| display: flex; | ||
| align-items: flex-start; | ||
| justify-content: space-between; | ||
| padding: 1rem; | ||
| border-bottom: 1px solid #e9ecef; | ||
| border-top-left-radius: 0.3rem; | ||
| border-top-right-radius: 0.3rem; | ||
|
|
||
| .modal-title { | ||
| flex: 1; | ||
| } | ||
|
|
||
| .close { | ||
| padding: 1rem; | ||
| margin: -1rem -1rem -1rem auto; | ||
| } | ||
| } | ||
|
|
||
| .modal-body { | ||
| .carousel-fade { | ||
| .carousel-control { | ||
| z-index: 2; | ||
| } | ||
|
|
||
| .carousel-inner { | ||
| .item, | ||
| .active.left, | ||
| .active.right { | ||
| opacity: 0; | ||
| visibility: hidden; | ||
| transition-property: visibility, opacity; | ||
| transition-delay: 1000ms; | ||
| } | ||
|
|
||
| .active, | ||
| .next.left, | ||
| .prev.right { | ||
| opacity: 1; | ||
| visibility: visible; | ||
| } | ||
|
|
||
| .next, | ||
| .prev, | ||
| .active.left, | ||
| .active.right { | ||
| left: 0; | ||
| -webkit-transform: translate(0, 0); | ||
| transform: translate(0, 0); | ||
| } | ||
|
|
||
| .item img { | ||
| margin: auto; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.