Как добавить этот вариант в этот проект-подборщик изображений?

-2

У меня проблема. Концепция заключается в том, что у меня есть 4 кликабельных изображения, созданных этим http://rvera.github.io/image-picker/, и я хочу создать опцию, которая переадресует кого-то на соответствующую ссылку href после нажатия кнопки и выбора подходящего изображения. Например, если бы я щелкнул изображение с помощью cat и затем кнопкой, он отправит меня на страницу о кошках. Если бы я щелкнул изображение с собакой и кнопкой, он отправит меня на страницу о собаках, если бы я щелкнул изображения с собакой и кошкой и кнопкой, он отправит меня на страницу о собаках и кошках.Как добавить этот вариант в этот проект-подборщик изображений?

<html> 

<head> 
<link rel="stylesheet" href="css.css"> 
<script src="js.js"></script> 



<!-- scripts for imagepicker --> 
    <link rel="stylesheet" href="image-picker.css"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="image-picker.js"></script> 
    <script type="text/javascript" src="image-picker.min.js"></script> 



</head> 
<body> 


<!--code for imagepicker--> 
<select multiple="multiple" class="image-picker show-html"> 
    <option data-img-src="http://placekitten.com/220/200" href="http://cats.com" value="1">Cute Kitten 1</option> 
    <option data-img-src="http://placekitten.com/180/200" href="http://dogs.com" value="2">Cute Kitten 2</option> 
    <option data-img-src="http://placekitten.com/130/200" href="http://dogsandcats.com" value="3">Cute Kitten 3</option> 

</select> 

<button href="#">Forward</button> 


<script> 

$("select").imagepicker() 

</script> 
</body> 


</html>

Как это сделать? Я совершенно не знаю: /.

источник

2015-01-29 oreo3311

Вам нужно написать скрипт, который проверяет, какие параметры выбраны, когда пользователь нажимает кнопку, а затем в зависимости от выбранного, перенаправляет их на соответствующий веб-сайт. – alex

Да, как мне это сделать? – oreo3311

Я предполагаю, что для начала вы, вероятно, захотите изучить Javascript и/или jQuery! Stack Overflow обычно функционирует, чтобы помочь людям отлаживать проблемы, которые у них возникают с кодом *, который они уже писали *, а не писать свой код * для * вас. : P – alex

Сообщите мне, если это работает. Я добавил скрипт, который, когда вы меняете свой выбор, меняет значение.

<!DOCTYPE HTML> 
<html> 

<head> 
<link rel="stylesheet" href="css.css"> 
<script src="js.js"></script> 



<!-- scripts for imagepicker --> 
    <link rel="stylesheet" href="image-picker.css"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="image-picker.js"></script> 
    <script type="text/javascript" src="image-picker.min.js"></script> 
    <script type="text/javascript"> 
     "use strict"; 
     //wait for the page to be fully loaded 
     window.onload = function() { 
      initialize(); 
     } 
    </script> 



</head> 
<body> 


<!--code for imagepicker--> 
<select multiple="multiple" class="image-picker show-html" id="selectImg"> 
    <option data-img-src="http://placekitten.com/220/200" value="http://cats.com">Cute Kitten 1</option> 
    <option data-img-src="http://placekitten.com/180/200" value="http://dogs.com">Cute Kitten 2</option> 
    <option data-img-src="http://placekitten.com/130/200" value="http://dogsandcats.com">Cute Kitten 3</option> 

</select> 

<button href="#" id="forwardButton">Forward</button> 

<script> 

function initialize() { 

    var choice = document.getElementById("selectImg").value; 

    //changes destination when you set or change your choice 
    document.getElementById("selectImg").onchange = function() { 
     choice = document.getElementById("selectImg").value; 
    } 

    //when button is clicked 
    document.getElementById("forwardButton").onclick = function() { 
     if (choice !== ("" || "undefined")) { 
      window.location = choice; 
     }  
    } 
} 

</script> 
</body> 
</html>

источник

2015-01-29 17:11:34 BEAGM

пересылка работает, но изображения исчезают с помощью этого кода: / – oreo3311

Как добавить этот вариант в этот проект-подборщик изображений?

ответ

Смежные вопросы