У меня есть слайдер (flexslider), который я использую для отображения изображений в форме, показанной ниже в jsfiddle … Я оптимизировал слайдер так, чтобы он извлекал изображения (которые названы с использованием чисел, например: 12364, 50046) динамически из определенный каталог, основанный на его именах.
JSFIDDLE: https://jsfiddle.net/atkumqpk/1/
Код для извлечения изображений:
<?php function get_slide_images($folder, $images_per_slide = 10, $starts_with = '') { $slide_images = false; // valid extensions $extensions = array( "jpg", "gif", "jpeg", "svg", "png", "bmp", "JPG" ); // Implode the extensions array into a string: $extensions = implode(',', $extensions); if (file_exists($folder)) { // Get all the files with a valid extension in $folder: // (optionally filtered by $starts_with) foreach (glob($folder.'/{'.$starts_with.'}*.{'.$extensions.'}', GLOB_BRACE) as $filename) { $slide_images[$filename] = "<img src='{$filename}' alt='{$filename}' />"; } if (!empty($slide_images)) { ksort($slide_images); $slide_images = array_chunk($slide_images, $images_per_slide); } } return $slide_images; } ?> <div id="logo" class="logo" ><img src="logo.png"/></div> <p class="custom-class"><a href="">Go to the main website</a></p> <div id="menu" class="menu"> <ul class="headlines"> <li id="item1"> <button>aaaaaaaa</button> </li> <li id="item2"> <button>bbbbbbb</button> </li> <li id="item3"> <button>ccccccc</button> </li> <li id="item4"> <button>dddddddd</button> </li> <li id="item5"> <button>eeeeeee eee.</button> </li> <li id="item6"> <button>ffffff</button> </li> <li id="item7"> <button>ggggggg</button> </li> </ul> </div> <div id="container"> <div id="first" class="inner-container"> <div id="item11" class="item"> <a name="item11"></a> <div class="flexslider"> <ul class="slides"> <?php $slider_kvp = get_slide_images("images", 10, "1"); /** * Here we are going to generate the SLIDES */ if($slider_kvp) { $slider_list_html = array(); foreach($slider_kvp as $slider_key => $slide_images) { $html_LI_list = ""; $html_LI_list = "<li>"; // Go through each image ... foreach($slide_images as $image_key => $image_value) { $html_LI_list .= $image_value; } $html_LI_list .= "</li>"; $slider_list_html[$slider_key] = $html_LI_list; } // OUR SLIDES! $rendered_slider_list_html = implode(' ', $slider_list_html); echo "<ul class='slides'>{$rendered_slider_list_html}</ul>"; } ?> </ul> </div> </div> </div> Теперь проблема в том, что когда у меня был оригинальный слайдер (перед его оптимизацией), я подключил его к «fancybox» для отображения миниатюр и скрытых изображений. Однако теперь я не знаю, как подключить его к изображениям, которые извлекаются с помощью php.
Код Fancybox. JSFIDDLE: http://jsfiddle.net/ny9ytae5/2/
Случай: внутри изображений каталога (из которых я извлекаю изображения) у меня есть изображения, имена которых указаны в числах (например: 54236), и для каждого изображения эквивалентная папка с тем же именем (например: для изображения 54236 есть папка 54236). Содержимое папки 54236 – это миниатюры, которые необходимо подключить к изображению 54236. Любая помощь?
Вы должны отредактировать свой php-код, где вы создаете hmtl для изображений для кода ниже:
$slide_images[$filename] = '<a class="fancybox" data-fancybox-group="slide-N">'; $slide_images[$filename] .= "<img src='{$filename}' alt='{$filename}' />"; $slide_images[$filename] .= '</a>';
Таким образом, вы получите точную разметку, необходимую для fancybox, но вы должны установить fancybox-data-group равным для всех изображений на одном слайде (замените «slide-N» на ваш фактический «слайд-1» и т. Д.), когда fancybox покажет большие пальцы для изображений на вашем текущем слайде. Вот пример jsfiddle, который вы получите после него.