Last active
January 28, 2024 00:16
-
-
Save liranop/c7148746a53a2815c4dca63993e91fc2 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| .custom-gallery .jet-engine-gallery-grid__item-wrap.is-lightbox::before { | |
| display: none | |
| } | |
| .custom-gallery .jet-engine-gallery-grid { | |
| display: grid; | |
| grid-template-columns: repeat(var(--columns), 1fr); | |
| } | |
| .custom-gallery .jet-engine-gallery-grid__item { | |
| max-width: 100%; | |
| } | |
| .custom-gallery .jet-engine-gallery-grid__item-img { | |
| height: 100%!important; | |
| aspect-ratio: 1; | |
| } | |
| .custom-gallery .jet-engine-gallery-grid__item:nth-child(3) ~ .jet-engine-gallery-grid__item { | |
| display: none | |
| } | |
| .custom-gallery .jet-engine-gallery-grid__item:nth-child(3) .jet-engine-gallery-item-wrap:after { | |
| background: rgba(0,0,0,0.5)!important; | |
| } | |
| .jet-engine-gallery-grid__item .elementor-widget-container { | |
| text-align: center; | |
| position: absolute; | |
| top:50%; | |
| left:50%; | |
| transform: translate(-50%, -50%); | |
| width: max-content; | |
| max-width: 100%; | |
| padding: 20px; | |
| z-index: 1 | |
| } | |
| .jet-engine-gallery-grid__item .elementor-widget-container p { | |
| color: white; | |
| margin-top: 20px; | |
| font-size: 60%; | |
| font-weight: bold | |
| } | |
| .jet-engine-gallery-grid__item .elementor-widget-container .elementor-icon svg { | |
| fill: white; | |
| margin: auto | |
| } | |
This file contains hidden or 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
| <script> | |
| jQuery(document).ready(function() { | |
| // Customizable prefix and suffix | |
| var counter_prefix = "See all"; | |
| var counter_suffix = "photos"; | |
| // Task 1: Count items | |
| var countA = jQuery('.custom-gallery .jet-engine-gallery-grid__item').length; | |
| // Task 2: Clone and modify the hidden HTML | |
| var moreHtml = jQuery('.icon').clone(); | |
| moreHtml.find('.elementor-icon svg').after('<p>' + counter_prefix + ' ' + countA + ' ' + counter_suffix + '</p>'); | |
| // Task 3: Append the modified HTML | |
| jQuery('.custom-gallery .jet-engine-gallery-grid__item:nth-child(3) img').after(moreHtml.html()); | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This code create this kind of gallery with "dynamic field" widget of crocoblock (JetEngine)
First make sure you activated the "Grid Gallery for Dynamic Field widget" on JetEngine dashbord.
Then follow those steps in your page/template:
1.1) give it css class: custom-gallery (in advanced tab)
1.2) in style tab > Misc:
1.2.1) set image overlay color to: rgba(0, 0, 0, 0.15)
1.2.2) set image hover overlay color to: rgba(0, 0, 0, 0.5)
add "icon" widget after your gallery.
2.1) give it css class: icon (in advanced tab)
2.2) select your icon
3.3) hide the icon from all screen sizes (in advanced tab > responsive)
add html widget after your icon
3.1) paste the script in content tab
3.2) paste the css in advanced tab > custom css