СКРИПТЫ
ТЕГИ:
php (319)
js (241)
html (145)
css (126)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
fonts (30)
online (26)
link (26)
Показать еще :
ruweb.net (24)
foto (22)
atom (20)
php file (20)
forum (19)
hosting (18)
svg (18)
php date (17)
php time (16)
board (16)
html book (16)
input (16)
color (15)
js time (14)
js events (14)
js url (14)
info (13)
img (13)
htaccess (13)
osclass (13)
select (13)
notepad (13)
dw block (12)
download (12)
знак (12)
table (12)
php img (12)
php path (12)
keyboard (12)
form (11)
jsphp (11)
icon (11)
js delete (10)
yandex (10)
mouse (10)
hover (9)
dosite (8)
comment (7)
php url (7)
browser (7)
cookie (7)
mysql (6)
iframe (6)
click (6)
php get (6)
list (6)
ftp (5)
year (5)
js id (5)
mb (5)
value (5)
tag a (5)
js math (5)
reg.ru (5)
heading (5)
search (5)
chart (5)
adminka (5)
base64 (4)
ssl (4)
week (4)
php var (4)
day (4)
bbcode (4)
нок (4)
month (4)
vk (4)
symbols (4)
pages (4)
console (4)
submit (4)
js form (4)
xml (4)
task (4)
scandir (4)
numbers (3)
ucoz (3)
js post (3)
https (3)
js hash (3)
vs code (3)
куб (3)
domen (3)
line (3)
captcha (3)
padding (3)
js img (3)
sitemap (2)
tag hr (2)
typeof (2)
arrows (2)
qr kod (2)
money (2)
рся (2)
seo (2)
js vars (2)
youtube (2)
video (2)
prompt (2)
height (2)
counter (2)
details (2)
google (2)
smile (1)
jino (1)
archive (1)
windows (1)
header (1)
cursor (1)
speed (1)
rutube (1)
нод (1)
scroll (1)

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

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

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

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

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

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

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

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

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


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

    1). Картинка по которой будем нажимать:
    ava_hand_no_foto.png.
    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 - отдельная страница на эту тему!

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

    <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>


  3. Код в сборе выпадающего списка с фото

    Соберем весь код вместе для выпадающего списка с фото!

    <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>


  4. Выпадающий список с фото -> пример №1

    Это пример того, как будет выглядеть выпадающий список фото!

    ava_hand_no_foto.png

    Ну и собственно, чего мы и добивались! Вы можете спросить - зачем такое и где это может использоваться!?

    Мы как-то делали собственное комментирование, там мы этот код и использовали! -> см. здесь

    Это был простой пример, как это можно сделать, без php!


  5. Выпадающий список с фото -> пример №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

    ava_hand_no_foto.png


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

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

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

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

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


  7. P.S.

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

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

Можете не благодарить, лучше помогите!
Название скрипта :Выбор фото как в селект и изменить картинку в JS
Ссылка на скачивание : Все скрипты на одной странице
Теги :
фото в select
Выбор фото option
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
dwweb.ru есть здесь:
Последние комментарии :
Марат :
18.11.2022 17:21
Как же я вами завидую! Сколько у вас свободного…
подробнее.
>" :
18.11.2022 17:18
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
18.11.2022 17:17
А как восклицательные знаки? С ними всё нормально??? Или нет??? Вы к ним как…
подробнее.
Марат :
18.11.2022 17:15
В мире много разных отклонений... по статистике примерно 10% человек в странах имеют такие.... Была у меня…
подробнее.
qwe"> :
18.11.2022 17:00
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
20.10.2022 10:10
Очень рад за Вас!
подробнее.
ruweb
Страница загружена за : 0.024737 секунд. Подробнее