Tôi có thanh trượt (flexslider) mà tôi đang sử dụng để hiển thị hình ảnh trong biểu mẫu được hiển thị bên dưới jsfiddle ... Tôi đã tối ưu hóa thanh trượt để nó trích xuất hình ảnh (được đặt tên bằng số, ví dụ: 12364, 50046) động từ một thư mục nhất định dựa trên tên của nó.Trích xuất hình thu nhỏ trong PHP
JSFIDDLE: https://jsfiddle.net/atkumqpk/1/
Mã để trích xuất hình ảnh:
<?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>
</div>
Bây giờ vấn đề là khi tôi đã có thanh trượt ban đầu (trước khi tối ưu hóa nó) Tôi kết nối nó vào "Fancybox" để hiển thị hình thu nhỏ và hình ảnh ẩn. Tuy nhiên bây giờ tôi không có ý tưởng về cách kết nối nó với những hình ảnh đang được trích xuất bằng cách sử dụng php.
Mã của Fancybox. JSFIDDLE: http://jsfiddle.net/ny9ytae5/2/
Trường hợp: bên trong hình ảnh thư mục (tôi đang trích xuất hình ảnh) tôi có hình ảnh được đặt tên bằng số (ví dụ: 54236) và cho mỗi hình ảnh một thư mục tương đương có cùng tên (ví dụ: : đối với hình ảnh 54236 có một thư mục 54236). Nội dung của thư mục 54236 là hình thu nhỏ cần được kết nối với hình ảnh 54236.
Tôi được thông báo bởi thành viên stackoverflow "JFK" mà tôi có thể thực hiện việc này: "$slide_images[$filename] = "<img src='{$filename}' alt='{$filename}' />"; có thể được thay đổi thành $slide_images[$filename] = "<a class='fancybox' data-fancybox-group='thumb1' href='{$filename}'><img src='{$filename}' alt='{$filename}' /></a>"; ... chỉ vấn đề là bạn sẽ được sử dụng các hình ảnh tương tự như hình ảnh thu nhỏ, mà sẽ được bổ sung thêm một nguyên cần thiết để pageload bạn "
Và đề nghị sử dụng hướng dẫn này:. http://www.picssel.com/create-a-filtered-image-gallery-with-jquery-and-fancybox-part-2-create-image-thumbnails-with-php/
Tuy nhiên tôi không thể làm cho nó làm việc. Bất kỳ trợ giúp nào?
Có bất kỳ lý do nào mà câu trả lời của oliverpool không ' t làm việc? Có vẻ như nó sẽ sử dụng hình thu nhỏ một cách chính xác làm hiển thị với liên kết đến hình ảnh gốc. –