Trick # 526 | Dieser Beitrag beinhaltet 1136 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.
Das Galerie-Modul des Divi-Themes lässt sich recht einfach mit einem «Load More»-Button ergänzen. Wie das funktioniert, zeigen wir Ihnen im heutigen Trick.
So wie nebenan zeigt sich das Galerie-Modul im Divi-Theme normalerweise:
Diesem fügen wir nun einen «Load More»-Button hinzu.
Dazu fügen Sie erst ein Galerie-Modul an der gewünschten Stelle Ihrer Website ein. Befüllen Sie es mit den gewünschten Bildern. Vergewissern Sie sich ausserdem, dass unter «Elemente» (im Tab «Inhalt» die Paginierung deaktiviert ist.
Danach wechseln Sie auf den Tab «Erweitert» und geben unter «CSS-ID und Klassen» die CSS-Klasse «gallery-load-more» im Textfeld «CSS-Klasse» ein.
Nun fügen Sie noch ein Button-Modul unter dem Galerie-Modul ein. Vergeben Sie ihm einen Schaltflächen-Text – etwa «Load more» oder etwas ähnliches.
Danach wechseln Sie auch im Button-Modul auf den Tab «Erweitert» und geben unter «CSS-ID und Klassen» im Feld «CSS-ID» (Vorsicht: NICHT CSS-Klasse) «gallery_load_more» ein.
Nun kommt ein Block jQuery. Dieser kommt entweder in ein Code-Modul auf der Seite mit dem Galeriemodul oder aber in den <head>-Bereich Ihrer Website, welchen Sie unter Divi/Theme-Optionen/Integration bearbeiten können:
<script>
jQuery(document).ready(function(){
//For mobile Screens
if (window.matchMedia('(max-width: 767px)').matches) {
var initial_show_images = 2;
var images_reveal = 2;
jQuery(".gallery-load-more .et_pb_gallery_item").not( ":nth-child(-n+"+initial_show_images+")" ).css("display","none");
jQuery("#gallery_load_more").on("click", function(event){
event.preventDefault();
initial_show_images = initial_show_images + images_reveal;
jQuery(".gallery-load-more .et_pb_gallery_item").css("display","block");
jQuery(".gallery-load-more .et_pb_gallery_item").not( ":nth-child(-n+"+initial_show_images+")" ).css("display","none");
var images_num = jQuery(".gallery-load-more .et_pb_gallery_item").not('[style*="display: block"]').length
if(images_num == 0){
jQuery(this).css("display","none");
}
})
} else {
//For desktop Screens
var initial_row_show = 4;
var row_reveal = 4;
var total_images = jQuery(".gallery-load-more .et_pb_gallery_item").length;
jQuery(".gallery-load-more .et_pb_gallery_item").not( ":nth-child(-n+"+initial_row_show+")" ).css("display","none");
jQuery("#gallery_load_more").on("click", function(event){
event.preventDefault();
initial_row_show = initial_row_show + row_reveal;
jQuery(".gallery-load-more .et_pb_gallery_item").css("display","block");
jQuery(".gallery-load-more .et_pb_gallery_item").not( ":nth-child(-n+"+initial_row_show+")" ).css("display","none");
var images_num = jQuery(".gallery-load-more .et_pb_gallery_item").not('[style*="display: block"]').length
if(images_num == 0){
jQuery(this).css("display","none");
}
})
}
})
</script>Nun noch ein kleines CSS-Snippet. Dieses fügen Sie in das CSS-Stylesheet (unter Design/Customizer/Zusätzliches CSS ein:
@media all and (max-width:980px) and (min-width: 767px) {
.gallery-load-more .et_pb_gallery_item:nth-child(3n) {
margin-right: 0 !important;
}
}
@media all and (min-width:981px) {
.gallery-load-more .et_pb_gallery_item:nth-child(4n) {
margin-right: 0 !important;
}
}So, das war’s.
Das Galerie-Modul und der Button präsentieren sich nun so wie nebenan:
Werbung
Werbung
