Форум программистов, компьютерный форум, киберфорум
PHP для начинающих
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.62/21: Рейтинг темы: голосов - 21, средняя оценка - 4.62
4 / 0 / 0
Регистрация: 16.07.2014
Сообщений: 65
1

Как реализовать выбор изображений?

09.08.2014, 12:28. Показов 4291. Ответов 13
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Суть такова:
Имеется форма регистрации "персонажа".
В форме присутствует селект, в нем пользователь выбирает пол для своего персонажа. Мужской или Женский.
Ниже идет еще один селект, в нем пользователь выбирает цвет кожи для своего персонажа. Темный или Светлый.

И вот ниже нужно вывести radio эллемент, в котором пользователь выбирает как бы картинку "скина", скинов неслько для кадого цвета кожи и для каждого пола.
То есть, если он выбрал Мужской пол и Темный цвет кожи, то показываем ему несколько, допустим три скина, мужчин с темной кожей, если выбрал женщину, то женские скины.

Я не знаю как сделать такую проверку. И не знаю как вывести в radio элементе изображения.

Прошу помощи, заранее спасибо
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
09.08.2014, 12:28
Ответы с готовыми решениями:

Как реализовать загрузку изображений?
Здравствуйте, у меня появился такой вопрос: Как реализовать загрузку пользователем изображений на...

Как реализовать выбор строк таблицы посредством CheckBox для дальнейшей работы с этими строками? (как в phpMyAdmin)
Как реализовать выбор строк таблицы посредством CheckBox для дальнейшей работы с этими строками?...

Как реализовать выбор изображений
Суть такова: Имеется форма регистрации "персонажа". В форме присутствует селект, в нем...

Сравнение двух изображений. Как реализовать?
Здравствуйте, уважаемые! Понимаю, что тема, возможно, уже и не раз обсуждалась, но хочу повторится....

13
65 / 64 / 33
Регистрация: 25.02.2014
Сообщений: 229
09.08.2014, 12:34 2
Ну я вижу два метода.
1. Реализовать все на флеше
2. реализовать слоями блоков с изображениями
0
19 / 19 / 8
Регистрация: 25.11.2013
Сообщений: 122
09.08.2014, 12:39 3
Если хочешь это сделать без перезагрузки страницы, то PHP тут не поможет.
0
4 / 0 / 0
Регистрация: 16.07.2014
Сообщений: 65
09.08.2014, 12:43  [ТС] 4
Нужно сделать как то так


Добавлено через 44 секунды
То есть чтобы сразу обновлялось, если выбрал мужской то мужские скины, далее выбирает темный, показываются фотки.

Добавлено через 44 секунды
Цитата Сообщение от vasiatka Посмотреть сообщение
Ну я вижу два метода.
1. Реализовать все на флеше
2. реализовать слоями блоков с изображениями
Флеш не хочу использовать, помогите как сделать вторым способом
0
72 / 72 / 29
Регистрация: 10.08.2012
Сообщений: 202
09.08.2014, 12:56 5
Лучший ответ Сообщение было отмечено anar4you как решение

Решение

Почему бы не сделать связку PHP + Ajax, при смене селекта
с выбором пола, отправляется запрос на сервер и в зависимости
от значения селекта php считывает нужные скины из папки, для
мужских скинов одна папка, для женских - другая, получается ваш
скрипт должен будет подменивать лишь путь к скинам.

Это было бы очень удобно, особенно если количество скинов станет
гораздо больше! И не пугайтесь Ajax, там знать много не надо.
1
4 / 0 / 0
Регистрация: 16.07.2014
Сообщений: 65
09.08.2014, 13:01  [ТС] 6
Цитата Сообщение от Бабуля Посмотреть сообщение
Почему бы не сделать связку PHP + Ajax, при смене селекта
с выбором пола, отправляется запрос на сервер и в зависимости
от значения селекта php считывает нужные скины из папки, для
мужских скинов одна папка, для женских - другая, получается ваш
скрипт должен будет подменивать лишь путь к скинам.
Это было бы очень удобно, особенно если количество скинов станет
гораздо больше! И не пугайтесь Ajax, там знать много не надо.
Я вообще не знаю ajax никогда им не пользовался
0
72 / 72 / 29
Регистрация: 10.08.2012
Сообщений: 202
09.08.2014, 13:06 7
Лучший ответ Сообщение было отмечено anar4you как решение

