Сделать выпадающий список html с фото примеры
Выпадающий список с фото, по аналогии с select в html, только с фото! Как сделать select с фото !? Пример/примеры!
Выдающий список с фотографиями
- Что такое выпадающий список с фото!?
- Создание скрипта с выпадающим фото в списке
- Код в сборе выпадающего списка с фото
- Выпадающий список с фото ->
пример №1 - Выпадающий список с фото ->
пример №2 - Выпадающий список с фото на отдельной странице
- P.S.
- Скачать
Что такое выпадающий список с фото!?
В один из дней мне потребовался выпадающий список html с фото, но увы! В выпадающий html список фото поставить не представляется возможным!
Ничего вразумительного я тогда не нашел! Поэтому пошел своим путем! Разберемся с алгоритмом!
Алгоритм выпадающего списка с картинками
Создание скрипта с выпадающим фото в списке
.
Проверяем на
После того, как вы нажимаете по второй картинки, адрес из любой второй картинки передается в первую! Все просто!
<script>
document.addEventListener("click", function(issrc)
{
if (issrc.target.id =="click_img1")
{
if(blockImg1.style.display == "block")
{
blockImg1.style.display = "none";
}
else
{
blockImg1.style.display = "block";
}
}
if (issrc.target.className =="click_img1")
{
click_img1.src = document.querySelector("#"+issrc.target.id).src;
blockImg1.style.display = "none";
}
});
</script>
Код в сборе выпадающего списка с фото
Соберем весь код вместе для выпадающего списка с фото!
<style>#blockImg1{display:none;position:absolute;margin:-50px 0 0 -75px;}#click_img1,.click_img1{cursor:pointer;}</style>
<img src="https://dwweb.ru/__a-data/__comments+arhiv/1.3/blocks/ava_hand_no_foto.png" alt="ava_hand_no_foto.png" id="click_img1">
<div id="blockImg1">
<div><img class="click_img1" id="src" src="https://dwweb.ru/__a-data/__comments+arhiv/1.3/blocks/ava_cherep_i_kosti.png" ></div>
<div><img class="click_img1" id="src1" src="https://dwweb.ru/__a-data/__comments+arhiv/1.3/blocks/ava_circle.png"></div>
<div><img class="click_img1" id="src2" src="https://dwweb.ru/__a-data/__comments+arhiv/1.3/blocks/ava_danger.png"></div>
<div><img class="click_img1" id="src3" src="https://dwweb.ru/__a-data/__comments+arhiv/1.3/blocks/ava_eda.png"></div>
</div>
<script>
document.addEventListener("click", function(issrc)
{
if (issrc.target.id =="click_img1")
{
if(blockImg1.style.display == "block")
{
blockImg1.style.display = "none";
}
else
{
blockImg1.style.display = "block";
}
}
if (issrc.target.className =="click_img1")
{
click_img1.src = document.querySelector("#"+issrc.target.id).src;
blockImg1.style.display = "none";
}
});
</script>
Выпадающий список с фото -> пример №1
Это пример того, как будет выглядеть выпадающий список фото!
Ну и собственно, чего мы и добивались! Вы можете спросить - зачем такое и где это может использоваться!?
Мы как-то делали собственное комментирование, там мы этот код и использовали! -> см. здесьЭто был простой пример, как это можно сделать, без php!
Выпадающий список с фото -> пример №2
Чем отличается первый вариант выпадающего списка с фото от второго!?
В первом варианте, картинки выведены статичным html - это я сделал специально для примера!
Естественно, что так я не буду делать если у меня есть php!
Мы как-то несколько раз касались тем scandir и в том числе вывод из папкиМы тоже самое сделаем для фоток!...
Что нужно сделать!? Создать папку, прописать её в месте. где ссылка от корневой... например:
Все остальное аналогично первому варианту...
<?
$dir_img = ' путь от корневой';
$domen = $_SERVER["HTTP_X_FORWARDED_PROTO"].'://'.$_SERVER["HTTP_HOST"];
$dir_http = $domen . $dir_img;
$array_from_dir = scandir($_SERVER['DOCUMENT_ROOT']. $dir_img);
$block = '<img src="'.$dir_http.'ava_hand_no_foto.png" alt="ava_hand_no_foto.png" id="click_img">
<div id="blockImg">';
for ($i=0; $i < count($array_from_dir) ; $i++)
{
if(substr_count($array_from_dir[$i] , 'ava_'))// фильтруем по наличию ava_
{
$block .= '<div>
<img class="click_img" id="id'.$z++.'" src="'.$dir_http. $array_from_dir[$i].'">
</div>';
}
}
$block .= '</div>';
?>
Стили:
Скрипт:
<script>
document.addEventListener("click", function(ismg)
{
if (ismg.target.id =="click_img")
{
if(blockImg.style.display == "block")
{
blockImg.style.display = "none";
}
else
{
blockImg.style.display = "block";
}
}
if (ismg.target.className =="click_img")
{
click_img.src = document.querySelector("#"+ismg.target.id).src;
blockImg.style.display = "none";
}
});
</script>
Результат вывод списка фото, из папки в виде списка php + Js
Пример на отдельной странице
Пример сделал отдельно для того, чтобы никакие стили, скрипты, и всякая другая хрень на наш скрипт не действовали! Плюс этот же вариант в архиве!
+ В примере сделано отдельной строкой вывод автоматического пути от корневой!
Если скрипт находится в той же папке, что и фотки, то путь прописывать не нужно!
Если нет, то строкуP.S.
Страница была полностью переписана(20.01.2020) и сделаны новые примеры!
А старый текст и скрипт невозможно было понять!
Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже:
