В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
js tag (56)
select (13)
foto (22)
js (244)
php (329)



Blog (1392)
php (329)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (29)
Показать еще :
fonts (26)
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
hosting (18)
svg (18)
input (18)
php date (17)
board (16)
php time (16)
html book (16)
color (15)
info (15)
img (14)
js time (14)
js url (14)
js events (14)
htaccess (13)
select (13)
notepad (13)
osclass (13)
keyboard (12)
знак (12)
dw block (12)
php img (12)
php path (12)
table (12)
download (12)
icon (11)
form (11)
jsphp (11)
alphabet (10)
keyframes (10)
js delete (10)
yandex (10)
mouse (10)
chart (9)
hover (9)
dosite (8)
browser (8)
php post (7)
comment (7)
php url (7)
iframe (6)
php get (6)
mysql (6)
click (6)
list (6)
canvas (6)
adminka (6)
vs code (6)
js id (5)
mb (5)
heading (5)
value (5)
reg.ru (5)
ftp (5)
year (5)
js math (5)
tag a (5)
bbcode (4)
php var (4)
base64 (4)
xml (4)
scandir (4)
games (4)
flags (4)
symbols (4)
week (4)
day (4)
ssl (4)
нок (4)
submit (4)
task (4)
vk (4)
month (4)
pages (4)
console (4)
js form (4)
domen (3)
line (3)
https (3)
js post (3)
jquery post (3)
money (3)
numbers (3)
js img (3)
padding (3)
куб (3)
captcha (3)
ucoz (3)
js hash (3)
tag hr (2)
details (2)
typeof (2)
seo (2)
prompt (2)
sitemap (2)
рся (2)
youtube (2)
height (2)
arrows (2)
js vars (2)
counter (2)
google (2)
qr kod (2)
video (2)
speed (1)
smile (1)
нод (1)
rutube (1)
scroll (1)
windows (1)
archive (1)
jino (1)
cursor (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) и сделаны новые примеры!

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

Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.020613 секунд. Подробнее