Слайд-шоу всех изображений из папки
Раньше мы уже рассматривали такие скрипты как Плавная смена изображений на jQuery и Скрипт выбора случайного изображения из указанных папок.
Теперь мы хотим предложить Вам скрипт, в котором были объединены два рассмотренных ранее скрипта. Сделано это было для того, чтобы не прописывать вручную все необходимые для слайд-шоу изображения, а загружать их автоматически из указанной папки.
Пример работы получившегося скрипта Вы можете наблюдать чуть ниже.
Для того чтобы создать на своем сайте такое же слайд-шоу из изображений, в указанной папке, Вам понадобится подключить библиотеку jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Далее в том месте Вашей странички, где Вы планируете показывать слайд-шоу, добавьте следующий код:
<div style="height: 20px; text-align: center;">
<img src="image/time/colon.gif" alt="" id="slide_show">
</div>Где image/time/colon.gif - URL адрес первого показываемого изображения. Это необходимо для того, чтобы в то время, пока грузится Ваша страничка (и скрипт соответственно тоже), на экране первоначально было изображение.
Как Вы могли заметить, изображение мы разместили внутри блока DIV высотой в 20 пикселей. Это сделано для того, чтобы при смене изображений, когда первое изображение пропало, а второе еще не появилось, не происходило "скачка" содержимого странички вверх. Это происходит из-за того, что в момент пропадания изображение получает свойство display: none; и его высота на короткий промежуток времени становится равной нулю. Из-за этого происходит сдвиг всего контента страницы на размер изображения вверх, а после появления изображения его размер вновь изменяется и контент странички сдвигается вниз.
Теперь Вам остается только разместить наш скрипт смены изображений где-нибудь ближе к концу странички, который найдет все изображения в указанной папке и будет менять их по очереди. Для этого скопируйте данный код:
<script type="text/javascript">
<?php
$images = array();
$folder = 'image/time/';
$array_to_js = 'var imgs=[';
$all_files = scandir($folder);
for ($i=2; $i<=sizeof($all_files)-1; $i++) {
$array_to_js.='"'.$folder.$all_files[$i].'",';
}
echo substr($array_to_js,0,-1).'];';
?>
var n = 0;
var time = 800;
play = setInterval("chgImg()", 3000);
function chgImg() {
$('#slide_show').fadeOut(time, function() {
$(this).attr('src', imgs[n]).fadeIn(time);
});
n++;
if (n>=imgs.length) n = 0;
}
</script>Как видите, сам код действительно получился очень маленьким и не содержит кучи излишних функций. Но при таком небольшом коде есть и свои маленькие минусы. Например, все изображения должны быть в одной папке (подпапки не поддерживаются) и в папке с изображениями не должно быть других файлов.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Подробнее на нашем форуме - http://usefulscript.ru/forum/showthread.php?tid=203
Сколько раз обновлял у себя на сайте страничку, постоянно выходит изображение по списку от A,B....Z...
За ранее благодарен за помощь!
var n = 0;
n++;
if (n>=imgs.length) n = 0;
А строчку $(this).attr('src', imgs[n]).fadeIn(time); замените на:
$(this).attr('src', imgs[Math.floor(Math.random()*(imgs.length-1))+1]).fadeIn(time);
Для того чтобы избавиться от "прыжков" рекомендуем Вам разместить изображение с id="slide_show" внутри какого-нибудь элемента с заданной высотой (например, <div style="height: 50px;">).
P.S. Скрипт в теме немного подкорректировал для устранения данного недостатка.
Чтобы не было конфликтов используйте jQuery.noConflict();, подробнее.
Может подскажите, как его доработать, чтобы появились стрелочки, которые можно перещелкивать для ускоренного перехода между страницами? Заранее спасибо!
<input type="submit" value="Дальше" onclick="chgImg()">
$(document).ready(function() {
$('#slide').cycle({fx:'scrollLeft', speed:1000, timeout:2000});
});
Куда мне его прописать, чтобы он заработал с Вашим скриптом?
P.S. По отдельности они работают, я проверял.
<div id="slide">
<?php
$folder = 'image/';
$all_files = scandir($folder);
for ($i=2; $i<=sizeof($all_files)-1; $i++) echo '<img src="'.$folder.$all_files[$i].'"/>';
?>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#slide').cycle({fx:'scrollLeft', speed:1000, timeout:2000});
});
</script>
1. Подскажите, если картинки из определенной папки разного размера (например, 750х466 и 800х600) будет ли работать скрипт?
2. Как адаптировать скрипт под большие изображения и разного размера?
Заранее благодарю!
Если Вам нужно сделать все изображения одинакового размера, то просто укажите после id="slide_show" требуемый размер (например, width=800).
Если Вам необходимо уменьшить большие изображения до какого-то значения, а меленькие показывать без изменений, то заменить HTML код из темы на такой:
<div style="width: 800px; height: 600px; text-align: center;">
<img style="max-width: 800px; max-height: 600px; src="image/img.png" alt="" id="slide_show">
</div>
И тогда изображения более 800х600 будут отображаться внутри блока DIV с размером 800х600, а более маленькие - такими, какие есть.
Для включения/выключения функции слайд-шоу используйте код:
<input type="submit" value="Запустить" onclick="play=setInterval('chgImg()', 3000)">
<input type="submit" value="Остановить" onclick="clearInterval(play)">
Подскажите, возможно ли вставить в оформление слайдера кнопки Следующая и Предыдущая?
При просмотре исходного кода странички обратите внимание на строчку с переменной imgs. Она должна быть примерно такая: var imgs=["image/time/img0.gif","image/img1.gif","image/img2.gif","image/img3.gif"];
imgs = imgs.sort(function() { return Math.random() - 0.6; });
function chgImg() {
n = n + 3;
if (n>=imgs.length) n = 3;
$('#slide_show').fadeOut(time, function() { $(this).attr('src', imgs[n-2]).fadeIn(time); });
$('#slide_show2').fadeOut(time, function() { $(this).attr('src', imgs[n-1]).fadeIn(time); });
$('#slide_show3').fadeOut(time, function() { $(this).attr('src', imgs[n]).fadeIn(time); });
}
Не находит уже данную категорию. Проблема в относительном пути. Где прописать абсолютный путь к директории? Пытался прописать в переменную $folder="http://site.ru/images". Тогда скрипт не работает. Помогите решить задачку.
$folder = $_SERVER['DOCUMENT_ROOT'].'image/time/';
$folder2 ='http://usefulscript.ru/image/time/';
Далее в строчке: $array_to_js.='"'.$folder.$all_files[$i].'",'; заменяем $folder на $folder2.
Как сделать, чтобы картинки были ссылками, каждая на свою?
Заранее спасибо!
<a href=""><img src="image/time/colon.gif" alt="" id="slide_show"></a>
А в JavaScript коде перед строчкой $(this).attr('src', imgs[n]).fadeIn(time); добавьте строчку:
$(this).parent('a').attr('href', imgs[n]);
Подскажите, пожалуйста, как добавить ваш скрипт на страничку сайта Wordpress? Если просто добавляю в текст страницы, то не работает почему-то.
Спасибо за скрипт! Супер!
А можете еще доработать скрипт, чтобы при клике на картинке, она открывалась в Lightbox? И если на одной странице несколько таких слайд-шоу, берущих картинки из разных папок - то как открыть Lightbox с перелистыванием только из той папки, на картинку из которой я кликнула? Если это возможно, конечно.
Спасибо!
JavaScript код 1 размещен между тегами head.
HTML код размещен в таблице с измененным значением высоты блока и image/time/colon.gif на свой путь к картинке.
JavaScript код 2 размещен сразу следом (хотя пробовала в разные места - эффекта ноль) с измененным $folder = 'image/time/'; вписала свой путь к папке с картинками.
Что-то не там разместила или надо еще где-то поменять код? Хелп!
На странице просто показывается первая картинка и все.
А пока просто отображается первое изображение в папке, ссылка на которое имеется в коде.
Может, проверите? :) (ссылка удалена) картинка в самом низу.
Хостинг php поддерживает, но я туда и не лезу...
Правильно ли мною понимается, что скрипт не работает через dropbox?
"Где image/time/colon.gif - URL адрес первого показываемого изображения. Это необходимо для того чтобы в то время, пока грузится Ваша страничка (и скрипт соответственно тоже), на экране первоначально было изображение."