Решение

Его не надо знать, там всего-то пару строчек, которые запустят
php скрипт. Я могу вам помочь, но только ближе к вечеру (по Москве),
может к этому времени вам поможет кто-нибудь другой и может предложат
идею получше=). Если нет, то я напишу вам этот скрипт.
1
4 / 0 / 0
Регистрация: 16.07.2014
Сообщений: 65
09.08.2014, 13:16  [ТС] 8
Цитата Сообщение от Бабуля Посмотреть сообщение
Его не надо знать, там всего-то пару строчек, которые запустят
php скрипт. Я могу вам помочь, но только ближе к вечеру (по Москве),
может к этому времени вам поможет кто-нибудь другой и может предложат
идею получше=). Если нет, то я напишу вам этот скрипт.
Спасибо Вам большое. Буду ждать
0
72 / 72 / 29
Регистрация: 10.08.2012
Сообщений: 202
09.08.2014, 19:16 9
Весь исходник можешь скачать с яндекс диска: https://yadi.sk/d/MpkdIXWPZLNts
Там показана смена изображений при смене значения селекта и возможно
прокомментировано лучше чем здесь!

А теперь немного объяснений:

Есть у нас файл index.php, вот с таким содержимым:

В теге head нужно подключить jquery, не пугайся, просто скопируй:

HTML5
1
2
3
4
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
Далее в body создаем форму с селектом и добавляем немного PHP, так как
изначально в селекте стоит значение мужик, то и будем выводить изображения
из папки со скинами мужиков:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form>
    <select id="pol">
        <option value="man">Мужик</option>
    <option value="woman">Баба</option>
    </select>
 
    <div id="img" style="margin-top:50px;">
    <?php 
        $dir  = "images/man/"; // указываем путь к изображениям
                        
        $images = scandir($dir); // считываем все, что в папке
        // затем отбираем только изображения, ну вдруг у тебя в этой папке еще файлы будут
        $images = preg_grep('/\\.(?:png|Png|PNG|ico|gif|jpe?g)$/', $images); 
 
        foreach ($images as $image){ // массив для вывода всех изображений в папке
            echo '<input type="radio" name="man" value="'.$image.'">'; // печатаем radio
        echo '<img src="'.$dir.$image.'">'; // а после radio выводим изображения
        }
    ?>
    </div>
</form>
После формы нам нужно написать маленький скрипт, который будет
отправлять запрос на сервер без перезагрузки страницы:

Javascript
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">   
    $(document).ready(function(){               
        $("#pol").change(function (){ // реагирует на изменение селекта с id="pol"
        // далее отправляем значение селекта в php скрипт, чтобы определить пол
            $.get("obrabotka.php", { pol: $("#pol").val() }, function(data){ 
            $('#img').html(data); // а здесь выводит полученные данные в div  с id="img"
            });
        })
    });
</script>
А теперь посмотри, в этом маленьком скрипте есть строчка, в
которой отправляется значение селекта в файл obrabotka.php,
в этом файле мы и будем определять какие скины нужны, мужиков или баб,
собственно, вот он:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
    $pol = $_GET['pol']; // получаем данные из вышеописанно скрипта
 
    if ($pol == 'man'){ // делаем проверку на значение
        $dir  = "images/man/"; // если мужик, то папка с мужиками
        $name = "man";
    }
    else{
        $dir  = "images/woman/"; // иначе папка с бабами
        $name = "woman";
    }
                
    $images = scandir($dir); // сканируем папку
    $images = preg_grep('/\\.(?:png|Png|PNG|ico|gif|jpe?g)$/', $images); // выдираем изображения
 
    foreach ($images as $image){  // выводим все радио и изображения
        echo '<input type="radio" name="'.$name.'" value="'.$image.'">';
        echo '<img src="'.$dir.$image.'">';
    }
