СКРИПТЫ alt phpjshtmlcssblog
ТЕГИ:
php (267)
js (136)
html (132)
css (98)
html tags (58)
edit text (37)
jquery (36)
form html (29)
php array (28)
foto (23)
fonts (22)
forum (19)
atom (18)
html book (17)
board (17)
Показать еще :
js method (16)
svg (16)
hosting (15)
php file (15)
color (14)
osclass (13)
htaccess (13)
ruweb.net (13)
table (12)
path (12)
icon (11)
php date (11)
online (11)
info (11)
js delete (11)
notepad (11)
yandex (11)
input (11)
php img (10)
url (10)
jsphp (10)
form (8)
cookie (7)
task (7)
php url (7)
comment (7)
ftp (6)
click (6)
js url (6)
value (5)
reg.ru (5)
mb (5)
adminka (5)
js id (4)
select (4)
search (4)
bbcode (4)
js copy (4)
js form (4)
iframe (3)
js time (3)
vs code (3)
captcha (3)
vk (3)
ukoz (2)
browser (2)
dosite (2)
seo (2)
tag hr (2)
js post (2)
sitemap (2)
console (2)
header (1)
domen (1)
smile (1)
ssl (1)
books (1)
numbers (1)
archive (1)

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

2018/08/21 Марат 297 0 php | js | foto | select |
Выпадающий список с фото, по аналогии с 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

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...

Последние комментарии :
Марат :
17.10.2021 39:28
Давно не делал и страницу и видео в один день... чет, как-то выжитый как…
подробнее.
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.