phpjsJqueryhtmlcssblog

Сделать выпадающий список с фото примеры

Выпадающий список с фото, по аналогии с select в html, только с фото! Как сделать select с фото !? Пример/примеры!

Выдающий список с фотографиями

1. Что такое выпадающий список с фото!?
2. Создание скрипта с выпадающим фото в списке
3. Код в сборе выпадающего списка с фото
4. Выпадающий список с фото -> пример №1
5. Выпадающий список с фото -> пример №2
6. Выпадающий список с фото на отдельной странице
7. P.S.
8. Скачать можно здесь

Скопировать ссылку



Что такое выпадающий список с фото!?

В один из дней мне потребовался выпадающий список html с фото, но увы! В выпадающий html список фото поставить не представляется возможным!


Ничего вразумительного я тогда не нашел! Поэтому пошел своим путем! Разберемся с алгоритмом!

Алгоритм выпадающего списка с картинками

1). Нам потребуется первая картинка, по которой мы будем кликать, и должно выпадать, как выпадающий список html, но с картинками.
2). В выпадающем списке с фото, каждая картинка должна быть кликабельная, чтобы нажав на неё мы могли бы отправить адрес фото, по которому нажали вместо той, на которую нажали самый первый раз!
3). После нажатия либо обратно по первой, либо по второй картинке должен закрываться выпавший список с картинками!
4). Нужно написать скрипт(javascript), который все это обработает!

Скопировать ссылку



Создание скрипта с выпадающим фото в списке

1). Картинка по которой будем нажимать:
.
2). Картинки, которые будут находиться в каком-то диве с display:none;





3). Немного стилей... наш блок отодвинем налево и поднимем в уровень с первой картинкой и повесим руку(cursor:pointer;) на картинки

<style>#blockImg1{display:none;position:absolute;margin:-50px 0 0 -75px;}#click_img1,.click_img1{cursor:pointer;}</style>
4). Скрипт, который обработает наши хотелки! Нажимаем по первому фото, отправляем display block в наш выпадающий блок с картинками!
Проверяем на display none - отдельная страница на эту тему!


После того, как вы нажимаете по второй картинки, адрес из любой второй картинки передается в первую! Все просто! смайлы

<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 = '/__a-data/__comments+arhiv/1.3/blocks/';
Фотки фильтруются по имени, чтобы в имени присутствовало часть слова ava_ - вы можете поставить туда например разрешение фоток. Фильтр в любом случае вам нужен, чтобы кам минимум избавиться двух виртуальных директорий.


Все остальное аналогично первому варианту...

<?

$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>';

?>

Стили:

<style>#blockImg{display:none;position:absolute;margin:-50px 0 0 -75px;}#click_img,.click_img{cursor:pointer;}</style>

Скрипт:

<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












Скопировать ссылку



Пример на отдельной странице

Пример сделал отдельно для того, чтобы никакие стили, скрипты, и всякая другая хрень на наш скрипт не действовали! Плюс этот же вариант в архиве!

+ В примере сделано отдельной строкой вывод автоматического пути от корневой!
Как это работает!?

Если скрипт находится в той же папке, что и фотки, то путь прописывать не нужно!

Если нет, то строку №3 экранируем или удаляем -> здесь

Скопировать ссылку



P.S.

Страница была полностью переписана(20.01.2020) и сделаны новые примеры!

А старый текст и скрипт невозможно было понять!

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---