СКРИПТЫ
ТЕГИ:
php (285)
js (167)
html (139)
css (119)
html tags (61)
jquery (40)
text (37)
form html (30)
php array (30)
fonts (27)
ruweb.net (23)
foto (22)
online (22)
Показать еще :
php file (21)
atom (20)
forum (19)
svg (18)
board (17)
hosting (17)
js method (16)
html book (16)
input (16)
link (15)
color (15)
php date (15)
js events (14)
htaccess (13)
table (13)
osclass (13)
dw block (12)
path (12)
select (12)
js delete (12)
icon (11)
keyboard (11)
jsphp (11)
php img (11)
info (11)
img (11)
php time (11)
form (11)
download (11)
notepad (11)
url (10)
mouse (10)
js time (9)
yandex (9)
cookie (7)
php url (7)
comment (7)
dosite (7)
task (7)
hover (7)
iframe (6)
list (6)
year (6)
mysql (6)
click (6)
js url (6)
ftp (5)
heading (5)
php get (5)
search (5)
adminka (5)
js id (5)
browser (5)
mb (5)
value (5)
chart (5)
week (4)
mounth (4)
bbcode (4)
day (4)
нок (4)
reg.ru (4)
vk (4)
submit (4)
captcha (4)
js form (4)
console (4)
symbols (4)
ucoz (3)
js post (3)
line (3)
https (3)
pages (3)
scandir (3)
ssl (3)
js img (3)
vs code (3)
padding (3)
куб (2)
js vars (2)
video (2)
youtube (2)
seo (2)
details (2)
title (2)
cursor (2)
base64 (2)
second (2)
tag hr (2)
money (2)
рся (2)
typeof (2)
arrows (2)
counter (2)
height (2)
qr kod (2)
sitemap (2)
нод (1)
windows (1)
google (1)
header (1)
numbers (1)
archive (1)
domen (1)
speed (1)
books (1)
smile (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
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

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

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

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
Последние комментарии :
Марат :
07.07.2022 13:02
Вам спасибо, что оценили! На ваш вопрос в одной строчке не ответишь, поэтому для вас отдельный пункт…
подробнее.
Борис :
07.07.2022 10:41
Спасибо за статью! Подскажите, пожалуйста, как сделать, чтобы файл создавался по имени из формы? Есть тест,…
подробнее.
вывы :
05.06.2022 12:32
сейчас яндекс добавил индексацию js в…
подробнее.
Марат :
02.06.2022 20:14
Михаил :
02.06.2022 20:10
Ну вот только для этого может быть ;) А так, нет смысла…
подробнее.
Марат :
02.06.2022 15:59
Чтобы вы зашли на данную страницу и нажали на…
подробнее.
ruweb
Страница загружена за : 0.024179 секунд. Подробнее