?>
Вот и все, если ты с php знаком, то проблем быть не должно)
Как видишь ajax здесь описан в 3 строчках=)

А теперь попытайся внедрить это в свой скрипт или переделай мой=)

Вообщем спрашивай, если что!
1
4 / 0 / 0
Регистрация: 16.07.2014
Сообщений: 65
09.08.2014, 19:54  [ТС] 10
Спасибо Вам большое, сейчас буду пробовать вписать

Добавлено через 28 минут
Нее что-то нефига не получается
Как мне нужно намного сложнее чем у Вас в скрипте

У меня как бы идут две проверки по полу персонажа и по цвету кожи.
И картинки у меня лежат все в одной папке.
И названия я их знаю. То есть я знаю какие нужно когда показывать.
0
72 / 72 / 29
Регистрация: 10.08.2012
Сообщений: 202
09.08.2014, 20:01 11
Это не сложнее, просто чуть чуть больше условий=)

Блин я не могу сейчас это сделать, времени нет, я
постараюсь завтра с утра помочь=)
0
4 / 0 / 0
Регистрация: 16.07.2014
Сообщений: 65
09.08.2014, 20:17  [ТС] 12
А как тогда можно сделать с перезагрузкой страницы?
0
65 / 64 / 33
Регистрация: 25.02.2014
Сообщений: 229
09.08.2014, 20:48 13
Цитата Сообщение от Бабуля Посмотреть сообщение
Это не сложнее, просто чуть чуть больше условий=)
Блин я не могу сейчас это сделать, времени нет, я
постараюсь завтра с утра помочь=)
На самом деле у него сложная задача

Если по вашему, то
n1 - форм лица, n2 - глаз, n3 - волос =>n1*n2*n3*... вариантов изображений
Хранить такое количество накладно и не рационально.

У меня к сожалению нет времени писать код, но могу словами пояснить, может кто возьмется сделать.

Надо делать как-то так.
1. Картинки бьются на части по типу (волосы, глаза и т.д.) все картинки делаются одного размера скажем 200*200 пикселей (фон прозрачный)
2. Создаешь наложенные один на один блоки для формы лица, для волос, для глаз того же размера
при выборе элемента в соответствующем блоке меняется фон на картинку выбранную пользователем
3. Форма отправляет на сервер номера или id картинок (это как вам удобнее). Далее по указанным картинкам в php склеиваете аватарку. и складываете в нудное место.

Я когда делал такую фигню для zveriki.com (уже мертвый портал, но игру можно на фейсбуке откопать) потратил около недели, основное время естественно отладка и тесты. Кстати такой вариант дизайнерам не понравился и все загнали во флешину
0
4 / 0 / 0
Регистрация: 16.07.2014
Сообщений: 65
10.08.2014, 15:33  [ТС] 14
Все еще актуально.
Код пишу на CodeIgniter'е.
Пробовал сделать все это на двух страницах. Ничего не получается.
Как реализовать?

Добавлено через 3 часа 54 минуты
все сделал
0
10.08.2014, 15:33
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
10.08.2014, 15:33
Помогаю со студенческими работами здесь

Как реализовать скроллинг больших изображений мышкой
Форумчане, помогите, столкнулся с такой проблемой, имеются большие изображения, и для удобства ...

Как реализовать загрузчик изображений как у гугла
Понравился такой загрузчик изображений, как его реализовать?

Загрузка изображений на страницу без использования HTML! Как это реализовать? Через что, подскажите?
&lt;div class=&quot;pikachoose&quot;&gt; &lt;ul id=&quot;pikame&quot; &gt; &lt;li&gt;&lt;a...

Как реализовать выбор диалога?
Как реализовать такой код? var dialog:Array = ; dialog_txt.text = dialog;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
14
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru