Created
February 27, 2026 06:44
-
-
Save inspiralo/cac8727ff9377f6236913deac48ea780 to your computer and use it in GitHub Desktop.
Ez a gist egy könnyű, pluginmentes WordPress [shortcode] megoldást tartalmaz, amely igényes, mobilbarát, lapozható képgalériát hoz létre cikkekben. A kód teljesen önálló, nem használ külső könyvtárakat.
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
| /* -------------------------------------------------------------- | |
| * Cikkek esetén igényes, lapozgatható fotógalléria megvalósítás | |
| * WordPress shortcode formájában. | |
| * | |
| * Használat: | |
| * [image_carousel | |
| * images="url1,url2,url3" | |
| * alts="ALT 1; ALT 2, amiben lehet vessző; ALT 3" | |
| * ] | |
| * | |
| * FONTOS: az ALT-eket pontosvessző (;) választja el! | |
| * -------------------------------------------------------------- */ | |
| if (!function_exists('image_carousel_shortcode_clean')) { | |
| function image_carousel_shortcode_clean( $atts ) { | |
| // Shortcode attribútumok | |
| $atts = shortcode_atts(array( | |
| 'images' => '', | |
| 'alts' => '', | |
| ), $atts, 'image_carousel'); | |
| // Képek feldolgozása (vesszővel elválasztva) | |
| $images = array_filter(array_map('trim', explode(',', $atts['images']))); | |
| // ALT-ek feldolgozása (PONTOSVESSZŐVEL elválasztva!) | |
| $alts = array_map('trim', explode(';', $atts['alts'])); | |
| if (empty($images)) { | |
| return '<p><em>Nincs megadva kép a carouselhez.</em></p>'; | |
| } | |
| // ALT-ek kitöltése, ha kevesebb van | |
| $alts = array_pad($alts, count($images), ''); | |
| // HTML wrapper + gombok | |
| $output = '<div class="carousel-wrapper">'; | |
| $output .= '<button class="carousel-btn prev">◀</button>'; | |
| $output .= '<div class="carousel-track">'; | |
| foreach ($images as $idx => $url) { | |
| $output .= sprintf( | |
| '<div class="carousel-slide"><img src="%s" alt="%s" loading="lazy"></div>', | |
| esc_url($url), | |
| esc_attr($alts[$idx]) | |
| ); | |
| } | |
| $output .= '</div>'; // .carousel-track | |
| $output .= '<button class="carousel-btn next">▶</button>'; | |
| $output .= '</div>'; // .carousel-wrapper | |
| // CSS | |
| $output .= ' | |
| <style> | |
| .carousel-wrapper{ | |
| position:relative; | |
| width:100%; | |
| } | |
| .carousel-track{ | |
| overflow-x:scroll; | |
| overflow-y:hidden; | |
| width:100%; | |
| display:flex; | |
| scroll-snap-type:x mandatory; | |
| scroll-behavior:smooth; | |
| -webkit-overflow-scrolling:touch; | |
| scrollbar-width:none; | |
| } | |
| .carousel-track::-webkit-scrollbar{ display:none; } | |
| .carousel-slide{ | |
| flex:0 0 100%; | |
| scroll-snap-align:start; | |
| } | |
| .carousel-slide img{ | |
| width:100%; | |
| height:auto; | |
| display:block; | |
| } | |
| .carousel-btn{ | |
| position:absolute; | |
| top:50%; | |
| transform:translateY(-50%); | |
| background:none; | |
| border:none; | |
| color:#fff; | |
| font-size:32px; | |
| cursor:pointer; | |
| z-index:50; | |
| padding:0 10px; | |
| text-shadow:0 0 8px rgba(0,0,0,0.6); | |
| } | |
| .carousel-btn.prev{ left:10px; } | |
| .carousel-btn.next{ right:10px; } | |
| </style> | |
| '; | |
| // JS | |
| $output .= ' | |
| <script> | |
| document.addEventListener("DOMContentLoaded", function(){ | |
| const wrapper = document.querySelector(".carousel-wrapper"); | |
| if (!wrapper) return; | |
| const carousel = wrapper.querySelector(".carousel-track"); | |
| const btnPrev = wrapper.querySelector(".carousel-btn.prev"); | |
| const btnNext = wrapper.querySelector(".carousel-btn.next"); | |
| const slides = carousel.querySelectorAll(".carousel-slide"); | |
| const slidesCount = slides.length; | |
| let slideIndex = 0; | |
| function slideWidth(){ | |
| return carousel.offsetWidth; | |
| } | |
| function goTo(idx){ | |
| slideIndex = Math.min(Math.max(idx, 0), slidesCount - 1); | |
| carousel.scrollLeft = slideIndex * slideWidth(); | |
| } | |
| btnPrev.addEventListener("click", ()=>goTo(slideIndex - 1)); | |
| btnNext.addEventListener("click", ()=>goTo(slideIndex + 1)); | |
| let startX = 0; | |
| carousel.addEventListener("touchstart", e=>{ | |
| startX = e.touches[0].clientX; | |
| }); | |
| carousel.addEventListener("touchend", e=>{ | |
| const diff = e.changedTouches[0].clientX - startX; | |
| if (Math.abs(diff) > 50){ | |
| goTo(slideIndex + (diff < 0 ? 1 : -1)); | |
| } | |
| }); | |
| window.addEventListener("resize", ()=>goTo(slideIndex)); | |
| }); | |
| </script> | |
| '; | |
| return $output; | |
| } | |
| } | |
| add_shortcode('image_carousel', 'image_carousel_shortcode_clean'); |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Értelemszerűen egy adott WordPress sablon (theme) functions.php fájljában lehet felhasználni. Nem mindenki használja a WordPress CMS új mániáját a Guttenberg csodát. Vannak olyanok és őszintén mondom megtudom érteni őket, akik a mai napig a klasszikus felületet lehetőségeit használják. A WordPress képgaléria lehetőség szerintem ilyen megoldást nem nyújt. Ha több fotót szeretnél megjeleníteni, de azt szeretnéd, hogy ne foglaljon sok helyet a cikkben, akkor mint praktikum ez a megoldás tetszhet neked.